Standard Bar
This example illustrates the ease with which you can create a bar chart.
<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>
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.
<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.
<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
<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
<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
<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>