DevExtreme Angular - Bar Series

Bar series visualize data as a collection of bars. Those bars can be displayed side by side, as in the Bar series type, or can be put in stacks, as in the Stacked Bar and Full-Stacked Bar series types.

To specify one or another series type, assign its name to the series[].type option. You can configure:

  • Each series individually using the series array;
  • All series in the Chart using the commonSeriesSettings object;
  • All series of a specific type using objects nested in commonSeriesSettings: bar, stackedbar, and fullstackedbar.
jQuery
JavaScript
$(function () {
    $("#chartContainer").dxChart({
        series: [{
            type: "bar"
        }, {
            // ...
        }],
        commonSeriesSettings: {
            bar: { ... },
            stackedbar: { ... },
            fullstackedbar: { ... }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxi-series type="bar"></dxi-series>
    <dxi-series ... ></dxi-series>
    ...
    <dxo-common-series-settings>
        <dxo-bar ... ></dxo-bar>
        <dxo-stackedbar ... ></dxo-stackedbar>
        <dxo-fullstackedbar ... ></dxo-fullstackedbar>
    </dxo-common-series-settings>
</dx-chart>
import { DxChartModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Refer to the BarSeries, StackedBarSeries, or FullStackedBarSeries section of the API Reference for a full list of options available to a specific series type. Most these options are self-explanatory, yet several of them are worth special mention.

  • barWidth
    Regulates the width of bars as a correlation between a bar and the empty space around it.
    Note that this option is not series-specific and thus, applies to all bars in a Chart.
  • minBarSize
    Specifies the minimum height of bars in a series; allows you to keep bars big enough for user interaction.
  • stack (for stacked series)
    Allows you to distribute bars of a single argument between several side-by-side stacks.

Bar Series Demos

See Also