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 is displayed as sets of rectangular bars beginning and ending at a specified values.

@(Html.DevExpress()
    .BootstrapChart("chartRangeBar")
    .TitleText("Crude Oil Prices in 2005")
    .SettingsCommonSeries(settings => settings
        .ArgumentField("date"))
    .SeriesCollection(series => {
        series.AddRangeBarSeries()
            .RangeValue1Field("aVal1")
            .RangeValue2Field("aVal2")
            .Name("ANS West Coast");
        series.AddRangeBarSeries()
            .RangeValue1Field("tVal1")
            .RangeValue2Field("tVal2")
            .Name("West Texas Intermediate");
    })
    ...
    .Bind("jsondata/ChartTypes/ragebar.json"))

Range Area

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

@(Html.DevExpress()
    .BootstrapChart("chartRangeArea")
    .TitleText("Annual Inflation Rate in 2010 and 2011")
    .SeriesCollection(series => series
        .AddRangeAreaSeries()
            .RangeValue1Field("val2010")
            .RangeValue2Field("val2011")
            .ArgumentField("date"))
    ...
    .Bind("jsondata/ChartTypes/ragearea.json"))
function onClientCustomizeText() {
    return this.valueText + " %"
}
Screen Size
Color Themes
Demo QR Code