Step Area Chart in React Chart

17 Aug 202624 minutes to read

Step area

Follow these steps to render a step area series, which fills the region between a baseline and a stepped line that connects data points vertically and horizontally. Use this for visualizing discrete value changes between consecutive x values.

  1. Set the series type: Set the series type to StepArea in the series configuration.

  2. Inject the StepAreaSeries module: Add StepAreaSeries to the services array of the Inject component inside ChartComponent. This registers the functionality required to render a step area 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';
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';

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"));
export let stepAreaData = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let stepAreaData: Object[] = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Binding data with series

You can bind data to the chart using the dataSource property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series xName and yName properties.

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';
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';

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"));
export let stepAreaData = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let stepAreaData: Object[] = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Series customization

Customize the step area series appearance with the following properties. Defaults are taken from the standard Series model.

Property Type Default Description
fill string null Color applied to the series. Accepts a CSS color or a gradient reference.
opacity number 1 Transparency of the fill (0 to 1).
border BorderModel null Border settings: width, color, and dashArray.
step StepPosition Left Position of the steps relative to the data points.
noRisers boolean false When true, hides the vertical risers between data points.

Solid fill

The fill property determines the color applied to 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';
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'>
        </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';

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'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stepAreaData = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let stepAreaData: Object[] = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Gradient fill

The fill property can be set to a CSS gradient reference such as url(#gradient) to apply a gradient color that transitions across the series. Define the gradient in an SVG <defs> block and reference it from the fill prop.

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';
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='url(#gradient)'>
        </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';

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='url(#gradient)'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stepAreaData = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let stepAreaData: Object[] = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Opacity

The opacity property controls the transparency of the fill (0 to 1) and affects how the series blends with background or overlapping 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';
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' opacity={0.5}>
        </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';

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' opacity={0.5}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stepAreaData = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let stepAreaData: Object[] = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Border

Use the border property to configure the border width, color, and dashArray of the step area series.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Tooltip, StepAreaSeries } from '@syncfusion/ej2-react-charts';
import { stepAreaData } from './datasource';

