All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - 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