React Area charts are achieved by rendering a series of data points over time, connecting those data points with line segments, & then filling the area between the line and axisX with color. Below example shows a React Area Chart along with sample code that you can run 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 = { theme: "light2", animationEnabled: true, exportEnabled: true, title: { text: "Number of iPhones Sold" }, axisY: { title: "Number of iPhones ( in Million )" }, data: [ { type: "area", xValueFormatString: "YYYY", yValueFormatString: "#,##0.## Million", dataPoints: [ { x: new Date(2017, 0), y: 7.6}, { x: new Date(2016, 0), y: 7.3}, { x: new Date(2015, 0), y: 6.4}, { x: new Date(2014, 0), y: 5.3}, { x: new Date(2013, 0), y: 4.5}, { x: new Date(2012, 0), y: 3.8}, { x: new Date(2011, 0), y: 3.2} ] } ] } 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;
You can customize the color & opacity of the filled area in using color and fillOpacity properties respectively.
Note For step by step instructions, follow our React Integration Tutorial