DevExtreme React - 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 option.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        series: {
            // ...
            type: 'bar'
        }
    });
});
Angular
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 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
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        series: [{
            // ...
            type: 'bar',
            name: 'Men'
        }, {
            // ...
            type: 'area',
            name: 'Women'
        }]
    });
});
Angular
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 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
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        series: {
            // high priority
        },
        commonSeriesSettings: {
            bar: {
                // middle priority
            },
            // low priority
        }
    });
});
Angular
HTML
TypeScript
<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