JSFiddle - React, Tailwind, and code Playground

by cristiscu

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
  var chart;
  $(document).ready(function () {
    chart = new Highcharts.Chart({
        chart : {
          renderTo : 'container',
          type : 'spline',
          /*backgroundColor : {
            linearGradient : [0, 0, 0, 300],
            stops : [
              [0, 'rgb(96, 96, 96)'],
              [1, 'rgb(16, 16, 16)']
            ]
          }*/
        },
        title : {
          text : 'Snow depth in the Vikjafjellet mountain, Norway'
        },
        subtitle : {
          text : 'An example of irregular time data in Highcharts JS'
        },
        xAxis : {
          type : 'datetime',
          dateTimeLabelFormats : { // don't display the dummy year
            month : '%e. %b',
            year : '%b'
          }
        },
        yAxis : {
          title : {
            text : 'Snow depth (m)'
          },
          min : 0
        },
        tooltip : {
          formatter : function () {
            return '<b>' + this.series.name + '</b><br/>' +
            Highcharts.dateFormat('%e. %b', this.x) + ': ' + this.y + ' m';
          }
        },
        plotOptions : {
          series : {
            /*lineWidth : 3,
            marker : {
              enabled : false,
              states : { hover : { enabled : true, radius : 8 } }
            },
            shadow : false,
            states : { hover : { lineWidth : 6 } }*/
          }
        },
        
        series : [{
            name : 'Winter 2007-2008',
            type : "areaspline",
            fillColor : {
              linearGradient : [0, 0, 0, 300],
              stops : [
                [0, Highcharts.getOptions().colors[0]],
                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
              ]
            },
            // Define the data points. All series have a dummy year
            // of 1970/71 in order to be compared on the same x axis. Note
            // that in JavaScript, months start...