Range Bar

This example illustrates the use of the range bar series type. Range bars can be used to display value ranges corresponding to specified arguments. The data displays as sets of rectangular bars beginning and ending at a specified values.

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/ragebar.json" TitleText="Crude Oil Prices in 2005">
    <SettingsCommonSeries ArgumentField="date" />
    <SeriesCollection>
        <dx:BootstrapChartRangeBarSeries RangeValue1Field="aVal1" RangeValue2Field="aVal2" Name="ANS West Coast" />
        <dx:BootstrapChartRangeBarSeries RangeValue1Field="tVal1" RangeValue2Field="tVal2" Name="West Texas Intermediate" />
    </SeriesCollection>
    ...
</dx:BootstrapChart>

Range Area

Range area series can be used to display value ranges corresponding to specified arguments. The data displays as a color-filled space between the line that joins the beginning the end series points.

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/ragearea.json" TitleText="Annual Inflation Rate in 2010 and 2011">
    <SeriesCollection>
        <dx:BootstrapChartRangeAreaSeries ArgumentField="date" RangeValue1Field="val2010" RangeValue2Field="val2011" />
    </SeriesCollection>
    ...
</dx:BootstrapChart>
Screen Size
Color Themes
Demo QR Code