JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<script src="http://highcharts.com/js/themes/gray.js"></script>
<div id="dayChart" style="height: 300px"></div>

JavaScript

function secsToHM(secs) {
    hours = parseInt(secs / 3600);
    minutes = parseInt(secs / 60) % 60;
    return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes);
}


var chart; 
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'dayChart',
            zoomType: 'xy',
            spacingRight: 20
        },
        title: {
            text: 'Values for today'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                'Click and drag in the plot area to zoom in' :
                'Drag your finger over the plot to zoom in'
        },
        xAxis: {
            type: 'datetime',
            maxZoom: 1 * 3600, // 1 hours
            title: {
                text: null
            },
            labels : {
                formatter: function (){
                    return secsToHM(this.value);
                }
            }
        },
        yAxis: [
            {
                title: {
                    text: 'Power'
                },
                labels : {
                    formatter: function (){
                        return this.value + "W";
                    }
                },
                min: 0,
                startOnTick: false,
                showFirstLabel: false
            }, {
                title: {
                    text: 'Efficiency'
                },
                labels : {
                    formatter: function (){
                        return this.value + "%";
                    },
                    style: {
                        color: '#4572A7'
                    }
                },
                min: 0,
                max: 100,
                startOnTick: false,
                opposite: true
            }
        ],
        tooltip: {
            /* 
            shared: true, 
            */
            formatter: function() {
                return secsToHM(this.x) + ' :<br/>'+ this.series.name...