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

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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxSeries type="bar"/>
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxSeries
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    Series
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Series type="bar"/>
            </Chart>
        );
    }
}

export default App;

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.

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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxSeries
            ...
            type="bar"
            name="Men" />
        <DxSeries
            ...
            type="area"
            name="Women" />
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxSeries
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    Series
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Series
                    ...
                    type="bar"
                    name="Men" />
                <Series
                    ...
                    type="area"
                    name="Women" />
            </Chart>
        );
    }
}

export default App;

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.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        series: {
            // high priority
        },
        commonSeriesSettings: {
            // low priority
        }
    });
});
Angular
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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxSeries ... >
            <!-- high priority -->
        </DxSeries>
        <DxCommonSeriesSettings ... >
            <!-- low priority -->
        </DxCommonSeriesSettings>
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries,
    DxCommonSeriesSettings
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxSeries,
        DxCommonSeriesSettings
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    Series,
    CommonSeriesSettings
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Series ... >
                    <!-- high priority -->
                </Series>
                <CommonSeriesSettings ... >
                    <!-- low priority -->
                </CommonSeriesSettings>
            </Chart>
        );
    }
}

export default App;
See Also