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.

Crude Oil Prices in 2005
ASPXCopy 
<dx:BootstrapChart ID="ChartRangeBar" runat="server" DataSourceUrl="~/jsondata/ChartTypes/ragebar.json" TitleSettings-Text="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>
    <ArgumentAxis ArgumentType="System.DateTime">
        <Label>
            <Format Type="ShortDate"/>
        </Label>
    </ArgumentAxis>
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis TitleSettings-Text="$ per barrel">
            <Label>
                <Format Type="Currency" />
            </Label>
        </dx:BootstrapChartValueAxis>
    </ValueAxisCollection>
    <SettingsLegend VerticalAlignment="Bottom" HorizontalAlignment="Center" />
    <CssClasses Control="demo-chart" />
</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.

Annual Inflation Rate in 2010 and 2011
ASPXJSCopy 
<dx:BootstrapChart ID="ChartRangeArea" runat="server" DataSourceUrl="~/jsondata/ChartTypes/ragearea.json" TitleSettings-Text="Annual Inflation Rate in 2010 and 2011">
    <SeriesCollection>
        <dx:BootstrapChartRangeAreaSeries ArgumentField="date" RangeValue1Field="val2010" RangeValue2Field="val2011" />
    </SeriesCollection>
    <ArgumentAxis ArgumentType="System.DateTime" ValueMarginsEnabled="false">
        <Label>
            <Format Type="Month"/>
        </Label>
    </ArgumentAxis>
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis TickInterval="0.5" ValueMarginsEnabled="false">
            <Label OnClientCustomizeText="onClientCustomizeText">
                <Format Type="FixedPoint" Precision="1" />
            </Label>
            <VisualRangeSettings>
                <NumericAxis StartValue="0.5" EndValue="4" />
            </VisualRangeSettings>
        </dx:BootstrapChartValueAxis>
    </ValueAxisCollection>
    <SettingsLegend Visible="false" />
    <CssClasses Control="demo-chart" />
</dx:BootstrapChart>
function onClientCustomizeText() {
    return this.valueText + " %"
}
Screen Size
Color Themes
Demo QR Code