Points

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.

@(Html.DevExpress()
    .BootstrapPolarChart("chartPoints")
    .TitleText("Ice Cream Sales vs Temperature")
    .Height(500)
    .OnClientCustomizePoint("customizePoint")
    .SeriesCollection(series => series
        .AddLineSeries()
            .ArgumentField("temperature")
            .ValueField("sales")
            .Closed(false)
            .Label(label => label.Visible(true)))
    .Bind("jsondata/icecreamsales.json"))
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, 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.

@(Html.DevExpress()
    .BootstrapChart("chartSeries")
    .TitleText("Oil Production")
    .SubtitleText("(in millions tonnes)")
    .SettingsSeriesTemplate(template => template
        .NameField("year")
        .OnClientCustomizeSeries("customizeSeries"))
    .SettingsCommonSeries(settings => settings
        .Type(SeriesType.Bar)
        .ArgumentField("country")
        .ValueField("oil"))
    .Bind("jsondata/oil.json"))
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 using the OnClientCustomizeText or OnClientCustomizeHint methods available through the Label method of the required axis.

@(Html.DevExpress()
    .BootstrapChart("chartAxes")
    .TitleText("Stock Price")
    .ArgumentAxis(axis => axis
        .ArgumentType(typeof(DateTime))
        .Visible(true)
        .TickVisible(true)
        .Label(label => label
            .OnClientCustomizeHint("customizeHint")
            .OnClientCustomizeText("customizeText")))
    .ValueAxisCollection(axis => axis
        .AddValueAxis()
            .TitleText("US dollars")
            .TickInterval(1)
            .Label(label=>label
                .Format(format=>format
                    .Type(DevExpress.AspNetCore.Bootstrap.FormatType.Currency))))
    .SeriesCollection(series => series
        .AddStockSeries()
            .ArgumentField("date")
            .OpenValueField("o")
            .HighValueField("h")
            .LowValueField("l")
            .CloseValueField("c"))
    .Bind("jsondata/stockprice.json"))
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 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.

@(Html.DevExpress()
    .BootstrapPieChart("chartTooltip")
    .TitleText("Top 10 Most Populated States in US")
    .SettingsToolTip(settings => settings
        .Enabled(true)
        .OnClientCustomizeTooltip("customizeTooltip"))
    .SeriesCollection(series => series
        .Add()
            .ArgumentField("name")
            .ValueField("population")
            .TagField("data"))
    .Bind("jsondata/states.json"))
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>"
        };
}
Screen Size
Color Themes
Demo QR Code