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 : {
          area : {
            lineWidth : 1,
            marker : {
              enabled : false,
              states : {
                hover : {
                  enabled : true,
                  radius : 5
                }
              }
            },
            shadow : false,
            states : {
              hover : {
                lineWidth : 1
              }
            }
          }
        },
        
        series : [{
            name : 'Winter 2007-2008',
            type : "area",
            lineWidth: 3,
            shadow: true,
            states: { hover: { lineWidth: 5 } },
            fillColor : {
              linearGradient : [0, 0, 0, 300],
              stops : [
                [0, Highcharts.getOptions().colors[0]],
                [1,...