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

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

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>

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>

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>
Screen Size
Color Themes
Demo QR Code