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/4.2.2/highcharts.js"></script>

<table cellpadding="10">
	<tr>
		<td>
			<div id="pivot-container"></div>
		</td>
	</tr>
	<tr>
		<td>
			<div id="highcharts-container" style="width: 100%; height: 300px; display: inline-block;"></div>
		</td>
	</tr>
</table>

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

JavaScript

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  width: "100%",
  height: 430,
  toolbar: true,
  report: {
    dataSource: {
      type: "json",
      data: [{
          "event": {
            "type": "string"
          },
          "time": {
            "type": "time"
          }
        },
        {
          "event": "Event #1",
          "time": 451515
        },
        {
          "event": "Event #1",
          "time": 2626
        },
        {
          "event": "Event #2",
          "time": 152424
        }
      ]
    },
    options: {
      timePattern: "d'd' HH'h' mm'min'"
    },
    slice: {
      rows: [{
        uniqueName: "event"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "time"
      }],
    }
  },
  reportcomplete: function() {
    pivot.off("reportcomplete");
    createChartWithTimeData();
  }
});

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

function applyTimeFormatting(data) {
  data.yAxis[0].labels = {
    formatter: function() {
      //var label = this.axis.defaultLabelFormatter.call(this);
      return secondsToDHMformat(this.value);
    }
  }
  data.tooltip = {
    formatter: function() {
      // The first returned item is the header, subsequent items are the
      // points
      return this.point.series.name + ': ' + secondsToDHMformat(this.point.y);
    }
  }
  return data;
}

function secondsToDHMformat(seconds) {
  seconds = Number(seconds);
  var d = Math.floor(seconds / (3600 * 24));
  var h = Math.floor(seconds % (3600 * 24) / 3600);
  var m =...