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

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/radar.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Kelly.js"></script>

<div id="pivot-container"></div>
<div id="amcharts-container"></div>

CSS

#amcharts-container {
  position: relative;
  background: white;
}

JavaScript

let chart;
let root;
let fmHeight = 700;
let currentChartType;


let pivot = new Flexmonster({
  beforetoolbarcreated: customizeToolbar,
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: fmHeight,
  toolbar: true,
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  afterchartdraw: function() {
    if (root) root.dispose();
    let chartPosition = getDocumentOffsetPosition(document.querySelector(".fm-charts-view > div > div.fm-ui-element.fm-ui.fm-ui-container.fm-chart"));
    console.log(chartPosition)
    let chartContiner = document.querySelector("#amcharts-container")
    chartContiner.style["z-index"] = 1;
    chartContiner.style.height = (fmHeight - chartPosition.top) + "px";
    chartContiner.style.top = (chartPosition.top - fmHeight) + "px";
    chartContiner.style.left = (chartPosition.left) + "px";
    createChart();
  },
  report: {
    dataSource: {
      filename: "data/data.json"
    },
    slice: {
      rows: [{
        uniqueName: "Country"
      }],
      measures: [{
        uniqueName: "Price"
      }]
    },
    options: {
      viewType: "charts",
    }
  }
});

function customizeToolbar(toolbar) {
  var tabs = toolbar.getTabs();
  toolbar.getTabs = function() {
    tabs = tabs.map(tab => {
      if (tab.id === "fm-tab-grid") {
        tab.handler = () => {
          pivot.showGrid();
          let chartContiner = document.querySelector("#amcharts-container")
          chartContiner.style["z-index"] = -1;

        }
        return tab;
      }
      if (tab.id === "fm-tab-charts") {
        tab.menu = [];
        tab.menu.push({
          id: "fm-tab-newtab",
          title: "Radar Chart",
          handler: () => {
            currentChartType = "radar";
            pivot.showCharts();
          },
          icon: this.icons.charts
        })
        return tab;
      } else return tab;
    });
    return tabs;
  }
}

function createChart() {
  pivot.amcharts.getData({},...