React Multi Series Bar 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 = {
            animationEnabled: true,
            colorSet: "colorSet2",
            title: {
                text: "Gravity Vs Escape Velocity of Planets",
                fontFamily: "Calibri"
            },
            axisX: {
                reversed: true
            },
            axisY: [{
                title: "Gravity (m/s²)",
                includeZero: true,
                titleFontColor: "#6D78AD",
                lineColor: "#6D78AD",
                labelFontColor: "#6D78AD",
                tickColor: "#6D78AD"
            }],
            axisY2: {
                title: "Escape Velocity (km/s)",
                titleFontColor: "#51CDA0",
                lineColor: "#51CDA0",
                labelFontColor: "#51CDA0",
                tickColor: "#51CDA0"
            },
            toolTip: {
                shared: true
            },
            data: [{
                type: "bar",
                name: "Gravity",
                axisYType: "primary",
                yValueFormatString: "#,##0.0 m/s²",
                dataPoints: [
                    { label: "Mercury", y: 3.7 },
                    { label: "Venus", y: 8.9 },
                    { label: "Earth", y: 9.8 },
                    { label: "Mars", y: 3.7 },
                    { label: "Jupiter", y: 23.1 },
                    { label: "Saturn", y: 9.0 },
                    { label: "Uranus", y: 8.7 },
                    { label: "Neptune", y: 11.0 }
                ]
            }, {
                type: "bar",
                name: "Escape Velocity",
                axisYType: "secondary",
                yValueFormatString: "#,##0.0 km/s",
                dataPoints: [
                    { label: "Mercury", y: 4.3 },
                    { label: "Venus", y: 10.4 },
                    { label: "Earth", y: 11.2 },
                    { label: "Mars", y: 5.0 },
                    { label: "Jupiter", y: 59.5 },
                    { label: "Saturn", y: 35.5 },
                    { label: "Uranus", y: 21.3 },
                    { label: "Neptune", y: 23.5 }
                ]
            }]
        };

        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;