Vue Chart - Overview
A series is a collection of related data points.
The most important characteristic of a series is its type. The Chart provides over 20 series types, and all of them are described in the Series Types article. You can specify the type of a series using its type property.
- <dx-chart ... >
- <dxi-series type="bar" ... ></dxi-series>
- </dx-chart>
- import { DxChartModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // ...
- }
- @NgModule({
- imports: [
- // ...
- DxChartModule
- ],
- // ...
- })
A single Chart can contain several series at once. In this case, the series property accepts an array of series objects. To enable a user to identify a series among others on the chart legend, specify its name.
- <dx-chart ... >
- <dxi-series type="bar" name="Men" ... ></dxi-series>
- <dxi-series type="area" name="Women" ... ></dxi-series>
- </dx-chart>
- import { DxChartModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // ...
- }
- @NgModule({
- imports: [
- // ...
- DxChartModule
- ],
- // ...
- })
Objects in the series array specify individual settings for series. You can also specify common settings for all chart series using the commonSeriesSettings object. Individual series settings override common settings.
- <dx-chart ... >
- <dxi-series ... >
- <!-- high priority -->
- </dxi-series>
- <dxo-common-series-settings ... >
- <!-- low priority -->
- </dxo-common-series-settings>
- </dx-chart>
- import { DxChartModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // ...
- }
- @NgModule({
- imports: [
- // ...
- DxChartModule
- ],
- // ...
- })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.