Standard Bar

This example illustrates the ease with which you can create a bar chart.

@(Html.DevExpress()
    .BootstrapChart("chartStandardBar")
    .TitleText("Standard Bar")
    .SettingsCommonSeries(settings => settings
        .ArgumentField("day"))
    .SeriesCollection(series => series
        .AddBarSeries()
            .Name("oranges")
            .ValueField("oranges"))
    .ArgumentAxis(axis => axis
        .ValueMarginsEnabled(false)
        .DiscreteAxisDivisionMode(DiscreteAxisDivisionMode.CrossLabels)
        .GridVisible(true)
        .TickInterval(1))
     ...
    .Bind("jsondata/ChartTypes/days.json"))

Side-by-Side Bar

This example illustrates a Side-By-Side Bar series view, in which bars are positioned side-by-side to help compare values across different categories.

@(Html.DevExpress()
    .BootstrapChart("chartSideBySideBar")
    .TitleText("Gross State Product within the Great Lakes Region")
    .SettingsCommonSeries(settings => settings
        .ArgumentField("state")
        .Label(label => label
            .Visible(true)
            .Format(format => format
                .Type(DevExpress.AspNetCore.Bootstrap.FormatType.FixedPoint)
                .Precision(0))))
    .SeriesCollection(series => {
        series.AddBarSeries()
            .Name("2004")
            .ValueField("year2004");
        series.AddBarSeries()
            .Name("2001")
            .ValueField("year2004");
        series.AddBarSeries()
            .Name("1998")
            .ValueField("year1998");
    })
    .ArgumentAxis(axis => axis
        .ValueMarginsEnabled(false)
        .DiscreteAxisDivisionMode(DiscreteAxisDivisionMode.CrossLabels)
        .GridVisible(true)
        .TickInterval(1))
    ...
    .Bind("jsondata/ChartTypes/sidebysidebar.json"))

Stacked Bar

This example illustrates a Stacked Bar series view, which, unlike the side-by-side bar series, can present both the proportion and the total value of each data category using rectangular bars stacked on top of one another.

@(Html.DevExpress()
    .BootstrapChart("chartStackedBar")
    .TitleText("Male Age Structure")
    .SettingsCommonSeries(settings => settings
        .ArgumentField("state"))
    .SeriesCollection(series => {
        series.AddStackedBarSeries()
            .Name("0-14")
            .ValueField("young");
        series.AddStackedBarSeries()
            .Name("15-64")
            .ValueField("middle");
        series.AddStackedBarSeries()
            .Name("65 and older")
            .ValueField("older");
    })
    .ArgumentAxis(axis => axis
        .ValueMarginsEnabled(false)
        .DiscreteAxisDivisionMode(DiscreteAxisDivisionMode.CrossLabels)
        .GridVisible(true)
        .TickInterval(1))
    ...
    .Bind("jsondata/ChartTypes/stackedbar.json"))

Full Stacked Bar

This example illustrates a Full-Stacked Bar series view, which is useful to compare the percentage value of various bar series for each argument. The height of each bar always equals 100%.

@(Html.DevExpress()
    .BootstrapChart("chartFullStackedBar")
    .TitleText("Energy Consumption in 2004")
    .SettingsCommonSeries(settings => settings
        .ArgumentField("country"))
    .SeriesCollection(series => {
        series.AddFullStackedBarSeries()
            .Name("Hydro-electric")
            .ValueField("hydro");
        series.AddFullStackedBarSeries()
            .Name("Oil")
            .ValueField("oil");
        series.AddFullStackedBarSeries()
            .Name("Natural gas")
            .ValueField("gas");
        series.AddFullStackedBarSeries()
            .Name("Coal")
            .ValueField("coal");
        series.AddFullStackedBarSeries()
            .Name("Nuclear")
            .ValueField("nuclear");
    })
    .ArgumentAxis(axis => axis
        .ValueMarginsEnabled(false)
        .DiscreteAxisDivisionMode(DiscreteAxisDivisionMode.CrossLabels)
        .GridVisible(true)
        .TickInterval(1))
    ...
    .Bind("jsondata/ChartTypes/fullstackedbar.json"))

Side-by-Side Stacked Bar

This example shows the Side-by-Side Stacked Bar series view. This view allows you to stack series having the same Stacked property value into the same bars and combines the advantages of both the Side-by-Side Bar and Stacked Bar view types.

@(Html.DevExpress()
    .BootstrapChart("chartSideBySideStackedBar")
    .TitleText("Population: Age Structure")
    .SettingsCommonSeries(settings => settings
        .ArgumentField("state"))
    .SeriesCollection(series => {
        series.AddStackedBarSeries()
            .Name("Male: 0-14")
            .ValueField("maleyoung")
            .Stack("male");
        series.AddStackedBarSeries()
           .Name("Male: 15-64")
           .ValueField("malemiddle")
           .Stack("male");
        series.AddStackedBarSeries()
           .Name("Male: 65 and older")
           .ValueField("maleolder")
           .Stack("male");
        series.AddStackedBarSeries()
           .Name("Female: 0-14")
           .ValueField("femaleyoung")
           .Stack("female");
        series.AddStackedBarSeries()
           .Name("Female: 15-64")
           .ValueField("femalemiddle")
           .Stack("female");
        series.AddStackedBarSeries()
           .Name("Female: 65 and older")
           .ValueField("femaleolder")
           .Stack("female");
    })
    ...
    .Bind("jsondata/ChartTypes/sidebysidestackedbar.json"))

Side-by-Side Full-Stacked Bar

This example shows the Side-by-Side Full-Stacked Bar series view. This view allows you to stack series having the same Stacked property value into the same bars and combines the advantages of both the Side-by-Side Bar and Full-Stacked Bar view types.

@(Html.DevExpress()
    .BootstrapChart("chartSideBySideFullStackedBar")
    .TitleText("Population: Age Structure")
    .SettingsCommonSeries(settings => settings
        .ArgumentField("state"))
    .SeriesCollection(series => {
        series.AddFullStackedBarSeries()
            .Name("Male: 0-14")
            .ValueField("maleyoung")
            .Stack("male");
        series.AddFullStackedBarSeries()
           .Name("Male: 15-64")
           .ValueField("malemiddle")
           .Stack("male");
        series.AddFullStackedBarSeries()
           .Name("Male: 65 and older")
           .ValueField("maleolder")
           .Stack("male");
        series.AddFullStackedBarSeries()
           .Name("Female: 0-14")
           .ValueField("femaleyoung")
           .Stack("female");
        series.AddFullStackedBarSeries()
           .Name("Female: 15-64")
           .ValueField("femalemiddle")
           .Stack("female");
        series.AddFullStackedBarSeries()
           .Name("Female: 65 and older")
           .ValueField("femaleolder")
           .Stack("female");
    })
    ...
    .Bind("jsondata/ChartTypes/sidebysidestackedbar.json"))
Screen Size
Color Themes
Demo QR Code