Area

This demo shows the Area series view. This view is useful when you need to show trends for several series on the same diagram and also demonstrate the relationship of parts to a whole.

@(Html.DevExpress()
    .BootstrapChart("chartArea")
    .TitleText("Population: Age Structure (2000)")
    .SettingsCommonSeries(settings => settings
        .ArgumentField("country"))
    .SeriesCollection(series => {
        series.AddAreaSeries()
            .Name("15-64 years")
            .ValueField("y1564");
        series.AddAreaSeries()
            .Name("0-14 years")
            .ValueField("y014");
        series.AddAreaSeries()
            .Name("65 years and older")
            .ValueField("y65");
    })
    ...
    .Bind("jsondata/ChartTypes/area.json"))

Spline Area

This example shows the Spline Area series view. This view is similar to the Area chart but plots a fitted curve through each data point in a series.

@(Html.DevExpress()
    .BootstrapChart("chartSplineArea")
    .TitleText("Corporations with Highest Market Value")
    .SettingsCommonSeries(settings => settings
        .ArgumentField("company"))
    .SeriesCollection(series => {
        series.AddSplineAreaSeries()
            .Name("2005")
            .ValueField("y2005");
        series.AddSplineAreaSeries()
            .Name("2004")
            .ValueField("y2004");
    })
    ...
    .Bind("jsondata/ChartTypes/splinearea.json"))

Step Area

This demo illustrates the Step Area series view, which shows how much values have changed for different points of the same series.

@(Html.DevExpress()
    .BootstrapChart("chartStepArea")
    .TitleText("Australian Medal Count")
    .CustomPalette("#cd7f32, #b7b7b7, #ffd700")
    .SettingsCommonSeries(settings => settings
        .ArgumentField("year"))
    .SeriesCollection(series => {
        series.AddStepAreaSeries()
            .Name("Bronze Medal")
            .ValueField("bronze");
        series.AddStepAreaSeries()
            .Name("Silver Medals")
            .ValueField("silver");
        series.AddStepAreaSeries()
            .Name("Gold Medals")
            .ValueField("gold");
    })
    ...
    .Bind("jsondata/ChartTypes/steparea.json"))
Screen Size
Color Themes
Demo QR Code