React Chart - 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 property.
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 ], // ... })
Vue
<template> <DxChart ... > <DxSeries type="bar"/> </DxChart> </template> <script> import DxChart, { DxSeries } from 'devextreme-vue/chart'; export default { components: { DxChart, DxSeries } } </script>
React
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
$(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 ], // ... })
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
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
$(function() { $("#chartContainer").dxChart({ // ... series: { // high priority }, commonSeriesSettings: { // low priority } }); });
Angular
<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
<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
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
If you have technical questions, please create a support ticket in the DevExpress Support Center.