Chart types in React Chart component
24 Mar 202324 minutes to read
Essential JS 2 Chart supports 32 types of series.
Line Charts
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, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
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>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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';
function App() {
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>
};
export default App;
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, StepLineSeries } from '@syncfusion/ej2-react-charts';
import { steplineData } from 'datasource.ts';
function App() {
const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
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={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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StepLineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { steplineData } from 'datasource.ts';
function App() {
const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
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={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Stacked Line
To render a stacked line series, use series type as StackingLine and inject StackingLineSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingLineSeries } from '@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';
function App() {
const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
return <ChartComponent id='charts' primaryXAxis={{ interval: 1, valueType: 'Category' }} primaryYAxis={{ title: 'Expense', minimum: 0, maximum: 400, interval: 100, labelFormat: '${value}' }}>
<Inject services={[StackingLineSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartData} xName='x' yName='y' name='John' width='2' type='StackingLine' marker={{ visible: true }} dashArray='5,1'>
</SeriesDirective>
<SeriesDirective dataSource={chartData} xName='x' yName='y1' name='Peter' width='2' type='StackingLine' marker={{ visible: true }} dashArray='5,1'>
</SeriesDirective>
<SeriesDirective dataSource={chartData} xName='x' yName='y2' name='Steve' width='2' type='StackingLine' marker={{ visible: true }} dashArray='5,1'>
</SeriesDirective>
<SeriesDirective dataSource={chartData} xName='x' yName='y3' name='Charle' width='2' type='StackingLine' marker={{ visible: true }} dashArray='5,1'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingLineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';
function App() {
const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
return <ChartComponent id='charts'
primaryXAxis={{ interval: 1, valueType: 'Category' }}
primaryYAxis={{ title: 'Expense', minimum: 0, maximum: 400, interval: 100, labelFormat: '${value}' }}>
<Inject services={[StackingLineSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartData} xName='x' yName='y' name='John' width='2' type='StackingLine' marker= {{visible: true}} dashArray='5,1'>
</SeriesDirective>
<SeriesDirective dataSource={chartData} xName='x' yName='y1' name='Peter' width='2' type='StackingLine' marker= {{visible: true}} dashArray='5,1'>
</SeriesDirective>
<SeriesDirective dataSource={chartData} xName='x' yName='y2' name='Steve' width='2' type='StackingLine' marker= {{visible: true}} dashArray='5,1'>
</SeriesDirective>
<SeriesDirective dataSource={chartData} xName='x' yName='y3' name='Charle' width='2' type='StackingLine' marker= {{visible: true}} dashArray='5,1'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));100% Stacked Line
To render a 100% stacked line series, use series type as StackingLine100 and inject StackingLineSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingLineSeries } from '@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';
function App() {
const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
return <ChartComponent id='charts' primaryXAxis={{ interval: 1, valueType: 'Category' }} primaryYAxis={{ title: 'Expense', interval: 20 }} title='Family Expense for Month'>
<Inject services={[StackingLineSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartData} xName='x' yName='y' name='John' width='2' type='StackingLine100' marker={{ visible: true }} dashArray='5,1'>
</SeriesDirective>
<SeriesDirective dataSource={chartData} xName='x' yName='y1' name='Peter' width='2' type='StackingLine100' marker={{ visible: true }} dashArray='5,1'>
</SeriesDirective>
<SeriesDirective dataSource={chartData} xName='x' yName='y2' name='Steve' width='2' type='StackingLine100' marker={{ visible: true }} dashArray='5,1'>
</SeriesDirective>
<SeriesDirective dataSource={chartData} xName='x' yName='y3' name='Charle' width='2' type='StackingLine100' marker={{ visible: true }} dashArray='5,1'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingLineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';
function App() {
const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
return <ChartComponent id='charts'
primaryXAxis={{ interval: 1, valueType: 'Category' }}
primaryYAxis={{ title: 'Expense', interval: 20 }}
title='Family Expense for Month'>
<Inject services={[StackingLineSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartData} xName='x' yName='y' name='John' width='2' type='StackingLine100' marker= {{visible: true}} dashArray='5,1'>
</SeriesDirective>
<SeriesDirective dataSource={chartData} xName='x' yName='y1' name='Peter' width='2' type='StackingLine100' marker= {{visible: true}} dashArray='5,1'>
</SeriesDirective>
<SeriesDirective dataSource={chartData} xName='x' yName='y2' name='Steve' width='2' type='StackingLine100' marker= {{visible: true}} dashArray='5,1'>
</SeriesDirective>
<SeriesDirective dataSource={chartData} xName='x' yName='y3' name='Charle' width='2' type='StackingLine100' marker= {{visible: true}} dashArray='5,1'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, SplineSeries } from '@syncfusion/ej2-react-charts';
import { splineData } from 'datasource.ts';
function App() {
const primaryxAxis = { title: 'Month', valueType: 'Category' };
const primaryyAxis = {
minimum: -5, maximum: 35, interval: 5,
title: 'Temperature in Celsius', labelFormat: '{value}C'
};
const marker = { visible: true, width: 10, height: 10 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={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={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, Zoom, Crosshair, SplineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { splineData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };
const primaryyAxis: AxisModel = {
minimum: -5, maximum: 35, interval: 5,
title: 'Temperature in Celsius', labelFormat: '{value}C'
};
const marker = { visible: true, width: 10, height: 10 };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={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={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, SplineAreaSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { splineData } from 'datasource.ts';
function App() {
const primaryxAxis = { title: 'Month', valueType: 'Category' };
return <ChartComponent id='charts' primaryXAxis={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>;
}
;
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, SplineAreaSeries,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, SplineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { splineData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };
return <ChartComponent id='charts'
primaryXAxis={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>
};
export default App;
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, MultiColoredLineSeries, LineSeries } from '@syncfusion/ej2-react-charts';
function App() {
const data = [{ 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' }];
return <ChartComponent id='charts'>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category, MultiColoredLineSeries]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='MultiColoredLine' pointColorMapping='color'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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';
function App() {
const 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' }];
return <ChartComponent id='charts'>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category, MultiColoredLineSeries]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='MultiColoredLine'
pointColorMapping='color'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
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, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
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={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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
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={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Area 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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
function App() {
const data = [
{ 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 }
];
const primaryxAxis = {
title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'
};
const primaryyAxis = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison'>
<Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' name='Product A' fill='#69D2E7' opacity={0.6} type='Area'>
</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, Zoom, Crosshair, AreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
function App() {
const 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 }
];
const primaryxAxis: AxisModel = {
title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'};
const primaryyAxis: AxisModel = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Average Sales Comparison'>
<Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' name='Product A' fill='#69D2E7'
opacity={0.6} type='Area'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Spline Range Area
The Spline Range Area Chart is used to display continuous data points as a set of splines that vary between high and low values over intervals of time and across different categories.
To render a spline range area series, use series type as SplineRangeArea and inject SplineRangeAreaSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, SplineRangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { splineRangeData } from 'datasource.ts';
function App() {
const primaryxAxis = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis = {
labelFormat: '{value}ËšC',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' opacity={0.4} type='SplineRangeArea'>
</SeriesDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high1' low='low1' name='India' opacity={0.4} type='SplineRangeArea'>
</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, Category, SplineRangeAreaSeries} from'@syncfusion/ej2-react-charts';
import { splineRangeData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis: AxisModel = {
labelFormat: '{value}ËšC',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' opacity={0.4} type='SplineRangeArea'>
</SeriesDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high1' low='low1' name='India' opacity={0.4} type='SplineRangeArea'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StackingAreaSeries } from '@syncfusion/ej2-react-charts';
import { stackedData } from 'datasource.ts';
function App() {
const primaryxAxis = {
title: 'Years', valueType: 'DateTime', intervalType: 'Years',
majorTickLines: { width: 0 }, labelFormat: 'y', edgeLabelPlacement: 'Shift'
};
const primaryyAxis = {
title: 'Spend in Billions', minimum: 0, maximum: 7, interval: 1,
majorTickLines: { width: 0 }, labelFormat: '{value}B'
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={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>;
}
;
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, DateTime, Tooltip, DataLabel, Zoom, Crosshair, StackingAreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { stackedData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = {
title: 'Years', valueType: 'DateTime', intervalType: 'Years',
majorTickLines: { width: 0 }, labelFormat: 'y', edgeLabelPlacement: 'Shift'};
const primaryyAxis: AxisModel = {
title: 'Spend in Billions', minimum: 0, maximum: 7, interval: 1,
majorTickLines: { width: 0 }, labelFormat: '{value}B'};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={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>
};
export default App;
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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StackingAreaSeries } from '@syncfusion/ej2-react-charts';
import { percentData } from 'datasource.ts';
function App() {
const primaryxAxis = {
title: 'Years', valueType: 'DateTime', intervalType: 'Years',
edgeLabelPlacement: 'Shift', labelFormat: 'y'
};
const primaryyAxis = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={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>;
}
;
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, DateTime, Tooltip, DataLabel, Zoom, Crosshair, StackingAreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { percentData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = {
title: 'Years', valueType: 'DateTime', intervalType: 'Years',
edgeLabelPlacement: 'Shift', labelFormat: 'y'};
const primaryyAxis: AxisModel = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={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>
};
export default App;
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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, StepAreaSeries } from '@syncfusion/ej2-react-charts';
import { stepAreaData } from 'datasource.ts';
function App() {
const primaryxAxis = { valueType: 'Double', title: 'Overs' };
const primaryyAxis = { title: 'Runs' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Annual Temperature Comparison'>
<Inject services={[StepAreaSeries, Legend]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={stepAreaData} xName='x' yName='y' name='England' type='StepArea'>
</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, StepAreaSeries}
from'@syncfusion/ej2-react-charts';
import { stepAreaData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs' };
const primaryyAxis: AxisModel = { title: 'Runs' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Annual Temperature Comparison'>
<Inject services={[StepAreaSeries, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={stepAreaData} xName='x' yName='y' name='England' type='StepArea'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Stacked Step Area
To render a stacked step area series, use series type as StackingStepArea and inject StackingStepAreaSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, StackingStepAreaSeries } from '@syncfusion/ej2-react-charts';
function App() {
const data1 = [
{ x: 2000, y: 416 }, { x: 2001, y: 490 }, { x: 2002, y: 470 }, { x: 2003, y: 500 },
{ x: 2004, y: 449 }, { x: 2005, y: 470 }, { x: 2006, y: 437 }, { x: 2007, y: 458 },
{ x: 2008, y: 500 }, { x: 2009, y: 473 }, { x: 2010, y: 520 }, { x: 2011, y: 509 }
];
const data2 = [
{ x: 2000, y: 180 }, { x: 2001, y: 240 }, { x: 2002, y: 370 }, { x: 2003, y: 200 },
{ x: 2004, y: 229 }, { x: 2005, y: 210 }, { x: 2006, y: 337 }, { x: 2007, y: 258 },
{ x: 2008, y: 300 }, { x: 2009, y: 173 }, { x: 2010, y: 220 }, { x: 2011, y: 309 }
];
return <ChartComponent id='charts'>
<Inject services={[StackingStepAreaSeries, Legend]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' type='StackingStepArea'>
</SeriesDirective>
<SeriesDirective dataSource={data2} xName='x' yName='y' type='StackingStepArea'>
</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, StackingStepAreaSeries}
from'@syncfusion/ej2-react-charts';
function App() {
const data1: object [] = [
{ x: 2000, y: 416 }, { x: 2001, y: 490 }, { x: 2002, y: 470 }, { x: 2003, y: 500 },
{ x: 2004, y: 449 }, { x: 2005, y: 470 }, { x: 2006, y: 437 }, { x: 2007, y: 458 },
{ x: 2008, y: 500 }, { x: 2009, y: 473 }, { x: 2010, y: 520 }, { x: 2011, y: 509 }
];
const data2: object [] = [
{ x: 2000, y: 180 }, { x: 2001, y: 240 }, { x: 2002, y: 370 }, { x: 2003, y: 200 },
{ x: 2004, y: 229 }, { x: 2005, y: 210 }, { x: 2006, y: 337 }, { x: 2007, y: 258 },
{ x: 2008, y: 300 }, { x: 2009, y: 173 }, { x: 2010, y: 220 }, { x: 2011, y: 309 }
];
return <ChartComponent id='charts'>
<Inject services={[StackingStepAreaSeries, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' type='StackingStepArea'>
</SeriesDirective>
<SeriesDirective dataSource={data2} xName='x' yName='y' type='StackingStepArea'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Range Step Area
To render the range step area series, use the series type as a RangeStepArea and inject the RangeStepAreaSeries module using the Chart.Inject(RangeStepAreaSeries) method.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, RangeStepAreaSeries } from '@syncfusion/ej2-react-charts';
import { splineRangeData } from 'datasource.ts';
function App() {
const primaryxAxis = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis = {
labelFormat: '{value}ËšC',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Monthly Temperature Range'>
<Inject services={[RangeStepAreaSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' opacity={0.4} type='RangeStepArea'>
</SeriesDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high1' low='low1' name='India' opacity={0.4} type='RangeStepArea'>
</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, Category, SplineRangeAreaSeries} from'@syncfusion/ej2-react-charts';
import { splineRangeData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
const primaryyAxis: AxisModel = {
labelFormat: '{value}ËšC',
lineStyle: { width: 0 },
minimum: 0, maximum: 40,
majorTickLines: { width: 0 }
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Monthly Temperature Range'>
<Inject services={[SplineRangeAreaSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high' low='low' name='England' opacity={0.4} type='SplineRangeArea'>
</SeriesDirective>
<SeriesDirective dataSource={splineRangeData} xName='x' high='high1' low='low1' name='India' opacity={0.4} type='SplineRangeArea'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
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';
function App() {
const data = [{ 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 }];
return <ChartComponent id='charts'>
<Inject services={[StepAreaSeries, Legend, MultiColoredAreaSeries]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={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>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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';
function App() {
const 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 }]
return <ChartComponent id='charts'>
<Inject services={[StepAreaSeries, Legend, MultiColoredAreaSeries]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={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>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Customization of the series
fill and dashArray of all area type series can be customized using fill and dashArray properties.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
import { areaData } from 'datasource.ts';
function App() {
const primaryxAxis = {
title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'
};
const primaryyAxis = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
const border = { color: 'red', width: 2 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={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={border} opacity={0.6} type='Area'>
</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, Zoom, Crosshair, AreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { areaData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = {
title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'
};
const primaryyAxis: AxisModel = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
const border = { color: 'red', width: 2 };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={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={border}
opacity={0.6} type='Area'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Customization of the border
The width and fill properties in the border can be used to customize the border of all area type series.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
import { areaData } from 'datasource.ts';
function App() {
const primaryxAxis = {
title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'
};
primaryyAxis: AxisModel = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
border = { 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' width={2} border={this.border} opacity={0.5} type='Area'>
</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, Zoom, Crosshair, AreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { areaData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = {
title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'
};
const primaryyAxis: AxisModel = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
const border = { width: 2 };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Average Sales Comparison'>
<Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={areaData} xName='x' yName='y' name='Product A'
width={2} border={border}
opacity={0.5} type='Area'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Column 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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { columnData } from 'datasource.ts';
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, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' name='Gold' 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, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, ColumnSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { columnData } from 'datasource.ts';
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, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingColumnSeries } from '@syncfusion/ej2-react-charts';
import { stackColumndata } from 'datasource.ts';
function App() {
const primaryxAxis = { title: 'Years', interval: 1, valueType: 'Category' };
const primaryyAxis = {
title: 'Sales in Billions', minimum: 0, maximum: 700, interval: 100,
labelFormat: '{value}B'
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={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>;
}
;
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, Zoom, Crosshair, StackingColumnSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { stackColumndata } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' };
const primaryyAxis: AxisModel = {
title: 'Sales in Billions', minimum: 0, maximum: 700, interval: 100,
labelFormat: '{value}B'
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={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>
};
export default App;
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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingColumnSeries } from '@syncfusion/ej2-react-charts';
import { columnperData } from 'datasource.ts';
function App() {
const primaryxAxis = { title: 'Years', interval: 1, valueType: 'Category' };
const primaryyAxis = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={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>;
}
;
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, Zoom, Crosshair, StackingColumnSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { columnperData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' };
const primaryyAxis: AxisModel = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={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>
};
export default App;
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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, RangeColumnSeries } from '@syncfusion/ej2-react-charts';
function App() {
const data = [
{ 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 }
];
const data1 = [
{ 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 }
];
const primaryxAxis = { valueType: 'Category', title: 'month' };
const primaryyAxis = { title: 'Temperature(Celsius)' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Maximum and minimum Temperature'>
<Inject services={[RangeColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' low='low' high='high' type='RangeColumn'>
</SeriesDirective>
<SeriesDirective dataSource={data1} xName='x' low='low' high='high' type='RangeColumn'>
</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, Zoom, Crosshair, RangeColumnSeries, Selection}
from'@syncfusion/ej2-react-charts';
function App() {
const 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 }
];
const 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 }
];
const primaryxAxis: AxisModel= {valueType: 'Category', title: 'month'} ;
const primaryyAxis: AxisModel= { title: 'Temperature(Celsius)'} ;
return <ChartComponent id='charts'
primaryXAxis={ primaryxAxis }
primaryYAxis={ primaryyAxis }
title='Maximum and minimum Temperature'>
<Inject services={[RangeColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource ={data} xName='x' low='low' high='high' type='RangeColumn'>
</SeriesDirective>
<SeriesDirective dataSource ={data1} xName='x' low='low' high='high' type='RangeColumn'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
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. Width of the column and space between each column can be customized using columnWidth and columnSpacing properties respectively. The columnWidthInPixel property allows to specify the column width in pixel unit. For customizing a specify point, please refer the pointRender.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { columnData } from 'datasource.ts';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const border = { color: 'green', width: 2 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={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={border} columnWidth={0.5} columnSpacing={0.7}>
</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, Zoom, Crosshair, ColumnSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { columnData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const border = { color: 'green', width: 2 };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={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={border} columnWidth={0.5} columnSpacing={0.7}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingColumnSeries } from '@syncfusion/ej2-react-charts';
import { stackColumndata } from 'datasource.ts';
function App() {
const primaryxAxis = { title: 'Years', interval: 1, valueType: 'Category' };
const primaryyAxis = {
title: 'Sales in Billions', minimum: 0, maximum: 700, interval: 100,
labelFormat: '{value}B'
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={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>;
}
;
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, Zoom, Crosshair, StackingColumnSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { stackColumndata } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' };
const primaryyAxis: AxisModel = {
title: 'Sales in Billions', minimum: 0, maximum: 700, interval: 100,
labelFormat: '{value}B'
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={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>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Grouped Column
You can use the groupName property to group the data points in the column type charts. Data points with same group name are grouped together.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, ColumnSeries, DataLabel } from '@syncfusion/ej2-react-charts';
const data1 = [
{ x: '2012', y: 104 },
{ x: '2016', y: 121 },
{ x: '2020', y: 113 },
];
const data2 = [
{ x: '2012', y: 46 },
{ x: '2016', y: 46 },
{ x: '2020', y: 39 },
];
const data3 = [
{ x: '2012', y: 65 },
{ x: '2016', y: 67 },
{ x: '2020', y: 65 },
];
const data4 = [
{ x: '2012', y: 29 },
{ x: '2016', y: 27 },
{ x: '2020', y: 22 },
];
const data5 = [
{ x: '2012', y: 91 },
{ x: '2016', y: 70 },
{ x: '2020', y: 88 },
];
const data6 = [
{ x: '2012', y: 38 },
{ x: '2016', y: 26 },
{ x: '2020', y: 38 },
];
function App() {
return (<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{
valueType: 'Category',
interval: 1,
majorGridLines: { width: 0 },
}} primaryYAxis={{
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
lineStyle: { width: 0 },
labelStyle: { color: 'transparent' },
}} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true }} title="Olympics Medal Tally">
<Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName="x" yName="y" name="USA Total" type="Column" groupName="USA" columnWidth={0.7} columnSpacing={0.1} marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}></SeriesDirective>
<SeriesDirective dataSource={data2} xName="x" yName="y" name="USA Gold" type="Column" groupName="USA" columnWidth={0.5} columnSpacing={0.1} marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}></SeriesDirective>
<SeriesDirective dataSource={data3} xName="x" yName="y" name="UK Total" type="Column" groupName="UK" columnWidth={0.7} columnSpacing={0.1} marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}></SeriesDirective>
<SeriesDirective dataSource={data4} xName="x" yName="y" name="UK Gold" type="Column" groupName="UK" columnWidth={0.5} columnSpacing={0.1} marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}></SeriesDirective>
<SeriesDirective dataSource={data5} xName="x" yName="y" name="China Total" type="Column" groupName="China" columnWidth={0.7} columnSpacing={0.1} marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}></SeriesDirective>
<SeriesDirective dataSource={data6} xName="x" yName="y" name="China Gold" type="Column" groupName="China" columnWidth={0.5} columnSpacing={0.1} marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import {
ChartComponent,
SeriesCollectionDirective,
SeriesDirective,
Inject,
Legend,
Category,
Tooltip,
ColumnSeries,
DataLabel }
from'@syncfusion/ej2-react-charts';
const data1 = [
{ x: '2012', y: 104 },
{ x: '2016', y: 121 },
{ x: '2020', y: 113 },
];
const data2 = [
{ x: '2012', y: 46 },
{ x: '2016', y: 46 },
{ x: '2020', y: 39 },
];
const data3 = [
{ x: '2012', y: 65 },
{ x: '2016', y: 67 },
{ x: '2020', y: 65 },
];
const data4 = [
{ x: '2012', y: 29 },
{ x: '2016', y: 27 },
{ x: '2020', y: 22 },
];
const data5 = [
{ x: '2012', y: 91 },
{ x: '2016', y: 70 },
{ x: '2020', y: 88 },
];
const data6 = [
{ x: '2012', y: 38 },
{ x: '2016', y: 26 },
{ x: '2020', y: 38 },
];
function App() {
return (
<ChartComponent
id="charts"
style={{ textAlign: 'center' }}
primaryXAxis={{
valueType: 'Category',
interval: 1,
majorGridLines: { width: 0 },
}}
primaryYAxis={{
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
lineStyle: { width: 0 },
labelStyle: { color: 'transparent' },
}}
chartArea={{ border: { width: 0 } }}
tooltip={{ enable: true }}
title="Olympics Medal Tally"
>
<Inject
services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]}
/>
<SeriesCollectionDirective>
<SeriesDirective
dataSource={data1}
xName="x"
yName="y"
name="USA Total"
type="Column"
groupName="USA"
columnWidth={0.7}
columnSpacing={0.1}
marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}
></SeriesDirective>
<SeriesDirective
dataSource={data2}
xName="x"
yName="y"
name="USA Gold"
type="Column"
groupName="USA"
columnWidth={0.5}
columnSpacing={0.1}
marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}
></SeriesDirective>
<SeriesDirective
dataSource={data3}
xName="x"
yName="y"
name="UK Total"
type="Column"
groupName="UK"
columnWidth={0.7}
columnSpacing={0.1}
marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}
></SeriesDirective>
<SeriesDirective
dataSource={data4}
xName="x"
yName="y"
name="UK Gold"
type="Column"
groupName="UK"
columnWidth={0.5}
columnSpacing={0.1}
marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}
></SeriesDirective>
<SeriesDirective
dataSource={data5}
xName="x"
yName="y"
name="China Total"
type="Column"
groupName="China"
columnWidth={0.7}
columnSpacing={0.1}
marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}
></SeriesDirective>
<SeriesDirective
dataSource={data6}
xName="x"
yName="y"
name="China Gold"
type="Column"
groupName="China"
columnWidth={0.5}
columnSpacing={0.1}
marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}
></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Bar Chart
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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, BarSeries } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis = {
minimum: 3, maximum: 12, interval: 1, title: 'Percentage',
labelFormat: '{value}%'
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={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>;
}
;
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, Zoom, Crosshair, BarSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis: AxisModel = {
minimum: 3, maximum: 12, interval: 1, title: 'Percentage',
labelFormat: '{value}%'
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={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>
};
export default App;
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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
import { stackBarData } from 'datasource.ts';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Months' };
const primaryyAxis = {
title: 'Percentage (%)', minimum: -20, maximum: 100,
edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={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>;
}
;
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, Zoom, Crosshair, StackingBarSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { stackBarData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' };
const primaryyAxis: AxisModel = {
title: 'Percentage (%)', minimum: -20, maximum: 100,
edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={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>
};
export default App;
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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
import { stackBarData } from 'datasource.ts';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Months' };
const primaryyAxis = {
title: 'Percentage (%)', minimum: -20, maximum: 100,
edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={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>;
}
;
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, Zoom, Crosshair, StackingBarSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { stackBarData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' };
const primaryyAxis: AxisModel = {
title: 'Percentage (%)', minimum: -20, maximum: 100,
edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={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>
};
export default App;
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. Width of the bar and space between each bar can be customized using columnWidth and columnSpacing properties respectively. The columnWidthInPixel property allows to specify the bar width in pixel unit. For customizing a specify point, please refer the pointRender.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, BarSeries } from '@syncfusion/ej2-react-charts';
import { customData } from 'datasource.ts';
function App() {
const primaryxAxis = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis = {
minimum: 3, maximum: 12, interval: 1, title: 'Percentage',
labelFormat: '{value}%'
};
const border = { color: 'green', width: 2 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment rate (%)'>
<Inject services={[BarSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={customData} xName='x' yName='y' name='India' type='Bar' columnWidth={0.5} columnSpacing={0.7} fill='red' border={border}>
</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, Zoom, Crosshair, BarSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { customData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis: AxisModel = {
minimum: 3, maximum: 12, interval: 1, title: 'Percentage',
labelFormat: '{value}%'
};
const border = { color: 'green', width: 2 };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Unemployment rate (%)'>
<Inject services={[BarSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={customData} xName='x' yName='y' name='India' type='Bar'
columnWidth={0.5}
columnSpacing={0.7} fill='red' border={border}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
import { groupData } from 'datasource.ts';
function App() {
const primaryxAxis = { title: 'Year', minimum: 2006, maximum: 2015, interval: 1 };
const primaryyAxis = { title: 'Sales Percentage(%)' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={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>;
}
;
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, Zoom, Crosshair, StackingBarSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { groupData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { title: 'Year', minimum: 2006, maximum: 2015, interval: 1 };
const primaryyAxis: AxisModel = { title: 'Sales Percentage(%)' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={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>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Grouped Bar
You can use the groupName property to group the data points in the Bar type charts. Data points with same group name are grouped together.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, BarSeries, DataLabel } from '@syncfusion/ej2-react-charts';
const data1 = [
{ x: '2012', y: 104 },
{ x: '2016', y: 121 },
{ x: '2020', y: 113 },
];
const data2 = [
{ x: '2012', y: 46 },
{ x: '2016', y: 46 },
{ x: '2020', y: 39 },
];
const data3 = [
{ x: '2012', y: 65 },
{ x: '2016', y: 67 },
{ x: '2020', y: 65 },
];
const data4 = [
{ x: '2012', y: 29 },
{ x: '2016', y: 27 },
{ x: '2020', y: 22 },
];
const data5 = [
{ x: '2012', y: 91 },
{ x: '2016', y: 70 },
{ x: '2020', y: 88 },
];
const data6 = [
{ x: '2012', y: 38 },
{ x: '2016', y: 26 },
{ x: '2020', y: 38 },
];
function App() {
return (<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{
valueType: 'Category',
interval: 1,
majorGridLines: { width: 0 },
}} primaryYAxis={{
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
lineStyle: { width: 0 },
labelStyle: { color: 'transparent' },
}} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true }} title="Olympics Medal Tally">
<Inject services={[BarSeries, Legend, Tooltip, Category, DataLabel]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName="x" yName="y" name="USA Total" type="Bar" groupName="USA" columnWidth={0.7} columnSpacing={0.1} marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}></SeriesDirective>
<SeriesDirective dataSource={data2} xName="x" yName="y" name="USA Gold" type="Bar" groupName="USA" columnWidth={0.5} columnSpacing={0.1} marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}></SeriesDirective>
<SeriesDirective dataSource={data3} xName="x" yName="y" name="UK Total" type="Bar" groupName="UK" columnWidth={0.7} columnSpacing={0.1} marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}></SeriesDirective>
<SeriesDirective dataSource={data4} xName="x" yName="y" name="UK Gold" type="Bar" groupName="UK" columnWidth={0.5} columnSpacing={0.1} marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}></SeriesDirective>
<SeriesDirective dataSource={data5} xName="x" yName="y" name="China Total" type="Bar" groupName="China" columnWidth={0.7} columnSpacing={0.1} marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}></SeriesDirective>
<SeriesDirective dataSource={data6} xName="x" yName="y" name="China Gold" type="Bar" groupName="China" columnWidth={0.5} columnSpacing={0.1} marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import {
ChartComponent,
SeriesCollectionDirective,
SeriesDirective,
Inject,
Legend,
Category,
Tooltip,
BarSeries,
DataLabel }
from'@syncfusion/ej2-react-charts';
const data1 = [
{ x: '2012', y: 104 },
{ x: '2016', y: 121 },
{ x: '2020', y: 113 },
];
const data2 = [
{ x: '2012', y: 46 },
{ x: '2016', y: 46 },
{ x: '2020', y: 39 },
];
const data3 = [
{ x: '2012', y: 65 },
{ x: '2016', y: 67 },
{ x: '2020', y: 65 },
];
const data4 = [
{ x: '2012', y: 29 },
{ x: '2016', y: 27 },
{ x: '2020', y: 22 },
];
const data5 = [
{ x: '2012', y: 91 },
{ x: '2016', y: 70 },
{ x: '2020', y: 88 },
];
const data6 = [
{ x: '2012', y: 38 },
{ x: '2016', y: 26 },
{ x: '2020', y: 38 },
];
function App() {
return (
<ChartComponent
id="charts"
style={{ textAlign: 'center' }}
primaryXAxis={{
valueType: 'Category',
interval: 1,
majorGridLines: { width: 0 },
}}
primaryYAxis={{
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
lineStyle: { width: 0 },
labelStyle: { color: 'transparent' },
}}
chartArea={{ border: { width: 0 } }}
tooltip={{ enable: true }}
title="Olympics Medal Tally"
>
<Inject
services={[BarSeries, Legend, Tooltip, Category, DataLabel]}
/>
<SeriesCollectionDirective>
<SeriesDirective
dataSource={data1}
xName="x"
yName="y"
name="USA Total"
type="Bar"
groupName="USA"
columnWidth={0.7}
columnSpacing={0.1}
marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}
></SeriesDirective>
<SeriesDirective
dataSource={data2}
xName="x"
yName="y"
name="USA Gold"
type="Bar"
groupName="USA"
columnWidth={0.5}
columnSpacing={0.1}
marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}
></SeriesDirective>
<SeriesDirective
dataSource={data3}
xName="x"
yName="y"
name="UK Total"
type="Bar"
groupName="UK"
columnWidth={0.7}
columnSpacing={0.1}
marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}
></SeriesDirective>
<SeriesDirective
dataSource={data4}
xName="x"
yName="y"
name="UK Gold"
type="Bar"
groupName="UK"
columnWidth={0.5}
columnSpacing={0.1}
marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}
></SeriesDirective>
<SeriesDirective
dataSource={data5}
xName="x"
yName="y"
name="China Total"
type="Bar"
groupName="China"
columnWidth={0.7}
columnSpacing={0.1}
marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}
></SeriesDirective>
<SeriesDirective
dataSource={data6}
xName="x"
yName="y"
name="China Gold"
type="Bar"
groupName="China"
columnWidth={0.5}
columnSpacing={0.1}
marker={{
dataLabel: {
visible: true,
position: 'Top',
font: { fontWeight: '600', color: '#ffffff' },
},
}}
></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Scatter 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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts';
import { scatterData } from 'datasource.ts';
function App() {
const primaryxAxis = {
title: 'Height (cm)', minimum: 130, maximum: 180,
edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
};
const primaryyAxis = {
title: 'Weight (kg)', minimum: 30, maximum: 100,
labelFormat: '{value}kg', rangePadding: 'None'
};
const marker = { width: 15, height: 15 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={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={marker}>
</SeriesDirective>
<SeriesDirective dataSource={scatterData} xName='height' yName='female' name='Female' type='Scatter' 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, ScatterSeries, Marker}
from'@syncfusion/ej2-react-charts';
import { scatterData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = {
title: 'Height (cm)', minimum: 130, maximum: 180,
edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
};
const primaryyAxis: AxisModel = {
title: 'Weight (kg)', minimum: 30, maximum: 100,
labelFormat: '{value}kg', rangePadding: 'None'
};
const marker = { width: 15, height: 15 };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={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={marker}>
</SeriesDirective>
<SeriesDirective dataSource={scatterData} xName='height' yName='female' name='Female' type='Scatter'
marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Bubble Chart
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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, BubbleSeries } from '@syncfusion/ej2-react-charts';
function App() {
const data = [
{ 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' }
];
const primaryxAxis = { title: 'Literacy Rate', minimum: 60, maximum: 100, interval: 5 };
const primaryyAxis = { title: 'GDP growth rate', minimum: -2, maximum: 16, interval: 2 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='GDP vs Literacy Rate'>
<Inject services={[BubbleSeries]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' size='size' type='Bubble' name='pound'>
</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,
BubbleSeries}
from'@syncfusion/ej2-react-charts';
function App() {
const 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' }
];
const primaryxAxis: AxisModel= { title: 'Literacy Rate', minimum: 60, maximum: 100, interval: 5 } ;
const primaryyAxis: AxisModel= { title: 'GDP growth rate', minimum: -2, maximum: 16, interval: 2 } ;
return <ChartComponent id='charts'
primaryXAxis={ primaryxAxis }
primaryYAxis={ primaryyAxis }
title='GDP vs Literacy Rate'>
<Inject services={[BubbleSeries]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource ={data} xName='x' yName='y' size='size' type='Bubble' name='pound'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
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';
function App() {
return <ChartComponent id='charts'>
<Inject services={[BubbleSeries]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={bubbleData} xName='x' yName='y' size='size' type='Bubble'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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';
function App() {
return <ChartComponent id='charts'>
<Inject services={[BubbleSeries]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={bubbleData} xName='x' yName='y' size='size' type='Bubble'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));