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', {
        chart: {
            type: 'area'
        },
        title: {
            text: 'Daily Power Consumption'
        },
        xAxis: {
            allowDecimals: false,
            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]"
            }

        },

        plotOptions: {
            area: {
        
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
       tooltip: {
          crosshairs: true,
          shared: true,
          valueSuffix: ' kWh'
      },
        legend: {
           enabled: false
         },
        series: [{
            name: 'Daily Consumption',
            data: [0.39,	0.38,0.38,	0.37	,0.37,	0.38,	0.43,	0.51	,0.54,	0.55,	0.54,	0.51,	0.49,	0.49,	0.49,	0.50	,0.56	,0.59,	0.60	,0.54	,0.51,	0.47,	0.46,	0.43],
            color: '#30d9c4'
        }]
    });
});