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 ID="ChartRangeBar" 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>
    <ArgumentAxis ArgumentType="System.DateTime">
        <Label>
            <Format Type="ShortDate"/>
        </Label>
    </ArgumentAxis>
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis TitleText="$ 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.

<dx:BootstrapChart ID="ChartRangeArea" 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>
    <ArgumentAxis ArgumentType="System.DateTime" ValueMarginsEnabled="false">
        <Label>
            <Format Type="Month"/>
        </Label>
    </ArgumentAxis>
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis MinValue="0.5" MaxValue="4" TickInterval="0.5" ValueMarginsEnabled="false">
            <Label OnClientCustomizeText="onClientCustomizeText">
                <Format Type="FixedPoint" Precision="1" />
            </Label>
        </dx:BootstrapChartValueAxis>
    </ValueAxisCollection>
    <SettingsLegend Visible="false" />
    <CssClasses Control="demo-chart" />
</dx:BootstrapChart>
function onClientCustomizeText() {
    return this.valueText + " %"
}
Screen Size
Color Themes
Demo QR Code