Vue Chart - Overview

A series is a collection of related data points.

DevExtreme HTML5 JavaScript Charts Series

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.

HTML
TypeScript
  • <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.

HTML
TypeScript
  • <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.

HTML
TypeScript
  • <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