JSFiddle - React, Tailwind, and code Playground

by Dongor7

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.flexmonster.com/lib/flexmonster.highcharts.js"></script>
<script src="https://code.highcharts.com/4.2.2/highcharts.js"></script>
<div id="pivot-container"></div>

<div style="margin-top: 50px;" id="highcharts-container"></div>
<div style="margin-top: 30px;" id="highcharts-bar-container"></div>
<div style="margin-top: 30px; padding-bottom: 25px;" id="highcharts-pie-container"></div>

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  height: 300,
  toolbar: true,
  report: {
    dataSource: {
      data: getData()
    },
    slice: {
      "rows": [{
        "uniqueName": "Date"
      }],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
          "uniqueName": "Requests",
          "aggregation": "sum"
        },
        {
          "uniqueName": "Answered Calls",
          "aggregation": "sum"
        }
      ],
      "sorting": {
        "column": {
          "type": "desc",
          "tuple": [],
          "measure": {
            "uniqueName": "Answered Calls",
            "aggregation": "sum"
          }
        }
      }
    },
    "options": {
      "showHeaders": false,
      dateTimePattern: "yyyy/MM/dd HH:mm:ss"
    }
  },
  reportcomplete: function() {
    pivot.off("reportcomplete");
    createComboChart();
  }
});

function createComboChart() {
  pivot.highcharts.getData({
      type: "line"
    },
    function(data) {
      
      // timestamp to date format
      for (let i = 0; i < data.xAxis.categories.length; i++) {
        let ts = data.xAxis.categories[i];
        let dateObject = new Date(ts);
        let humanDateFormat = dateObject.toLocaleString();
        data.xAxis.categories[i] = humanDateFormat;
      }

      data.xAxis.title.enabled = false;
      data.chart.style = {
        fontFamily: 'SERIF TYPEFACE'
      };
      data.title = {
        style: {
          fontSize: '16px',
          fontWeight: 'bold',
          textTransform: 'uppercase'
        }
      };
      data.xAxis.type = 'datetime';
      data.title.text = 'Requests vs Answered Calls';
      data.subtitle = {
        text: 'over months'
      };
      Highcharts.setOptions({
        colors: ['#ff3b1d', '#00b370', '#4f9da6', '#FF6B6B', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
 ...