JSFiddle - React, Tailwind, and code Playground

by amit6june

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" ></div>

JavaScript

// Code for line and area range with different color

$(function () {
         
          $('#container').highcharts({
        
            chart: {
                renderTo: 'container'//,
               //type: 'area'
            },
            
            title: {
                text: 'a'
            },
        
            xAxis: {
              //  type: 'datetime'
            },
            
             yAxis: {
            plotLines: [{
                color: '#007CB9',
                width: 2,
                value: 85
            }]
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: false
                }
            }
        },
        
            tooltip: {
                crosshairs: true,
                shared: false,
                valueSuffix: '°C'
            },
           
            
            legend: {
                enabled: false
            },
        
            series: [{
                type: 'arearange',
                name: 'Temperatures',
                 data: [
[1, 0, 0],
[2, 10, 1],
[3, 20, 5],
[4, 30, 10],
[5, 40, 40],
[6, null, null],
[7, null, null]
],
                       
                fillColor: '#EEA5A5',                       
                },
                     {
                type: 'arearange',
                name: 'Temperatures',
                data: [
[1, null, null],
[2, null, null],
[3, null, null],
[4, null, null],
[5, 40, 40],
[6, 50, 56]                
],
                         color: '#A4E1BC',                            
                fillColor: '#A4E1BC',
                marker: {enabled: true}                            
                },
                     
                     {
                type: 'arearange',
                name: 'Temperatures',
                data: [
[1, 56, 85],
[2, 56, 85],
[3, 56, 85],
[4, 56, 85],
[5, 56, 85],
[6, 56, 85]                  
],
  dashStyle: 'ShortDash',                     
...