JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

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/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="pivot-container"></div>
<br/>
<div id="highcharts-container"></div>
<div id="highcharts-scatter-container"></div>

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  toolbar: false,
  report: {
    dataSource: {
      dataSourceType: "json",
      data: getData(),
      mapping: {
        Time: {
          type: "time"
        },
        Visitors: {
          type: "number"
        }
      }
    },
    options: {
      timePattern: "HH:mm"
    }
  },
  height: 250,
  reportcomplete: function() {
    pivot.off("reportcomplete");
    createChart();
  }
});

function createChart() {
  pivot.highcharts.getData({
      type: "column"
    },
    function(data) {
      applyTimeFormatting(data);
      Highcharts.chart('highcharts-container', data);
    },
    function(data) {
      applyTimeFormatting(data);
      Highcharts.chart('highcharts-container', data);
    }
  );
}

function applyTimeFormatting(data) {
  data.xAxis.labels = {
    formatter: function() {
      return formatter(this.value);
    }
  }
  data.tooltip = {
    useHTML: true,
    formatter: function() {
      return formatter(this.x) + '</br><b>' + this.point.series.name + ':</b> ' + this.point.y;
    }
  }
  return data;
}

function formatter(seconds) {
  seconds = Number(seconds);
  let h = Math.floor(seconds % (3600 * 24) / 3600);
  let m = Math.floor(seconds % 3600 / 60);
  return `${h < 10 ? `0${h}` : h}:${m < 10 ? `0${m}` : m}`
}

function getData() {
  return [{
      "Time": 18298,
      "Visitors": 20
    },
    {
      "Time": 27383,
      "Visitors": 12
    },
    {
      "Time": 20870,
      "Visitors": 5
    },
    {
      "Time": 46037,
      "Visitors": 16
    },
    {
      "Time": 3934,
      "Visitors": 5
    },
    {
      "Time": 7565,
      "Visitors": 22
    },
    {
      "Time": 65989,
      "Visitors": 8
    },
    {
      "Time": 46621,
      "Visitors": 16
    },
    {
      "Time": 6440,
      "Visitors": 0
    },
    {
      "Time": 29520,
     ...