HelpBot Assistant

How can I help you?

Chart series in React Chart component

3 Feb 202618 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 determines the visual stacking of series when multiple series overlap.

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 Line and Column, to be rendered together in a single chart. This is useful for comparing multiple datasets that have different visual representation requirements.

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 }
];

Note: Bar series cannot be combined with other series types because their axis orientation differs from other series.