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="wrapper">
  <div id="pivotContainer"></div>
  <div id="highchartsContainer"></div>
</div>

CSS

#wrapper {
  height: 500px;
  position: relative;
}

#highchartsContainer {
  top: 80px;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 10;
  display: none;
  position: absolute;
}

JavaScript

let highchartsContainer = document.getElementById("highchartsContainer")

var pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  toolbar: true,
  width: "100%",
  height: "100%",
  report: "https://cdn.flexmonster.com/reports/report.json",
})

flexmonster.on("reportcomplete", () => {
  pivot.off("reportcomplete")
  columnChart()
})

flexmonster.on("beforetoolbarcreated", (toolbar) => {
  let tabs = toolbar.getTabs()
  toolbar.getTabs = function () {
    let indexOfChartTab = tabs.findIndex((tab) => tab.id == "fm-tab-charts")
    tabs[indexOfChartTab] = {
      id: "fm-tab-charts",
      title: "HighCharts",
      icon: this.icons.charts,
      menu: [
        {
          args: "column",
          handler: toggleChart,
          icon: this.icons.charts,
          title: "Column",
        },
      ],
    }
    tabs[tabs.length - 1].handler = toggleFullscreen;
    let indexOfGridTab = tabs.findIndex((tab) => tab.id == "fm-tab-grid")
    tabs[indexOfGridTab].handler =  showGrid;
    return tabs
  }

  function toggleFullscreen() {
    if (document.fullscreenElement) document.exitFullscreen()
    else document.getElementById("wrapper").requestFullscreen()
  }

  function toggleChart() {
      highchartsContainer.style.display = "block"
    window.dispatchEvent(new Event("resize"))
  }

  function showGrid() {
    highchartsContainer.style.display = "none"
    pivot.showGrid()
  }
})

function columnChart() {
  pivot.highcharts.getData(
    {
      type: "column",
    },
    function (chartConfig) {
      Highcharts.chart("highchartsContainer", chartConfig)
    },
    function (chartConfig) {
      Highcharts.chart("highchartsContainer", chartConfig)
    },
  )
}