JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="/js/dark-unica.js"></script>

<div id="temperatura"></div>

JavaScript

function flipZones() {
  var zones = [];
  Highcharts.each(this.series[0].points, function(point, index) {
    var color = ''
    zones.push({
      color: point.color,
      value: point.x
    });
  });

  this.series[0].update({
    fillOpacity: 1,
    zoneAxis: 'x',
    zones: zones
  });
}

Highcharts.getJSON(
    'https://www.pogodakrotoszyn.pl/tempdata.json',
    function(data) {
        var minTemp = Math.min(...data.temp);
        var maxTemp = Math.max(...data.temp);

        Highcharts.chart('temperatura', {
            chart: {
                backgroundColor: 'rgba(40,40,40,1)',
                events: {
                    load: function() {
                        flipZones.call(this);
                    }
                }
            },
            title: {
                text: ' '
            },
            xAxis: {
                type: 'datetime',
                labels: {
                    style: {
                        color: 'white'
                    }
                }
            },
            yAxis: {
                title: {
                    enabled: false,
                    text: ' '
                },
                gridLineWidth: 0,
                labels: {
                    style: {
                        color: 'white'
                    },
                    formatter: function () {
                        return this.value + '°C';
                    }
                }
            },
            legend: {
                enabled: false
            },
                plotOptions: {
                    areaspline: {
                        zones: [
                            {
                                value: -99.9,
                                color: '#be00be'
                            },
                            {
                                value: -40.0,
                                color: '#dc00dc'
                            },
                            {
                           ...