JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://highcharts.github.io/export-csv/export-csv.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>

<main style="display: flex">
    <div id="example0" style="min-width: 250px; height: 400px"></div>
    <div id="example1" style="min-width: 250px; height: 400px"></div>
    <div id="example2" style="min-width: 250px; height: 400px"></div>
    <div id="example3" style="min-width: 250px; height: 400px"></div>
    <div id="example4" style="min-width: 250px; height: 400px"></div>
    <div id="example5" style="min-width: 250px; height: 400px"></div>
    
    
    
    
    
    
    
</main>

JavaScript

$(document).ready(function() {
	  var chart = {
	    type: 'line',
	    spacingBottom: 40
	  };

	  var title = {
	    text: 'title',
	    style: {
	      fontSize: '18px',
	    },
	    align: 'left'
	  };

	  var subtitle = {
	    text: 'subtitle',
	    style: {
	      fontSize: '12px'
	    },
	    align: 'left'
	  };

	  var xAxis = {
	    tickColor: '#ffffff',
	    labels: {
	      rotation: 0
	    },

	    categories: ['cat 1', 'cat 2', 'cat 3', 'cat 4']
	  };
	  var yAxis = {
	    gridLineWidth: 1,
	    lineWidth: 1,
	    title: ''
	  };
	  var plotOptions = {
	    bar: {
	      //stacking: 'percent',
	      reversed: true,
	      events: {
	        legendItemClick: function() {
	          return false;
	        }
	      }
	    }
	  };
	  var tooltip = {
	    _pointFormat: '<span>{series.name}</span>: {point.value:.1f} %<br/>',
	    shared: false,
	    useHTML: true
	  };
	  var series = [{
	    name: 'Group 1',
	    data: [3.9, 3.9, 6.3, 12.2],
	    color: '#3CA433'
	  }, {
	    name: 'Group 2',
	    data: [5.4, 4.1, 4.1, 4.1],
	    color: '#a2c510'
	  }, {
	    name: 'Group 3',
	    data: [8.9, 11.8, 19.9, 39.8],
	    color: '#FFED00'
	  }, {
	    name: 'Group 4',
	    data: [18, 25.3, 29.8, 20.8],
	    color: '#00B4E8'
	  }, {
	    name: 'Group 5',
	    data: [33.5, 33.3, 23.3, 11.4],
	    color: '#0064e6'
	  }, {
	    name: 'Group 6',
	    data: [30.4, 21.5, 16.6, 11.6],
	    color: '#27408B'
	  }];

	  var legend = {
	    layout: 'horizontal',
	    align: 'center',
	    verticalAlign: 'bottom',
	    padding: 25,
	    symbolPadding: 10,
	    symbolWidth: 25,
	    margin: -10,
	    itemStyle: {
	      fontWeight: 'normal'
	    },
	    reversed: true
	  };
	  var credits = {
	    text: "Source",
	    href: false,
	    style: {
	      color: '#999999',
	      cursor: false,
	      fontSize: '10px'
	    },
	    position: {
	      align: 'left',
	      x: 10,
	      y: -45
	    }
	  };

	  var exporting = {
	    allowHTML: true,
	    enabled: true,
	   ...