JSFiddle - React, Tailwind, and code Playground

by Joanna Sobańska

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    Highcharts.chart('container', {
        title: {
            text: 'Consumption, solar, charging and discharge'
        },
        xAxis: {
           categories: ['01:00', '02:00', '03:00','04:00', '05:00', '06:00','07:00', '08:00', '09:00','10:00', '11:00', '12:00','13:00', '14:00', '15:00','16:00', '17:00', '18:00','19:00', '20:00', '21:00','22:00', '23:00', '24:00']
        },
               yAxis: {
            title: {
                text: "Power [kWh]"
            }

        },
        
        labels: {
            items: [{
                html: '',
                style: {
                    left: '50px',
                    top: '18px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },
        series: [{
            type: 'column',
            name: 'Charge',
            data: [0,	0,	0	,0	,0	,0	,0,	0,	0,	0,	0,	-0.27,	-0.49,	-0.6,	-0.6,	-0.57,	-0.38,	0.08,	0,	0,	0,	0,	0,	0]
        }, {
            type: 'column',
            name: 'Discharge',
            data: [0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0.52,	0.52,	0.5,	0.52,	0.52,	0.52]
        },
        {
            type: 'spline',
            name: 'Consumption',
            data: [1.41,	1.27,	1.22,	1.11,	1.08,	1.14,	1.22,	1.34,	1.49,	1.62,	1.7,	1.76,	1.82,	1.81,	1.81,	1.75,	1.7,	1.67,	1.68,	1.69,	1.59,	1.56,	1.61,	1.66],
            color: '#30d9c4',
            marker: {
                lineWidth: 2,
                lineColor: "#30d9c4",
                fillColor: '#30d9c4'
            }
        }
        ,
        {
            type: 'spline',
            name: 'Solar',
            data: [0,0,0,0,0,0,0,0.06,0.41,0.97,1.58,2.03,2.31,2.42,2.42,2.32,2.1,1.75,1.26,0.68,0.23,0.01,0,0],
            color: '#00BFFF',
            marker: {
                lineWidth: 2,
                lineColor: "#00BFFF",
                fillColor: '#00BFFF'
            }
        }]
    });
});