Standard Bar

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

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/days.json" TitleText="Standard Bar">
    <SettingsCommonSeries ArgumentField="day" />
    <SeriesCollection>
        <dx:BootstrapChartBarSeries ValueField="oranges" Name="oranges" />
    </SeriesCollection>
    ...
</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.

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/sidebysidebar.json" TitleText="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>
    ...
</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" TitleText="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 ValueMarginsEnabled="false" DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
    ...
</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%.

<dx:BootstrapChart ID="ChartFullStackedBar" runat="server" DataSourceUrl="~/jsondata/ChartTypes/fullstackedbar.json" TitleText="Energy Consumption in 2004">
    <ArgumentAxis ValueMarginsEnabled="false" 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>
    ...
</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.

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/sidebysidestackedbar.json" TitleText="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>
    ...
</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.

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/sidebysidestackedbar.json" TitleText="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>
    ...
</dx:BootstrapChart>
Screen Size
Color Themes
Demo QR Code