This sample demonstrates how to customize the data point labels with dataPointLabelCreating
Event.
For detailed implementation, please take a look at the Aspx code tab.
<%@ Page Language="C#" %>
<%@ Register assembly="JQChart.Web" namespace="JQChart.Web.UI.WebControls" tagprefix="jqChart" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="~/Content/jquery.jqChart.css" />
<link rel="stylesheet" type="text/css" href="~/Content/themes/le-frog/jquery-ui-1.8.20.css" />
<script src="<% = ResolveUrl("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script>
<script src="<% = ResolveUrl("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script>
</head>
<body>
<form runat="server">
<script lang="javascript" type="text/javascript">
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
$(document).ready(function () {
$('#<%= Chart1.ClientID %>').bind('tooltipFormat', function (e, data) {
return '$' + addCommas(data.y);
});
$('#<%= Chart1.ClientID %>').bind('dataPointLabelCreating', function (event, data) {
data.text = '$' + addCommas(data.text);
});
});
</script>
<jqChart:Chart ID="Chart1" Width="500px" Height="300px" runat="server">
<Title Text="dataPointLabelCreating Event"></Title>
<Background FillStyleType="LinearGradient" X1="0">
<ColorStops>
<jqChart:ColorStop Color="#d2e6c9" />
<jqChart:ColorStop Color="white" Offset="1" />
</ColorStops>
</Background>
<Border StrokeStyle="#6ba851" />
<Animation Enabled="True" Duration="00:00:01" />
<Series>
<jqChart:ColumnSeries Title="Column">
<XValues>
<jqChart:StringValue Value="A" />
<jqChart:StringValue Value="B" />
<jqChart:StringValue Value="C" />
<jqChart:StringValue Value="D" />
<jqChart:StringValue Value="E" />
<jqChart:StringValue Value="F" />
<jqChart:StringValue Value="G" />
<jqChart:StringValue Value="H" />
</XValues>
<YValues>
<jqChart:DoubleValue Value="4600" />
<jqChart:DoubleValue Value="3500" />
<jqChart:DoubleValue Value="6800" />
<jqChart:DoubleValue Value="3000" />
<jqChart:DoubleValue Value="2700" />
<jqChart:DoubleValue Value="8500" />
<jqChart:DoubleValue Value="4300" />
<jqChart:DoubleValue Value="2900" />
</YValues>
<Labels Visible="true" Font="12px sans-serif">
<FillStyle Color="Red"></FillStyle>
</Labels>
</jqChart:ColumnSeries>
</Series>
</jqChart:Chart>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SamplesBrowser.Models
{
public class EmptyChartModel
{
}
}