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-charts'; //var CanvasJSReact = require('@canvasjs/react-charts'); 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> ); } } export default 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.
Note For step by step instructions, follow our React Integration Tutorial