Area series in React Chart component
16 May 202318 minutes to read
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"));
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"));
Series customization
The following properties can be used to customize the area
series.
- fill – Specifies the color of the area series.
- opacity – Specifies the opacity of fill.
- dashArray – Specifies the dashes of series.
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"));
Area border
The following properties in the bordermodel can be used to customize the border of the Area Chart.
- width - Specifies the width for the border of the Area Chart.
- color - Specifies the Color for the border of the Area Chart.
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"));