JSFiddle - React, Tailwind, and code Playground

by fekkyDev s

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>

<div id="container3" style="display:none;min-width: 310px; height: 200px; margin: 0 auto"></div>
<div id="container4" style="display:none;min-width: 310px; height: 200px; margin: 0 auto"></div>

JavaScript

$(function() {
  $('#container').highcharts({
  chart:{ type:'areaspline'},
    xAxis: {
      crosshair: true
    },
    title:{
     text: 'DemoChart',
    },
    plotOptions: {
    series: {
            states: {
                hover: {
                    enabled: true,
                    lineWidth: 1
                }
            }
        },
        areaspline: {
            pointStart: 1940,
            
            marker: {
                enabled: false,
                symbol: 'circle',
                radius: 2,
                states: {
                    hover: {
                    		lineWidth:1,
                        enabled: true
                    }
                }
            }
        }
    },
    series: [{
      name: '#00b5ce',
      color:'#00b5ce',
      lineWidth:1,
     fillOpacity: 0.2,
      data: [3.9, 4.2, 5.7, 8.5, 20.9, 15.2, 17.0, 16.6, 14.2, 10.3, 26.6, 40.8]
    },{
      name: '#ff007',
      color:'#ff0074',
       fillOpacity:0.9,
       lineWidth:1,
       fillOpacity: 0.2,
      data: [1.9, 19.2,33.7, 8.5, 9.9, 15.2, 17.0, 16.6, 14.2, 1.3, 6.6, 3.8]
    },{
      name: '#8f12bb',
      color:'#8f12bb',
       fillOpacity:0.9,
       lineWidth:1,
       fillOpacity: 0.2,
      data: [1.9, 19.2,33.7, 48.5, 29.9, 15.2, 17.0, 16.6, 14.2, 1.3, 6.6, 3.8]
    },{
      name: '#0059e3',
      color:'#0059e3',
       fillOpacity:0.9,
       lineWidth:1,
       fillOpacity: 0.2,
      data: [1.9, 39.2,33.7, 28.5, 49.9, 15.2, 17.0, 16.6, 14.2, 1.3, 6.6, 3.8]
    },{
      name: '#57c131',
      color:'#57c131',
       fillOpacity:0.9,
       lineWidth:1,
       fillOpacity: 0.2,
      data: [11.9, 39.2,32.7, 28.5, 29.9, 25.2, 17.0, 16.6, 24.2, 31.3, 26.6, 43.8]
    }]
  });
  
  $('#container3').highcharts({
  chart:{ type:'areaspline'},
    xAxis: {
      crosshair: true
    },
    plotOptions: {
        areaspline: {
            pointStart: 1940,
            marker: {
                enabled: false,
                symbol:...