function App() {
  const primaryxAxis = { title: 'Overs' };
  const primaryyAxis = { title: 'Runs' };
  const tooltip = { enable: true };
  const border = { width: 2, color: '#FFA500', dashArray: '5,5' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      title='England - Run Rate'>
      <Inject services={[StepAreaSeries, Tooltip]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stepAreaData} xName='x' yName='y' type='StepArea' 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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, BorderModel, TooltipSettingsModel, Tooltip, StepAreaSeries } from '@syncfusion/ej2-react-charts';
import { stepAreaData } from './datasource';

function App() {
  const primaryxAxis: AxisModel = { title: 'Overs' };
  const primaryyAxis: AxisModel = { title: 'Runs' };
  const tooltip: TooltipSettingsModel = { enable: true };
  const border: BorderModel = { width: 2, color: '#FFA500', dashArray: '5,5' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      tooltip={tooltip}
      title='England - Run Rate'>
      <Inject services={[StepAreaSeries, Tooltip]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stepAreaData} xName='x' yName='y' type='StepArea' border={border}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stepAreaData = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let stepAreaData: Object[] = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Step

Use the step property to change the position of the steps in a step area series. Valid values are Left, Center, and Right.

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';
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' step='Center'>
        </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';

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' step='Center'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stepAreaData = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let stepAreaData: Object[] = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

No risers

You can eliminate the vertical lines between points by setting the noRisers property on a series to true. This is useful for highlighting trends without the distraction of risers.

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 { stepData } from "../datasource";

function App() {

  return <ChartComponent id='charts'
      primaryXAxis={{valueType: 'Double',title: 'Overs' }}
      primaryYAxis={{title: 'Runs' }}
      title = 'England - Run Rate'>
      <Inject services={[StepAreaSeries, Legend]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stepData} xName='x' yName='y' type='StepArea' name='England' opacity= {0.1} border= {{width:1.5}} noRisers={true}>
        </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 { stepData } from "../datasource";

function App() {
  const primaryxAxis: AxisModel = {valueType: 'Double',title: 'Overs' };
  const primaryyAxis: AxisModel = {title: 'Runs' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title = 'England - Run Rate'>
      <Inject services={[StepAreaSeries, Legend]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stepData} xName='x' yName='y' type='StepArea' name='England' opacity= {0.1} border= {{width:1.5}} noRisers={true}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stepData: Object[] = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Empty points

Data points with null or undefined values are considered empty. By default (mode: 'Gap'), empty points leave a gap in the series; the mode property on emptyPointSettings lets you change how they are handled.

Mode

Use the mode property to control handling of empty points. Available modes: Gap, Drop, Zero, Average. The default mode is Gap.

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';
function App() {
    const primaryxAxis = { valueType: 'Double', title: 'Overs' };
    const primaryyAxis = { title: 'Runs' };
    const emptyPoint = {mode: 'Gap'};
    const marker = {visible: true};
    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' emptyPointSettings={emptyPoint} 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, StepAreaSeries}
from'@syncfusion/ej2-react-charts';
import { stepAreaData } from './datasource';

function App() {
  const primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs' };
  const primaryyAxis: AxisModel = { title: 'Runs' };
  const emptyPoint: object = {mode: 'Gap'};
  const marker: object = {visible: true};
  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' emptyPointSettings={emptyPoint} marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stepAreaData = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: null },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: undefined }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let stepAreaData: Object[] = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: null },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: undefined }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Fill

Use the fill property to set the fill color for empty points.

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';
function App() {
    const primaryxAxis = { valueType: 'Double', title: 'Overs' };
    const primaryyAxis = { title: 'Runs' };
    const emptyPoint = {mode: 'Average', fill: 'red'};
    const marker = {visible: true};
    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' emptyPointSettings={emptyPoint} 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, StepAreaSeries}
from'@syncfusion/ej2-react-charts';
import { stepAreaData } from './datasource';

function App() {
  const primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs' };
  const primaryyAxis: AxisModel = { title: 'Runs' };
  const emptyPoint: object = {mode: 'Average', fill: 'red'};
  const marker: object = {visible: true};
  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' emptyPointSettings={emptyPoint} marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stepAreaData = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: null },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: undefined }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let stepAreaData: Object[] = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: null },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: undefined }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Border

Use the border property to customize the border width and color for empty points.

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';
function App() {
    const primaryxAxis = { valueType: 'Double', title: 'Overs' };
    const primaryyAxis = { title: 'Runs' };
    const emptyPoint = {mode: 'Average', fill: 'red', border: {width: 1.5, color: 'green'}};
    const marker = {visible: true};
    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' emptyPointSettings={emptyPoint} 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, StepAreaSeries}
from'@syncfusion/ej2-react-charts';
import { stepAreaData } from './datasource';

function App() {
  const primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs' };
  const primaryyAxis: AxisModel = { title: 'Runs' };
  const emptyPoint: object = {mode: 'Average', fill: 'red', border: {width: 1.5, color: 'green'}};
  const marker: object = {visible: true};
  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' emptyPointSettings={emptyPoint} marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stepAreaData = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: null },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: undefined }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let stepAreaData: Object[] = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: null },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: undefined }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Events

Series render

The seriesRender event fires before each series is rendered and lets you modify series properties such as data, fill, or name. For a step area series, use it to vary per-series fill between renders.

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';
function App() {
    const primaryxAxis = { valueType: 'Double', title: 'Overs' };
    const primaryyAxis = { title: 'Runs' };
    
    const seriesRender = (args) => {
      args.fill = '#ff6347';
  };
  const marker = {visible: true};
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Annual Temperature Comparison' seriesRender={seriesRender}>
      <Inject services={[StepAreaSeries, Legend]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stepAreaData} xName='x' yName='y' name='England' type='StepArea' 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, StepAreaSeries, ISeriesRenderEventArgs}
from'@syncfusion/ej2-react-charts';
import { stepAreaData } from './datasource';

function App() {
  const primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs' };
  const primaryyAxis: AxisModel = { title: 'Runs' };
  const seriesRender = (args: ISeriesRenderEventArgs) => {
    args.fill = '#ff6347';
};
const marker: object = {visible: true};
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Annual Temperature Comparison'
      seriesRender={seriesRender}>
      <Inject services={[StepAreaSeries, Legend]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stepAreaData} xName='x' yName='y' type='StepArea' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stepAreaData = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let stepAreaData: Object[] = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Point render

The pointRender event fires before each data point is drawn, letting you customize per-point marker shape, border, or fill. For a step area series, use it to highlight specific points or apply conditional formatting along the stepped boundary.

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';
function App() {
    const primaryxAxis = { valueType: 'Double', title: 'Overs' };
    const primaryyAxis = { title: 'Runs' };
    
    const pointRender = (args) => {
      if (args.point.y <= 8) {
        args.fill = '#ff6347';
    }
    else {
        args.fill = '#009cb8';
    }
  };
  const marker = {visible: true};
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Annual Temperature Comparison' pointRender={pointRender}>
      <Inject services={[StepAreaSeries, Legend]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stepAreaData} xName='x' yName='y' name='England' type='StepArea' 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, StepAreaSeries, IPointRenderEventArgs}
from'@syncfusion/ej2-react-charts';
import { stepAreaData } from './datasource';

function App() {
  const primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs' };
  const primaryyAxis: AxisModel = { title: 'Runs' };
  const pointRender = (args: IPointRenderEventArgs) => {
    if (args.point.y <= 8) {
      args.fill = '#ff6347';
  }
  else {
      args.fill = '#009cb8';
  }
};
  const marker: object = {visible: true};
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Annual Temperature Comparison'
      pointRender={pointRender}>
      <Inject services={[StepAreaSeries, Legend]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stepAreaData} xName='x' yName='y' type='StepArea' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stepAreaData = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let stepAreaData: Object[] = [
    { x: 1,  y: 7 },  { x: 2,  y: 1 }, 
    { x: 3,  y: 1 },  { x: 4,  y: 14 }, 
    { x: 5,  y: 1 },  { x: 6,  y: 10 },
    { x: 7,  y: 8 },  { x: 8,  y: 6 }, 
    { x: 9,  y: 10 }, { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

See also