DevExtreme jQuery/JS - 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 option.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... series: { // ... type: 'bar' } }); });
Angular
<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 option accepts an array of series objects. To enable a user to identify a series among others on the chart legend, specify its name.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... series: [{ // ... type: 'bar', name: 'Men' }, { // ... type: 'area', name: 'Women' }] }); });
Angular
<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 series using the following objects.
commonSeriesSettings.%seriesType% (line, bar, etc.)
Settings for all series of a specific type.commonSeriesSettings
Settings for all series in the Chart.
Note that individual settings override type-specific settings which, in turn, override common settings.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... series: { // high priority }, commonSeriesSettings: { bar: { // middle priority }, // low priority } }); });
Angular
<dx-chart ... > <dxi-series ... > <!-- high priority --> </dxi-series> <dxo-common-series-settings ... > <!-- low priority --> <dxo-bar> <!-- middle priority --> </dxo-bar> </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.