React Multi Series Charts allow rendering more than one data-series in a single chart that makes data analysis easier. You can render multi-series chart with line, column, area, etc, except for pie, doughnut, funnel and pyramid. Given example shows react multi-series line chart along with source 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, title:{ text: "Number of New Customers" }, axisY : { title: "Number of Customers" }, toolTip: { shared: true }, data: [{ type: "spline", name: "2016", showInLegend: true, dataPoints: [ { y: 155, label: "Jan" }, { y: 150, label: "Feb" }, { y: 152, label: "Mar" }, { y: 148, label: "Apr" }, { y: 142, label: "May" }, { y: 150, label: "Jun" }, { y: 146, label: "Jul" }, { y: 149, label: "Aug" }, { y: 153, label: "Sept" }, { y: 158, label: "Oct" }, { y: 154, label: "Nov" }, { y: 150, label: "Dec" } ] }, { type: "spline", name: "2017", showInLegend: true, dataPoints: [ { y: 172, label: "Jan" }, { y: 173, label: "Feb" }, { y: 175, label: "Mar" }, { y: 172, label: "Apr" }, { y: 162, label: "May" }, { y: 165, label: "Jun" }, { y: 172, label: "Jul" }, { y: 168, label: "Aug" }, { y: 175, label: "Sept" }, { y: 170, label: "Oct" }, { y: 165, label: "Nov" }, { y: 169, label: "Dec" } ] }] } 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 use showInLegend property to enhance the chart readability. Also try setting tooltip's shared property to true to enable a common tooltip across multiple dataSeries.
Note For step by step instructions, follow our React Integration Tutorial