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.

<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/icecreamsales.json" TitleText="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.

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/oil.json" TitleText="Oil Production" SubtitleText="(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.

<dx:BootstrapChart runat="server" TitleText="Stock Price" DataSourceUrl="~/jsondata/stockprice.json">
    <ArgumentAxis ArgumentType="System.DateTime" Visible="true" TickVisible="true">
        <Label OnClientCustomizeHint="customizeHint" OnClientCustomizeText="customizeText" />
    </ArgumentAxis>
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis TitleText="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.
<dx:BootstrapPieChart runat="server" DataSourceUrl="~/jsondata/states.json" TitleText="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