Chart series in React Chart component
20 Jan 202317 minutes to read
Multiple Series
You can add multiple series to the chart by using series property. The series are rendered in the order as it is added to the series array.
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';
function App() {
const 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 }
];
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';
function App() {
const data: any[] = [
{ 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 }
];
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"));Combination Series
Combination of different types like Line, column etc, can be rendered in a chart.
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';
function App() {
const 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 }
];
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';
function App() {
const data: any[] = [
{ 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 }
];
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"));Note: Bar series cannot be combined with any other series as the axis orientation is different from other series.