JSFiddle - React, Tailwind, and code Playground

by megaadriano

HTML

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div style="width:100%">
<div id="chart-year" style="display: inline-block;"></div>
<div id="chart-quarter" style="display: inline-block"></div>
</div>

JavaScript

Apex = {
      chart: {
        toolbar: {
          show: false
        }
      },
      tooltip: {
        shared: false
      },
    }
    var colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#00D9E9', '#FF66C3'];

    /**
     * Randomize array element order in-place.
     * Using Durstenfeld shuffle algorithm.
     */
    function shuffleArray(array) {
      for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
      }
      return array;
    }

    var arrayData = [{
      y: 400,
      quarters: [{
        x: 'Q1',
        y: 120
      }, {
        x: 'Q2',
        y: 90
      }, {
        x: 'Q3',
        y: 100
      }, {
        x: 'Q4',
        y: 90
      }]
    }, {
      y: 430,
      quarters: [{
        x: 'Q1',
        y: 120
      }, {
        x: 'Q2',
        y: 110
      }, {
        x: 'Q3',
        y: 90
      }, {
        x: 'Q4',
        y: 110
      }]
    }, {
      y: 448,
      quarters: [{
        x: 'Q1',
        y: 70
      }, {
        x: 'Q2',
        y: 100
      }, {
        x: 'Q3',
        y: 140
      }, {
        x: 'Q4',
        y: 138
      }]
    }, {
      y: 470,
      quarters: [{
        x: 'Q1',
        y: 150
      }, {
        x: 'Q2',
        y: 60
      }, {
        x: 'Q3',
        y: 190
      }, {
        x: 'Q4',
        y: 70
      }]
    }, {
      y: 540,
      quarters: [{
        x: 'Q1',
        y: 120
      }, {
        x: 'Q2',
        y: 120
      }, {
        x: 'Q3',
        y: 130
      }, {
        x: 'Q4',
        y: 170
      }]
    }, {
      y: 580,
      quarters: [{
        x: 'Q1',
        y: 170
      }, {
        x: 'Q2',
        y: 130
      }, {
        x: 'Q3',
        y: 120
      }, {
        x: 'Q4',
        y: 160
      }]
    }];

    function makeData() {
      var dataSet = shuffleArray(arrayData)

      var dataYearSeries = [{
       ...