Points
By default, all series points in a chart are identical, but you can specify a unique appearance for individual points using the OnClientCustomizePoint property. A client-side callback function assigned to this property should return an object containing modified point options. See the point object for information about all options available for customization.
Ice Cream Sales vs Temperature
<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/icecreamsales.json" TitleSettings-Text="Ice Cream Sales vs Temperature" Height="500px"
OnClientCustomizePoint="customizePoint">
<SeriesCollection>
<dx:BootstrapPolarChartLineSeries ArgumentField="temperature" ValueField="sales" Closed="false">
<Label Visible="true" />
</dx:BootstrapPolarChartLineSeries>
</SeriesCollection>
<SettingsLegend Visible="false" />
</dx:BootstrapPolarChart>
function customizePoint(pointInfo) {
if(pointInfo.argument > 22)
return { color: '#ff1c1c', hoverStyle: { color: '#ff7c7c' } };
else if(pointInfo.argument > 18)
return { color: 'orange', hoverStyle: { color: '#ffcc1c' } };
else if(pointInfo.argument > 15)
return { color: '#8833ff', hoverStyle: { color: '#aa77aa' } };
else
return { color: 'blue', hoverStyle: { color: '#4c4cff' } };
}
Series
To specify individual options of a particular series, assign a client-side callback function to the SeriesTemplate.OnClientCustomizeSeries property.
Define a data source, set the argument and value fields using the CommonSeriesSettings.ArgumentField and CommonSeriesSettings.ValueField properties, which will apply to all series. Then, define a template for the series using the SeriesTemplate property. Assign the data source field that specifies the series name to the SeriesTemplate.NameField property.
The OnClientCustomizeSeries property specifies a callback function that should return a series object containing customized settings of an individual series.
<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/oil.json" TitleSettings-Text="Oil Production" TitleSettings-SubTitleSettings-Text="(in millions tonnes)">
<SettingsSeriesTemplate NameField="year" OnClientCustomizeSeries="customizeSeries" />
<SettingsCommonSeries Type="Bar" ArgumentField="country" ValueField="oil" />
<SettingsLegend VerticalAlignment="Bottom" HorizontalAlignment="Center" />
</dx:BootstrapChart>
function customizeSeries(valueFromNameField) {
return valueFromNameField === 2009 ? { type: "line", label: { visible: true }, color: "#ff3f7a" } : {};
}
Axes
To customize the text displayed by axis labels or the hint that appears when a user points to an axis label, assign a client-side callback function to the Label.OnClientCustomizeText or Label.OnClientCustomizeHint property of the required axis.
<dx:BootstrapChart runat="server" TitleSettings-Text="Stock Price" DataSourceUrl="~/jsondata/stockprice.json">
<ArgumentAxis ArgumentType="System.DateTime" Visible="true" TickSettings-Visible="true">
<Label OnClientCustomizeHint="customizeHint" OnClientCustomizeText="customizeText" />
</ArgumentAxis>
<ValueAxisCollection>
<dx:BootstrapChartValueAxis TitleSettings-Text="US dollars" TickInterval="1" Label-Format-Type="Currency" />
</ValueAxisCollection>
<SeriesCollection>
<dx:BootstrapChartStockSeries ArgumentField="date" OpenValueField="o" HighValueField="h" LowValueField="l" CloseValueField="c" />
</SeriesCollection>
<SettingsLegend Visible="false" />
</dx:BootstrapChart>
function customizeText(args) {
return Globalize.formatDate(args.value, { date: "short" });
}
function customizeHint(args) {
return Globalize.formatDate(args.value, { date: "full" });
}
To customize the appearance of a particular tooltip, use the Tooltip.OnClientCustomizeTooltip property. This property should be assigned a function returning an object containing customized settings. The following fields can be specified in this object.
- color - Specifies the color of a tooltip.
- text - Specifies the text displayed by a tooltip.
- html - Specifies the HTML markup for a tooltip content. If you are going to use external resources (for example, images) in the markup, specify the size of the area they will occupy.
- fontColor - Specifies the color of the text displayed by a tooltip.
- borderColor - Specifies the color of the tooltip border.
<dx:BootstrapPieChart runat="server" DataSourceUrl="~/jsondata/states.json" TitleSettings-Text="Top 10 Most Populated States in US">
<SettingsToolTip Enabled="true" OnClientCustomizeTooltip="customizeTooltip" />
<SeriesCollection>
<dx:BootstrapPieChartSeries ArgumentField="name" ValueField="population" TagField="data" />
</SeriesCollection>
</dx:BootstrapPieChart>
function customizeTooltip(args) {
return {
html: "<div class='state-tooltip'>" +
"<img src='../images/flags/" + args.point.tag.flag + ".gif' />" +
"<h4>" + args.argument + "</h4>" +
"<b>Capital</b>: " + args.point.tag.capital + "<br/>" +
"<b>Population</b>: " + Globalize.formatNumber(args.value, { maximumFractionDigits: 0 }) + " people<br/>" +
"<b>Area</b>: " + Globalize.formatNumber(args.point.tag.area, { maximumFractionDigits: 0 }) + " km<sup>2</sup>" +
"</div>"
};
}