Example shows React Multi Series Step Line Chart.
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: "Capacity v/s Production of Crude Steel" }, subtitles: [{ text: "India" }], toolTip: { shared: true, contentFormatter: function (e) { var content = ""; content = "<strong>" + e.entries[0].dataPoint.label + "</strong> <br/>"; for (var i = 0; i < e.entries.length; i++) { content += "<span style= "color:" + e.entries[i].dataSeries.color + "">" + e.entries[i].dataSeries.name + "</span>: <strong>" + CanvasJS.formatNumber(e.entries[i].dataPoint.y, "#,###") + " tonne</strong> <br/>"; } content += "<span style = "color: #EF5350 ">Capacity Utilization: </span><strong>" + CanvasJS.formatNumber((e.entries[0].dataPoint.y / e.entries[1].dataPoint.y), "##.##%") + "</strong><br/>"; return content; } }, axisY: { title: "In tonne" }, data: [{ type: "stepLine", name: "Production of Crude Steel", dataPoints: [ { label: "2013-14", y: 81694 }, { label: "2014-15", y: 88979 }, { label: "2015-16", y: 89790 }, { label: "2016-17", y: 89790 }, { label: "2017-18", y: 103131 }, { label: "2018-19", y: 110923 } ] }, { type: "stepLine", name: "Capacity of Crude Steel Production", dataPoints: [ { label: "2013-14", y: 102261 }, { label: "2014-15", y: 109851 }, { label: "2015-16", y: 121970 }, { label: "2016-17", y: 128277 }, { label: "2017-18", y: 137975 }, { label: "2018-19", y: 142236 } ] }] }; 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 content of the tooltip using contentFormatter. Additionally, other commonly used customization options include shared tooltip, showInLegend, etc.
Note For step by step instructions, follow our React Integration Tutorial