Step Area chart is an Area Chart except that the datapoints are connected by horizontal and vertical line segments that's used when data change at discrete non-uniform intervals of time. Given example shows simple React Step Area Chart along with code that you can try running locally.
/* App.js */ import React, { Component } from 'react'; import CanvasJSReact from './canvasjs.react'; var CanvasJS = CanvasJSReact.CanvasJS; var CanvasJSChart = CanvasJSReact.CanvasJSChart; class App extends Component { render() { const options = { animationEnabled: true, exportEnabled: true, title:{ text: "US Sales" }, axisY: { title: "Sales", includeZero: true }, data: [ { type: "stepArea", xValueFormatString: "YYYY", dataPoints: [ { x: new Date(2000, 0), y: 40 }, { x: new Date(2001, 0), y: 62 }, { x: new Date(2002, 0), y: 53 }, { x: new Date(2003, 0), y: 49 }, { x: new Date(2004, 0), y: 52 }, { x: new Date(2005, 0), y: 32 }, { x: new Date(2006, 0), y: 28 }, { x: new Date(2007, 0), y: 46 }, { x: new Date(2008, 0), y: 55 }, { x: new Date(2009, 0), y: 88 }, { x: new Date(2010, 0), y: 68 }, { x: new Date(2011, 0), y: 63 }, { x: new Date(2012, 0), y: 65 }, { x: new Date(2013, 0), y: 68 }, { x: new Date(2014, 0), y: 48 }, { x: new Date(2015, 0), y: 39 }, { x: new Date(2016, 0), y: 40 }, { x: new Date(2017, 0), y: 46 } ] } ] } return ( <div> <CanvasJSChart options = {options} /* onRef={ref => this.chart = ref} */ /> {/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/} </div> ); } } module.exports = App;
The color of the line and the filled area can be customized using lineColor and color properties respectively. Some of the other commonly used customization options include fillOpacity, lineThickness, etc.