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>
</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.

Oil Production
<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" />
</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.

Stock Price
<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>
</dx:BootstrapChart>
function customizeText(args) {
    return Globalize.formatDate(args.value, { date: "short" });
}
function customizeHint(args) {
    return Globalize.formatDate(args.value, { date: "full" });
}

Tooltip

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.
Top 10 Most Populated States in US
<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='<%= Page.ResolveUrl("~/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>"
    };
}
Screen Size
Color Themes
Demo QR Code