JSFiddle - React, Tailwind, and code Playground

by tomexx

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({
        noData: {
            style: {
                fontSize: "20px"
            }
        },
        chart : {
            renderTo : 'container',
            type : 'spline',
            backgroundColor: null,
            spacingBottom: 0
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },
        xAxis : {
            categories: [1,2,3,4],
            tickmarkPlacement: 'on'
        },
        yAxis : {
          title : {
            text : 'Snow depth (m)'
          },
          min : 0
        },
        plotOptions : {
          area : {
              lineWidth : 2,
              marker : {
              enabled : false,
              states : {
                hover : {
                  enabled : false
                }
              }
            },
            shadow : false,
            states : {
              hover: null
            }
          }
        },
        
        series : [{
         
            type : "area",
            fillColor : {
              linearGradient : [0, 0, 0, 300],
              stops : [
                [0, Highcharts.getOptions().colors[0]],
                [1, 'rgba(0,0,0,0)']
              ]
            },
            data : [23,1,33,142]
          }, {
            
            type : "area",
            fillColor : {
              linearGradient : [0, 0, 0, 300],
              stops : [
                [0, Highcharts.getOptions().colors[1]],
                [1, 'transparent']
              ]
            },
            data : [4,42,123,5]
          }
        ]
      });
  });
});