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/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

$(function () {


        Highcharts.chart('container', {

            chart: {
                type: 'arearange',
                zoomType: 'x'
            },

            title: {
                text: "Yearly cummulative values of energy's bills"
              
                           },

            xAxis: {
            
                type: 'datetime',
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                title: {
                    text: 'Month'
                }
            },

            yAxis: {
                title: {
                    text: 'Power bill [CHF]'
                }
            },

            tooltip: {
                crosshairs: true,
                shared: true,
                valueSuffix: ' CHF'
            },

            legend: {
                enabled: true
            },

            series: [{
                name: 'Savings of using battery',
                data: [["Jan",36,52],["Feb",71,102],["Mar",105,150],
                ["Apr",135,193],["May",162,232],["Jun",188,269],["Jul",214,306],["Aug",238,340],["Sep",265,379],["Oct",296,423],["Nov",329,470],["Dec", 364,520]
                ],
                color: '#30d9c4'
            }],         
        });
});