Standard Bar

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

Standard Bar
Standard BarStandard Bar024681012MondayTuesdayWednesdayThursdayFridaySaturdaySunday
<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.

Gross State Product within the Great Lakes Region
Gross State Product within the Great Lakes RegionGross State Product within the Great LakesRegionGross State Product within the Great Lakes Region0100200300400500600IllinoisIndianaMichiganOhioWisconsin529227373418212477196336375182424179309349160200420011998
<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.

Male Age Structure
Male Age StructureMale Age Structuremillions0255075100125150GermanyJapanRussiaUSA0-1415-6465 and older
<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%.

Energy Consumption in 2004
Energy Consumption in 2004Energy Consumption in 20040%20%40%60%80%100%USAChinaRussiaJapanIndiaGermanyHydro-electricOilNatural gasCoalNuclear
<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.

Population: Age Structure
Population: Age StructurePopulation: Age StructurePopulations, millions020406080100120140USABrazilRussiaJapanMexicoGermanyUnitedKindomMale: 0-14Male: 15-64Male: 65 and olderFemale: 0-14Female: 15-64Female: 65 and older
<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.

Population: Age Structure
Population: Age StructurePopulation: Age StructurePopulations, millions0%20%40%60%80%100%USABrazilRussiaJapanMexicoGermanyUnitedKindomMale: 0-14Male: 15-64Male: 65 and olderFemale: 0-14Female: 15-64Female: 65 and older
<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
Client-Side API