Chart Series in React Chart

25 Aug 202619 minutes to read

Multiple Series

Multiple series can be added to a chart by using the series property. Each series represents a distinct set of data, and all configured series are rendered in the same chart area for easy comparison.

The series are rendered in the same order in which they are defined in the series collection. This ordering controls the draw order of the series when they overlap; it does not, by itself, cause stacking. To stack series, use a stacking-compatible series type (for example, StackingColumn) and assign a common stackingGroup value to the related series. See the SeriesModel API for the full list of available series options such as xName, yName, dataSource, and type.

Note: When configuring multiple series, make sure to inject the corresponding modules (for example, ColumnSeries, LineSeries, Category) into the services array. The sample below uses the Category axis, so the Category module is required. For project setup, refer to the Getting Started documentation.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category', title: 'Countries' };
    const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Medals'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='country' yName='silver' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='country' yName='bronze' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
  const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };

    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Olympic Medals'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='country' yName='silver' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='country' yName='bronze' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];
export let data: Object[] = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];

Combination Series

A combination chart allows different series types, such as Column, Line, Spline, Area, and StackingColumn, to be rendered together in a single chart. This is useful for comparing multiple datasets that have different visual encodings on a shared set of category values.

For combined series to align properly, all series must share a common xName (and corresponding X values) on the primary X axis. When the series have different value ranges, consider using a Multiple Panes or a secondary Y axis.

Note: Bar series cannot be combined with other series types because Bar uses a transposed axis (isTransposed: true), which is incompatible with the standard axis orientation of the other series.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries, StackingColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { title: 'Years', interval: 1, labelIntersectAction: 'Rotate45', valueType: 'Category' };
    const primaryyAxis = { title: 'Growth', minimum: -3, maximum: 3, interval: 1 };
    const marker = { visible: true, width: 10, opacity: 0.6, height: 10 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Annual Growth GDP in France'>
      <Inject services={[StackingColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Private Consumption' type='StackingColumn'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y1' name='Government Consumption' type='StackingColumn'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y2' name='Investment' type='StackingColumn'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y3' name='Net Foreign Trade' type='StackingColumn'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y4' name='GDP' type='Line' opacity={0.6} marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, LineSeries, StackingColumnSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { title: 'Years', interval: 1, labelIntersectAction: 'Rotate45', valueType: 'Category' };
  const primaryyAxis: AxisModel = { title: 'Growth', minimum: -3, maximum: 3, interval: 1 };
  const marker = { visible: true, width: 10, opacity: 0.6, height: 10 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Annual Growth GDP in France'>
      <Inject services={[StackingColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Private Consumption'
          type='StackingColumn'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y1' name='Government Consumption'
          type='StackingColumn'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y2' name='Investment'
          type='StackingColumn'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y3' name='Net Foreign Trade'
          type='StackingColumn'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y4' name='GDP' type='Line' opacity={0.6}
          marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: '2005', y: 1.2,   y1: 0.5,  y2: 0.7,  y3: -0.8, y4: 1.5 },
    { x: '2006', y: 1,     y1: 0.5,  y2: 1.4,  y3: 0,    y4: 2.3 },
    { x: '2007', y: 1,     y1: 0.5,  y2: 1.5,  y3: -1,   y4: 2 },
    { x: '2008', y: 0.25,  y1: 0.35, y2: 0.35, y3: -.35, y4: 0.1 },
    { x: '2009', y: 0.1,   y1: 0.9,  y2: -2.7, y3: -0.3, y4: -2.7 },
    { x: '2010', y: 1,     y1: 0.5,  y2: 0.5,  y3: -0.5, y4: 1.8 },
    { x: '2011', y: 0.1,   y1: 0.25, y2: 0.25, y3: 0,    y4: 2 },
    { x: '2012', y: -0.25, y1: -0.5, y2: -0.1, y3: -0.4, y4: 0.4 },
    { x: '2013', y: 0.25,  y1: 0.5,  y2: -0.3, y3: 0,    y4: 0.9 },
    { x: '2014', y: 0.6,   y1: 0.6,  y2: -0.6, y3: -0.6, y4: 0.4 },
    { x: '2015', y: 0.9,   y1: 0.5,  y2: 0,    y3: -0.3, y4: 1.3 }
];
export let data: Object[] = [
    { x: '2005', y: 1.2,   y1: 0.5,  y2: 0.7,  y3: -0.8, y4: 1.5 },
    { x: '2006', y: 1,     y1: 0.5,  y2: 1.4,  y3: 0,    y4: 2.3 },
    { x: '2007', y: 1,     y1: 0.5,  y2: 1.5,  y3: -1,   y4: 2 },
    { x: '2008', y: 0.25,  y1: 0.35, y2: 0.35, y3: -.35, y4: 0.1 },
    { x: '2009', y: 0.1,   y1: 0.9,  y2: -2.7, y3: -0.3, y4: -2.7 },
    { x: '2010', y: 1,     y1: 0.5,  y2: 0.5,  y3: -0.5, y4: 1.8 },
    { x: '2011', y: 0.1,   y1: 0.25, y2: 0.25, y3: 0,    y4: 2 },
    { x: '2012', y: -0.25, y1: -0.5, y2: -0.1, y3: -0.4, y4: 0.4 },
    { x: '2013', y: 0.25,  y1: 0.5,  y2: -0.3, y3: 0,    y4: 0.9 },
    { x: '2014', y: 0.6,   y1: 0.6,  y2: -0.6, y3: -0.6, y4: 0.4 },
    { x: '2015', y: 0.9,   y1: 0.5,  y2: 0,    y3: -0.3, y4: 1.3 }
];

See also

  • Category Axis - Configure the X axis when sharing category values across series.
  • Markers - Customize the appearance of points on combined series.
  • Legend - Identify each series in a multi-series or combination chart.
  • Multiple Panes - Render series with different value ranges on separate axes.