DevExtreme Vue - 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
$(function () { $("#chartContainer").dxChart({ series: [{ type: "bar" }, { // ... }], commonSeriesSettings: { bar: { ... }, stackedbar: { ... }, fullstackedbar: { ... } } }); });
Angular
<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.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.