JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
<div id="page-container">Page: <span id="pager"></span></div>

CSS

#pager a {
  display: inline-block;
  border: 1px solid black;
  background-color: white;
  padding: 2px 5px;
  text-decoration: none;
  margin: 2px;
  font-family: Arial, sans-serif;
  color: black;
}

JavaScript

FruitChartControl = new function() {
  var self = this;

  // create the arrays outside of the function scope, otherwise accessing elements later-on
  // may cause problems
  self.arrBaseCategories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'];
  // arrCategories and arrSeries "data" element must contain the number of arrBaseCategories n-times
  self.arrCategories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas', 'Apples1', 'Oranges1', 'Pears1', 'Grapes1', 'Bananas1', 'Apples2', 'Oranges2', 'Pears2', 'Grapes2', 'Bananas2'];
  self.arrSeries = [{
    name: 'John',
    data: [5, 3, 4, 7, 2, 3, 4, 4, 2, 5, 2, 2, 3, 2, 1]
  }, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1, 5, 3, 4, 7, 2, 3, 4, 4, 2, 5]
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5, 2, 2, 3, 2, 1, 5, 3, 4, 7, 2]
  }];

  self.showGraph = function(page) {

      // number of different elements
      var numDifferentElements = self.arrBaseCategories.length;
      // first element that needs to be extracted from arrCategories and arrSeries
      var intStartElement = page * numDifferentElements;

      var arrCurrentSeries = [];
      var arrCurrentCategories = [];

      for (var elem in self.arrSeries) {

        var arrSubData = [];

        // extract elements starting from a position based on the page number 
        // from the data array and only pass this one along when creating the chart
        for (var i = 0; i < numDifferentElements; i++) {

          arrCurrentCategories.push(self.arrCategories[intStartElement + i]);
          arrSubData.push(self.arrSeries[elem].data[intStartElement + i]);

        }
        arrCurrentSeries.push({
          name: self.arrSeries[elem].name,
          data: arrSubData
        });

      }

      $('#container').highcharts({
        chart: {
          type: 'bar'
        },
        title: {
          text: 'Stacked bar chart'
        },
        xAxis: {
          categories: arrCurrentCategories
        },
        yAxis: {
          min: 0,
    ...