JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="container"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    yAxis: [{
        title: {
            text: 'Primary Y-Axis',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        }
    }, {
        title: {
            text: 'Secondary Y-Axis',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        labels: {
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        opposite: true
    }],
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 80,
        verticalAlign: 'top',
        y: 55,
        floating: true
    },
    series: [{
        name: 'Primary Series',
        data: [1, 3, 2, 4],
        yAxis: 0,
        color: Highcharts.getOptions().colors[0]
    }, {
        name: 'Secondary Series',
        data: [4, 3, 5, 2],
        yAxis: 1,
        color: Highcharts.getOptions().colors[1]
    }]
});