Standard Bar

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

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/days.json" TitleSettings-Text="Standard Bar">
    <SettingsCommonSeries ArgumentField="day" />
    <SeriesCollection>
        <dx:BootstrapChartBarSeries ValueField="oranges" Name="oranges" />
    </SeriesCollection>
    <ArgumentAxis DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
    <SettingsLegend Visible="false" />
    <CssClasses Control="demo-chart" />
</dx:BootstrapChart>

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.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/sidebysidebar.json" TitleSettings-Text="Gross State Product within the Great Lakes Region">
    <SettingsCommonSeries ArgumentField="state">
        <Label Visible="true">
            <Format Type="fixedPoint" Precision="0" />
        </Label>
    </SettingsCommonSeries>
    <SeriesCollection>
        <dx:BootstrapChartBarSeries ValueField="year2004" Name="2004" />
        <dx:BootstrapChartBarSeries ValueField="year2001" Name="2001" />
        <dx:BootstrapChartBarSeries ValueField="year1998" Name="1998" />
    </SeriesCollection>
    <ArgumentAxis DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
    <SettingsLegend VerticalAlignment="Bottom" HorizontalAlignment="Center" ItemTextPosition="Top" />
    <CssClasses Control="demo-chart" />
</dx:BootstrapChart>

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.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapChart ID="ChartStackedBar" runat="server" DataSourceUrl="~/jsondata/ChartTypes/stackedbar.json" TitleSettings-Text="Male Age Structure">
    <SettingsCommonSeries ArgumentField="state" />
    <SeriesCollection>
        <dx:BootstrapChartStackedBarSeries ValueField="young" Name="0-14" />
        <dx:BootstrapChartStackedBarSeries ValueField="middle" Name="15-64" />
        <dx:BootstrapChartStackedBarSeries ValueField="older" Name="65 and older" />
    </SeriesCollection>
    <ArgumentAxis DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
    <SettingsLegend VerticalAlignment="Bottom" HorizontalAlignment="Center" ItemTextPosition="Top" />
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis TitleSettings-Text="millions" Position="Right" />
    </ValueAxisCollection>
    <CssClasses Control="demo-chart" />
</dx:BootstrapChart>

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%.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapChart ID="ChartFullStackedBar" runat="server" DataSourceUrl="~/jsondata/ChartTypes/fullstackedbar.json" TitleSettings-Text="Energy Consumption in 2004">
    <ArgumentAxis DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
    <SettingsCommonSeries ArgumentField="country" />
    <SeriesCollection>
        <dx:BootstrapChartFullStackedBarSeries ValueField="hydro" Name="Hydro-electric" />
        <dx:BootstrapChartFullStackedBarSeries ValueField="oil" Name="Oil" />
        <dx:BootstrapChartFullStackedBarSeries ValueField="gas" Name="Natural gas" />
        <dx:BootstrapChartFullStackedBarSeries ValueField="coal" Name="Coal" />
        <dx:BootstrapChartFullStackedBarSeries ValueField="nuclear" Name="Nuclear" />
    </SeriesCollection>
    <SettingsLegend VerticalAlignment="Top" HorizontalAlignment="Center" ItemTextPosition="Right" />
    <CssClasses Control="demo-chart" />
</dx:BootstrapChart>

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.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/sidebysidestackedbar.json" TitleSettings-Text="Population: Age Structure">
    <SettingsCommonSeries ArgumentField="state" />
    <SeriesCollection>
        <dx:BootstrapChartStackedBarSeries ValueField="maleyoung" Name="Male: 0-14" Stack="male" />
        <dx:BootstrapChartStackedBarSeries ValueField="malemiddle" Name="Male: 15-64" Stack="male" />
        <dx:BootstrapChartStackedBarSeries ValueField="maleolder" Name="Male: 65 and older" Stack="male" />
        <dx:BootstrapChartStackedBarSeries ValueField="femaleyoung" Name="Female: 0-14" Stack="female" />
        <dx:BootstrapChartStackedBarSeries ValueField="femalemiddle" Name="Female: 15-64" Stack="female" />
        <dx:BootstrapChartStackedBarSeries ValueField="femaleolder" Name="Female: 65 and older" Stack="female" />
    </SeriesCollection>
    <ArgumentAxis DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
    <SettingsLegend HorizontalAlignment="Right" Position="Inside" />
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis TitleSettings-Text="Populations, millions" />
    </ValueAxisCollection>
    <CssClasses Control="demo-chart" />
</dx:BootstrapChart>

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.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/sidebysidestackedbar.json" TitleSettings-Text="Population: Age Structure">
    <SettingsCommonSeries ArgumentField="state" />
    <SeriesCollection>
        <dx:BootstrapChartFullStackedBarSeries ValueField="maleyoung" Name="Male: 0-14" Stack="male" />
        <dx:BootstrapChartFullStackedBarSeries ValueField="malemiddle" Name="Male: 15-64" Stack="male" />
        <dx:BootstrapChartFullStackedBarSeries ValueField="maleolder" Name="Male: 65 and older" Stack="male" />
        <dx:BootstrapChartFullStackedBarSeries ValueField="femaleyoung" Name="Female: 0-14" Stack="female" />
        <dx:BootstrapChartFullStackedBarSeries ValueField="femalemiddle" Name="Female: 15-64" Stack="female" />
        <dx:BootstrapChartFullStackedBarSeries ValueField="femaleolder" Name="Female: 65 and older" Stack="female" />
    </SeriesCollection>
    <ArgumentAxis DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
    <SettingsLegend HorizontalAlignment="Center" VerticalAlignment="Bottom" ItemTextPosition="Bottom" />
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis TitleSettings-Text="Populations, millions" />
    </ValueAxisCollection>
    <CssClasses Control="demo-chart" />
</dx:BootstrapChart>
Screen Size
Color Themes
Demo QR Code