React Multi Series Range Column Charts & Graphs

[React Code]
/* 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,
            title: {
                text: "Temperature of New York & London",
            },
            axisY: {
                title: "Temperature",
                valueFormatString: "#0.##°F",
                crosshair: {
                    enabled: true,
                    valueFormatString: "#0.0°F"
                }
            },
            axisX: {
                valueFormatString: "MMM",
                crosshair: {
                    enabled: true,
                    snapToDataPoint: true
                }
            },
            toolTip: {
                shared: true,
            },
            data: [
                {
                    type: "rangeColumn",
                    yValueFormatString: "#0.##°F",
                    name: "New York",
                    showInLegend: true,
                    dataPoints: [
                        { x: new Date(2021, 0, 1), y: [28, 40] },
                        { x: new Date(2021, 1, 1), y: [30, 42] },
                        { x: new Date(2021, 2, 1), y: [36, 50] },
                        { x: new Date(2021, 3, 1), y: [46, 62] },
                        { x: new Date(2021, 4, 1), y: [55, 71] },
                        { x: new Date(2021, 5, 1), y: [64, 80] },
                        { x: new Date(2021, 6, 1), y: [70, 85] },
                        { x: new Date(2021, 7, 1), y: [69, 83] },
                        { x: new Date(2021, 8, 1), y: [62, 76] },
                        { x: new Date(2021, 9, 1), y: [51, 65] },
                        { x: new Date(2021, 10, 1), y: [42, 54] },
                        { x: new Date(2021, 11, 1), y: [34, 44] }
                    ]
                }, {
                    type: "rangeColumn",
                    showInLegend: true,
                    name: "London",
                    yValueFormatString: "#0.##°F",
                    dataPoints: [
                        { x: new Date(2021, 0, 1), y: [37, 47] },
                        { x: new Date(2021, 1, 1), y: [37, 48] },
                        { x: new Date(2021, 2, 1), y: [39, 53] },
                        { x: new Date(2021, 3, 1), y: [43, 59] },
                        { x: new Date(2021, 4, 1), y: [48, 65] },
                        { x: new Date(2021, 5, 1), y: [54, 71] },
                        { x: new Date(2021, 6, 1), y: [58, 75] },
                        { x: new Date(2021, 7, 1), y: [57, 74] },
                        { x: new Date(2021, 8, 1), y: [53, 68] },
                        { x: new Date(2021, 9, 1), y: [48, 60] },
                        { x: new Date(2021, 10, 1), y: [41, 53] },
                        { x: new Date(2021, 11, 1), y: [38, 48] }
                    ]
                }]
        };

        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;