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 () {
    new Highcharts.Chart({
        chart : {
          renderTo : 'container',
          type : 'spline',
        },
        series : [{
            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')]
              ]
            },
            data : [73, 65, 152]
          }, {
            type : "areaspline",
            fillColor : {
              linearGradient : [0, 0, 0, 300],
              stops : [
                [0, Highcharts.getOptions().colors[1]],
                [1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0).get('rgba')]
              ]
            },
            data : [122,45,67]
          }, {
            type : "areaspline",
            fillColor : {
              linearGradient : [0, 0, 0, 300],
              stops : [
                [0, Highcharts.getOptions().colors[2]],
                [1, Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0).get('rgba')]
              ]
            },
            data : [34,88,21]
          }
        ]
      });
});