Step area in React Chart component
22 Dec 20236 minutes to read
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"));
Series customization
The following properties can be used to customize the step area
series.
- fill – Specifies the color of the area series.
- opacity – Specifies the opacity of fill.
- dashArray – Specifies the dashes of series.
- border – Specifies the color and width of series border.
- step – Specifies the position of the step for the series.
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' fill= 'yellow'
border= opacity={0.7} dashArray="5,5" step='Right'>
</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' type='StepArea' fill= 'yellow'
border= opacity={0.7} dashArray="5,5" step='Right'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));