Line

This example shows the Line series view. This view is useful when you need to show line trends for several series on the same diagram and to compare the values of several series for the same points arguments.

<dx:BootstrapChart ID="ChartLine" runat="server" DataSourceUrl="~/jsondata/ChartTypes/fullstackedbar.json" TitleText="Energy Consumption in 2004" SubtitleText="(Millions of Tons, Oil Equivalent)">
    <SettingsCommonSeries ArgumentField="country" />
    <SeriesCollection>
        <dx:BootstrapChartLineSeries ValueField="hydro" Name="Hydro-electric" />
        <dx:BootstrapChartLineSeries ValueField="oil" Name="Oil" />
        <dx:BootstrapChartLineSeries ValueField="gas" Name="Natural gas" />
        <dx:BootstrapChartLineSeries ValueField="coal" Name="Coal" />
        <dx:BootstrapChartLineSeries ValueField="nuclear" Name="Nuclear" />
    </SeriesCollection>
    <ArgumentAxis ValueMarginsEnabled="false" DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
    <SettingsLegend HorizontalAlignment="Center" VerticalAlignment="Bottom" ItemTextPosition="Bottom" />
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis TitleText="millions" />
    </ValueAxisCollection>
    <CssClasses Control="demo-chart" />
</dx:BootstrapChart>

Spline

This example shows the Spline series view. This view is similar to the Line chart but plots a fitted curve through each data point in a series.

<dx:BootstrapChart ID="ChartSpline" runat="server" DataSourceUrl="~/jsondata/ChartTypes/spline.json" TitleText="Architecture Share Over Time (Count)">
    <SettingsCommonSeries ArgumentField="year" />
    <SeriesCollection>
        <dx:BootstrapChartSplineSeries ValueField="smp" Name="SMP" />
        <dx:BootstrapChartSplineSeries ValueField="mmp" Name="MMP" />
        <dx:BootstrapChartSplineSeries ValueField="cnstl" Name="Cnstl" />
        <dx:BootstrapChartSplineSeries ValueField="cluster" Name="Cluster" />
    </SeriesCollection>
    <ArgumentAxis ValueMarginsEnabled="false" DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
    <SettingsLegend HorizontalAlignment="Right" VerticalAlignment="Top" ItemTextPosition="Right" />
    <CssClasses Control="demo-chart" />
</dx:BootstrapChart>

Scatter

This example shows the Scatter series view. You can use Scatter whenever you need to allow the user to draw their conclusions about information displayed within the chart.

<dx:BootstrapChart ID="ChartScatter" runat="server" DataSourceUrl="~/jsondata/ChartTypes/scatter.json">
    <SeriesCollection>
        <dx:BootstrapChartScatterSeries ValueField="y1" ArgumentField="x1" />
        <dx:BootstrapChartScatterSeries ValueField="y2" ArgumentField="x2">
            <Point Symbol="TriangleDown" />
        </dx:BootstrapChartScatterSeries>
    </SeriesCollection>
    <ArgumentAxis ValueMarginsEnabled="false" DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" MinorGridVisible="true" TickInterval="5" />
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis TickInterval="50" />
    </ValueAxisCollection>
    <SettingsLegend Visible="false" />
    <CssClasses Control="demo-chart" />
</dx:BootstrapChart>

Step Line

This example shows the Step Line series view. This view is useful when you need to show how much values have changed for different points of the same series.

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/stepline.json" TitleText="Australian Olympic Medal Count" CustomPalette="#cd7f32, #b7b7b7, #ffd700">
    <SettingsCommonSeries ArgumentField="year">
        <Point Visible="false"/>
    </SettingsCommonSeries>
    <SeriesCollection>
        <dx:BootstrapChartSteplineSeries ValueField="bronze" Name="Bronze Medals" />
        <dx:BootstrapChartSteplineSeries ValueField="silver" Name="Silver Medals" />
        <dx:BootstrapChartSteplineSeries ValueField="gold" Name="Gold Medals" />
    </SeriesCollection>
    <ArgumentAxis ValueMarginsEnabled="false" DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" MaxValue="2017" />
    <SettingsLegend HorizontalAlignment="Center" VerticalAlignment="Bottom" ItemTextPosition="Bottom" />
    <CssClasses Control="demo-chart" />
</dx:BootstrapChart>

Bubble

This example shows a Bubble series view. This chart, in addition to the XY point diagram capabilities, allows you to visually represent the Weight of a series point by a bubble's size.

<dx:BootstrapChart ID="ChartBubble" runat="server" DataSourceUrl="~/jsondata/ChartTypes/bubble.json" TitleText="Correlation between Total Population and<br> Population with Age over 60" EncodeHtml="false">
    <SeriesCollection>
        <dx:BootstrapChartBubbleSeries ArgumentField="total1" ValueField="older1" SizeField="perc1" TagField="tag1" Name="Europe" />
        <dx:BootstrapChartBubbleSeries ArgumentField="total2" ValueField="older2" SizeField="perc2" TagField="tag2" Name="Africa" />
        <dx:BootstrapChartBubbleSeries ArgumentField="total3" ValueField="older3" SizeField="perc3" TagField="tag3" Name="Asia" />
        <dx:BootstrapChartBubbleSeries ArgumentField="total4" ValueField="older4" SizeField="perc4" TagField="tag4" Name="North America" />
    </SeriesCollection>
    <ArgumentAxis TitleText="Total Population (M)" />
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis TitleText="Population with Age over 60 (M)" />
    </ValueAxisCollection>
    <SettingsLegend HorizontalAlignment="Left" ItemTextPosition="Bottom" Position="Inside" />
    <SettingsToolTip Enabled="true" OnClientCustomizeTooltip="onClientCustomizeBubbleTooltip" />
    <CssClasses Control="demo-chart" LegendRect="chart-legend" />
</dx:BootstrapChart>
function onClientCustomizeBubbleTooltip(arg) {
    return {
        text: arg.point.tag + '<br/>Total Population: ' + arg.argumentText + 'M <br/>Population with Age over 60: ' + arg.valueText + 'M (' + arg.size + '%)'
    };
}
Screen Size
Color Themes
Demo QR Code