JSFiddle - React, Tailwind, and code Playground

by dev2020

HTML

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

JavaScript

var data1 = [{
  "name": "",
  "data": ["Totals", "Total1 ", "Total 2", "total 3"]
}, {
  "name": "Amount1",
  "data": [48353330, 38079817, 37130929, 1957317]
}, {
  "name": "Amount2",
  "data": [11488897, 8902674, 8814629, 497369]
}];


$(document).ready(function() {
  var options = {
    chart: {
      renderTo: 'container',
      type: 'area',
      marginRight: 130,
      marginBottom: 25
    },
    title: {
      text: Information',
      x: -20 //center
    },
    subtitle: {
      text: '',
      x: -20
    },
    xAxis: {
      categories: []
    },
    yAxis: {
      title: {
        text: 'Amount'
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.series.name + '</b><br/>' +
          this.x + ': $' + this.y;
      }
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      x: -10,
      y: 100,
      borderWidth: 0
    },
    series: []
  }

  $.getJSON("data1", function(json) {
    options.xAxis.categories = json[0]['data'];
    options.series[0] = json[1];
    options.series[1] = json[2];
    chart = new Highcharts.Chart(options);
  });
});