Essential JS 2 Chart supports 32 types of series.
Line
To render a line series, use series type as Line and inject LineSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
class App extends React.Component<{}, {}> {
render() {
return <ChartComponent id='charts'>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Step Line
To render a step line series, use series type as StepLine and
inject StepLineSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StepLineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { steplineData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
render() {
return <ChartComponent id='charts'>
<Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={steplineData} xName='x' yName='y' width={2} name='India' type='StepLine'
marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Spline
To render a spline series, use series type as Spline and inject SplineSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, SplineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { splineData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };
public primaryyAxis: AxisModel = {
minimum: -5, maximum: 35, interval: 5,
title: 'Temperature in Celsius', labelFormat: '{value}C'
};
public marker = { visible: true, width: 10, height: 10 };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='CO2 - Intensity Analysis'>
<Inject services={[SplineSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineData} xName='x' yName='y' width={2} name='London' type='Spline'
marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Spline Area
To render a spline series, use series type as Spline and inject SplineAreaSeries
module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, SplineAreaSeries,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, SplineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { splineData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}>
<Inject services={[SplineAreaSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineData} xName='x' yName='y' width={2} name='London' type='SplineArea'
marker={{ visible: true, width: 10, height: 10 }}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Multicolored Line
To render a multicolored line series, use series type as Line and
inject LineSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, MultiColoredLineSeries, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
class App extends React.Component<{}, {}> {
public data: any[] = [{ x: 2005, y: 28, color: 'red' }, { x: 2006, y: 25, color: 'green' },
{ x: 2007, y: 26, color: '#ff0097' }, { x: 2008, y: 27, color: 'crimson' },
{ x: 2009, y: 32, color: 'blue' }, { x: 2010, y: 35, color: 'darkorange' }];
render() {
return <ChartComponent id='charts'>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category, MultiColoredLineSeries]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} xName='x' yName='y' width={2} name='India' type='MultiColoredLine'
pointColorMapping='color'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Customization of Line Charts
stroke, stroke-width and dashArray of all line type series can be customized by using fill,
width and dashArray properties.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
render() {
return <ChartComponent id='charts'>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' fill='green' width={3} dashArray='5,5'
name='India' type='Line'
marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Area
To render a area series, use series type as Area and inject AreaSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, AreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
class App extends React.Component<{}, {}> {
public data: any[] = [
{ x: 1900, y: 4 }, { x: 1920, y: 3.0 }, { x: 1940, y: 3.8 },
{ x: 1960, y: 3.4 }, { x: 1980, y: 3.2 }, { x: 2000, y: 3.9 }
];
public primaryxAxis: AxisModel = {
title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'};
public primaryyAxis: AxisModel = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Average Sales Comparison'>
<Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} xName='x' yName='y' name='Product A' fill='#69D2E7'
opacity={0.6} type='Area'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Stacked Area
To render a stacked area series, use series type as StackingArea
and inject StackingAreaSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, StackingAreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { stackedData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = {
title: 'Years', valueType: 'DateTime', intervalType: 'Years',
majorTickLines: { width: 0 }, labelFormat: 'y', edgeLabelPlacement: 'Shift'};
public primaryyAxis: AxisModel = {
title: 'Spend in Billions', minimum: 0, maximum: 7, interval: 1,
majorTickLines: { width: 0 }, labelFormat: '{value}B'};
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Trend in Sales of Ethical Produce'>
<Inject services={[StackingAreaSeries, Legend, Tooltip, DataLabel, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={stackedData} xName='x' yName='y' name='Organic' type='StackingArea'>
</SeriesDirective>
<SeriesDirective dataSource={stackedData} xName='x' yName='y1' name='Fair-trade' type='StackingArea'>
</SeriesDirective>
<SeriesDirective dataSource={stackedData} xName='x' yName='y2' name='Veg Alternatives' type='StackingArea'>
</SeriesDirective>
<SeriesDirective dataSource={stackedData} xName='x' yName='y3' name='Others' type='StackingArea'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));100% Stacked Area
To render a 100% stacked area series, use series type as
StackingArea100 and inject StackingAreaSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, StackingAreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { percentData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = {
title: 'Years', valueType: 'DateTime', intervalType: 'Years',
edgeLabelPlacement: 'Shift', labelFormat: 'y'};
public primaryyAxis: AxisModel = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Annual Temperature Comparison'>
<Inject services={[StackingAreaSeries, Legend, Tooltip, DataLabel, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={percentData} xName='x' yName='y' name='USA' type='StackingArea100'>
</SeriesDirective>
<SeriesDirective dataSource={percentData} xName='x' yName='y1' name='UK' type='StackingArea100'>
</SeriesDirective>
<SeriesDirective dataSource={percentData} xName='x' yName='y2' name='Canada Alternatives' type='StackingArea100'>
</SeriesDirective>
<SeriesDirective dataSource={percentData} xName='x' yName='y3' name='China' type='StackingArea100'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Step Area
To render a step area series, use series type as
StepArea and inject StepAreaSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, StepAreaSeries}
from'@syncfusion/ej2-react-charts';
import { stepAreaData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs' };
public primaryyAxis: AxisModel = { title: 'Runs' };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Annual Temperature Comparison'>
<Inject services={[StepAreaSeries, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={stepAreaData} xName='x' yName='y' name='England' type='StepArea'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Multicolored area
To render a multicolored area series, use the series type as MultiColoredArea, and inject
the MultiColoredAreaSeries module into the services. The required segments of the series can be customized
using the value, color, and dashArray.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, MultiColoredAreaSeries, SegmentsDirective,
Legend, StepAreaSeries, SegmentDirective }
from'@syncfusion/ej2-react-charts';
class App extends React.Component<{}, {}> {
public data: any[] = [{ x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 },
{ x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 25 }]
render() {
return <ChartComponent id='charts'>
<Inject services={[StepAreaSeries, Legend, MultiColoredAreaSeries]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} xName='x' yName='y' name='England' type='MultiColoredArea' segmentAxis='X' >
<SegmentsDirective>
<SegmentDirective value={2007} color='blue'></SegmentDirective>
<SegmentDirective value={2009} color='green'></SegmentDirective>
<SegmentDirective color='orange'></SegmentDirective>
</SegmentsDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Customization of Area Charts
fill, border and dashArray of all area type series can be customized
using fill,
border
and dashArray properties.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, AreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { areaData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = {
title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'
};
public primaryyAxis: AxisModel = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
public border = { color: 'red', width: 2 };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Average Sales Comparison'>
<Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={areaData} xName='x' yName='y' name='Product A'
fill='green' width={2} dashArray='5,5' border={this.border}
opacity={0.6} type='Area'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Column
To render a column series, use series type as Column and inject ColumnSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, ColumnSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { columnData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
public primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Stacked Column
To render a stacked column series, use series type as
StackingColumn and injectStackingColumnSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingColumnSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { stackColumndata } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' };
public primaryyAxis: AxisModel = {
title: 'Sales in Billions', minimum: 0, maximum: 700, interval: 100,
labelFormat: '{value}B'
};
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Mobile Game Market by Country'>
<Inject services={[StackingColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={stackColumndata} xName='x' yName='y' name='UK' type='StackingColumn'>
</SeriesDirective>
<SeriesDirective dataSource={stackColumndata} xName='x' yName='y1' name='Germany' type='StackingColumn'>
</SeriesDirective>
<SeriesDirective dataSource={stackColumndata} xName='x' yName='y2' name='France' type='StackingColumn'>
</SeriesDirective>
<SeriesDirective dataSource={stackColumndata} xName='x' yName='y3' name='Italy' type='StackingColumn'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));100% Stacked Column
To render a 100% stacked column series, use series type as
StackingColumn100 and inject StackingColumnSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingColumnSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { columnperData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' };
public primaryyAxis: AxisModel = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Gross Domestic Product Growth'>
<Inject services={[StackingColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnperData} xName='x' yName='y' name='UK' type='StackingColumn100'>
</SeriesDirective>
<SeriesDirective dataSource={columnperData} xName='x' yName='y1' name='Germany' type='StackingColumn100'>
</SeriesDirective>
<SeriesDirective dataSource={columnperData} xName='x' yName='y2' name='France' type='StackingColumn100'>
</SeriesDirective>
<SeriesDirective dataSource={columnperData} xName='x' yName='y3' name='Italy' type='StackingColumn100'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Range Column
To render a range column series, use series type as RangeColumn
and inject RangeColumnSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, RangeColumnSeries, Selection}
from'@syncfusion/ej2-react-charts';
class App extends React.Component<{},{}> {
public data: any[] = [
{ x: 'Jan', low: 0.7, high: 6.1 }, { x: 'Feb', low: 1.3, high: 6.3 }, { x: 'Mar', low: 1.9, high: 8.5 },
{ x: 'Apr', low: 3.1, high: 10.8 }, { x: 'May', low: 5.7, high: 14.40 }, { x: 'Jun', low: 8.4, high: 16.90 },
{ x: 'Jul', low: 10.6,high: 19.20 }, { x: 'Aug', low: 10.5,high: 18.9 }, { x: 'Sep', low: 8.5, high: 16.1 },
{ x: 'Oct', low: 6.0, high: 12.5 }, { x: 'Nov', low: 1.5, high: 6.9 }, { x: 'Dec', low: 5.1, high: 12.1 }
];
public data1: any[]= [
{ x: 'Jan', low: 1.7, high: 7.1 }, { x: 'Feb', low: 1.9, high: 7.7 }, { x: 'Mar', low: 1.2, high: 7.5 },
{ x: 'Apr', low: 2.5, high: 9.8 }, { x: 'May', low: 4.7, high: 11.4 }, { x: 'Jun', low: 6.4, high: 14.4 },
{ x: 'Jul', low: 9.6, high: 17.2 }, { x: 'Aug', low: 10.7, high: 17.9 }, { x: 'Sep', low: 7.5, high: 15.1 },
{ x: 'Oct', low: 3.0, high: 10.5 }, { x: 'Nov', low: 1.2, high: 7.9 }, { x: 'Dec', low: 4.1, high: 9.1 }
];
public primaryxAxis: AxisModel= {valueType: 'Category', title: 'month'} ;
public primaryyAxis: AxisModel= { title: 'Temperature(Celsius)'} ;
render(){
return <ChartComponent id='charts'
primaryXAxis={ this.primaryxAxis }
primaryYAxis={ this.primaryyAxis }
title='Maximum and minimum Temperature'>
<Inject services={[RangeColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource ={this.data} xName='x' low='low' high='high' type='RangeColumn'>
</SeriesDirective>
<SeriesDirective dataSource ={this.data1} xName='x' low='low' high='high' type='RangeColumn'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Customization of Column
fill and border of all column type series can be
customized using fill and border
properties.
For customizing a specify point, please refer the
pointRender.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, ColumnSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { columnData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
public primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
public border = { color: 'green', width: 2 };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' name='Gold' type='Column'
fill='red' border={this.border}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Stacking Group
You can use the stackingGroup property to group the stacked columns and 100% stacked columns.
Columns with same group name are stacked on top of each other.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingColumnSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { stackColumndata } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' };
public primaryyAxis: AxisModel = {
title: 'Sales in Billions', minimum: 0, maximum: 700, interval: 100,
labelFormat: '{value}B'
};
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Mobile Game Market by Country'>
<Inject services={[StackingColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={stackColumndata} xName='x' yName='y' name='UK' type='StackingColumn'
stackingGroup='a'>
</SeriesDirective>
<SeriesDirective dataSource={stackColumndata} xName='x' yName='y1' name='Germany' type='StackingColumn'
stackingGroup='a'>
</SeriesDirective>
<SeriesDirective dataSource={stackColumndata} xName='x' yName='y2' name='France' type='StackingColumn'
stackingGroup='b'>
</SeriesDirective>
<SeriesDirective dataSource={stackColumndata} xName='x' yName='y3' name='Italy' type='StackingColumn'
stackingGroup='b'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Bar
To render a bar series, use series type as Bar and inject BarSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, BarSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
public primaryyAxis: AxisModel = {
minimum: 3, maximum: 12, interval: 1, title: 'Percentage',
labelFormat: '{value}%'
};
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Unemployment rate (%)'>
<Inject services={[BarSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' name='India' type='Bar'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Stacked bar
To render a stacked bar series, use series type as StackingBar and inject StackingBarSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { stackBarData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' };
public primaryyAxis: AxisModel = {
title: 'Percentage (%)', minimum: -20, maximum: 100,
edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
};
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Sales Comparison'>
<Inject services={[StackingBarSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y' name='Apple' type='StackingBar'>
</SeriesDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y1' name='orange' type='StackingBar'>
</SeriesDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y2' name='Wastage' type='StackingBar'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));100% Stacked Bar
To render a 100% stacked bar series, use series type as StackingBar100 and inject StackingBarSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { stackBarData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' };
public primaryyAxis: AxisModel = {
title: 'Percentage (%)', minimum: -20, maximum: 100,
edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
};
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Sales Comparison'>
<Inject services={[StackingBarSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y' name='Apple' type='StackingBar100'>
</SeriesDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y1' name='orange' type='StackingBar100'>
</SeriesDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y2' name='Wastage' type='StackingBar100'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Customization of Bar Series
fill and border of all bar type series can be
customized using fill and border.
For customizing a specify point, please refer the
pointRender.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, BarSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { customData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
public primaryyAxis: AxisModel = {
minimum: 3, maximum: 12, interval: 1, title: 'Percentage',
labelFormat: '{value}%'
};
public border = { color: 'green', width: 2 };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Unemployment rate (%)'>
<Inject services={[BarSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={customData} xName='x' yName='y' name='India' type='Bar'
fill='red' border={this.border}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Stacking Group
You can use the stackingGroup property to group the stacked bar and 100% stacked bar.
Columns with same group name are stacked on top of each other.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { groupData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { title: 'Year', minimum: 2006, maximum: 2015, interval: 1 };
public primaryyAxis: AxisModel = { title: 'Sales Percentage(%)' };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Sales by year'>
<Inject services={[StackingBarSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={groupData} xName='x' yName='y' name='John' type='StackingBar'
stackingGroup='JohnandAndrew'>
</SeriesDirective>
<SeriesDirective dataSource={groupData} xName='x' yName='y1' name='Andrew' type='StackingBar'
stackingGroup='JohnandAndrew'>
</SeriesDirective>
<SeriesDirective dataSource={groupData} xName='x' yName='y2' name='Thomas' type='StackingBar'
stackingGroup='ThomasandMichael'>
</SeriesDirective>
<SeriesDirective dataSource={groupData} xName='x' yName='y3' name='Michael' type='StackingBar'
stackingGroup='ThomasandMichael'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));To render a scatter series, use series type as Scatter and inject ScatterSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, ScatterSeries, Marker}
from'@syncfusion/ej2-react-charts';
import { scatterData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = {
title: 'Height (cm)', minimum: 130, maximum: 180,
edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
};
public primaryyAxis: AxisModel = {
title: 'Weight (kg)', minimum: 30, maximum: 100,
labelFormat: '{value}kg', rangePadding: 'None'
};
public marker = { width: 15, height: 15 };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Height Vs Weight'>
<Inject services={[ScatterSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={scatterData} xName='height' yName='male' name='Male' type='Scatter'
marker={this.marker}>
</SeriesDirective>
<SeriesDirective dataSource={scatterData} xName='height' yName='female' name='Female' type='Scatter'
marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));To render a bubble series, use series type as Bubble and inject BubbleSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
BubbleSeries}
from'@syncfusion/ej2-react-charts';
class App extends React.Component<{},{}> {
public data: any[] = [
{ x: 92.2, y: 7.8, size: 1.347, text: 'China' },
{ x: 74, y: 6.5, size: 1.241, text: 'India' },
{ x: 90.4, y: 6.0, size: 0.238, text: 'Indonesia' },
{ x: 99.4, y: 2.2, size: 0.312, text: 'US' },
{ x: 88.6, y: 1.3, size: 0.197, text: 'Brazil' },
{ x: 99, y: 0.7, size: 0.0818, text: 'Germany' },
{ x: 72, y: 2.0, size: 0.0826, text: 'Egypt' },
{ x: 99.6, y: 3.4, size: 0.143, text: 'Russia' },
{ x: 99, y: 0.2, size: 0.128, text: 'Japan' },
{ x: 86.1, y: 4.0, size: 0.115, text: 'Mexico' },
{ x: 92.6, y: 6.6, size: 0.096, text: 'Philippines' },
{ x: 61.3, y: 14.5, size: 0.162, text: 'Nigeria' }
];
public primaryxAxis: AxisModel= { title: 'Literacy Rate', minimum: 60, maximum: 100, interval: 5 } ;
public primaryyAxis: AxisModel= { title: 'GDP growth rate', minimum: -2, maximum: 16, interval: 2 } ;
render(){
return <ChartComponent id='charts'
primaryXAxis={ this.primaryxAxis }
primaryYAxis={ this.primaryyAxis }
title='GDP vs Literacy Rate'>
<Inject services={[BubbleSeries]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource ={this.data} xName='x' yName='y' size='size' type='Bubble' name='pound'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Bubble Size Mapping
size property can be used to map the size value specified in data source.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
BubbleSeries}
from'@syncfusion/ej2-react-charts';
import { bubbleData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
render() {
return <ChartComponent id='charts'>
<Inject services={[BubbleSeries]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={bubbleData} xName='x' yName='y' size='size' type='Bubble'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));