By default, all series points in a chart are identical, but you can specify a unique appearance for individual points using the OnClientCustomizePoint method. A client-side callback function specified using this method should return an object containing modified point options. The client-side function (which is contained in this property) should return an object with options that will be changed for a certain point. See the point object for information about all options available for customization.

    .TitleText("Ice Cream Sales vs Temperature")
    .SeriesCollection(series => series
            .Label(label => label.Visible(true)))
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' } };
        return { color: 'blue', hoverStyle: { color: '#4c4cff' } };


To specify individual options of a particular series, pass the name of a client-side callback function to the OnClientCustomizeSeries method (available through SettingsSeriesTemplate).

Define a data source, set the argument and value fields using the CommonSeriesSettings.ArgumentField method and CommonSeriesSettings.ValueField methods, which will apply to all series. Then, define a template for the series using the SeriesTemplate method. Assign the data source field that specifies the series name using the SeriesTemplate.NameField method.

The OnClientCustomizeSeries method accepts a callback function name that should return a series object containing customized settings of an individual series.

    .TitleText("Oil Production")
    .SubtitleText("(in millions tonnes)")
    .SettingsSeriesTemplate(template => template
    .SettingsCommonSeries(settings => settings
function customizeSeries(valueFromNameField) {
    return valueFromNameField === 2009 ? { type: "line", label: { visible: true }, color: "#ff3f7a" } : {};


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 using the OnClientCustomizeText or OnClientCustomizeHint methods available through the Label method of the required axis.

    .TitleText("Stock Price")
    .ArgumentAxis(axis => axis
        .Label(label => label
    .ValueAxisCollection(axis => axis
            .TitleText("US dollars")
    .SeriesCollection(series => series
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 OnClientCustomizeTooltip method (available through SettingsToolTip). This method takes the name of a client callback function returning an object containing customized settings. The following fields can be specified in this object.

    .TitleText("Top 10 Most Populated States in US")
    .SettingsToolTip(settings => settings
    .SeriesCollection(series => series
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>" +
Screen Size
Color Themes
Demo QR Code