React Area Charts & Graphs

Download React Chart Samples

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>
		);
	}
}
module.exports = App;

Chart Customizations

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