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>
    ...
</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>
    ...
</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>
    ...
</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>
    ...
</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>
    ...
</dx:BootstrapChart>
Screen Size
Color Themes
Demo QR Code