React Multi Series Step Line Charts & Graphs

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;