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>

<div id="pivot-container"></div><br>
<div id="highcharts-container" style="width: 100%; height: 300px; display: inline-block;"></div><br>
<div class="table-container">
  <div id="chart-table-container"></div>
</div>

CSS

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 50px;
}

.table-container{
  margin: 0 auto;
  width: 482px;
  height: 150px;
}

#chart-table-container #fm-grid-view .fm-cell, #fm-data-sheet {
border: 0px !important;
}

#chart-table-container #fm-pivot-view{
   border: 1px solid black !important;
}

#chart-table-container #fm-cols-sheet .fm-header{
  text-align: center;
  padding-right: 0;
  text-transform: none;
  background-color: transparent;
  min-width: 480px !important;
}

#chart-table-container #fm-pivot-view .fm-grid-layout .fm-resize-handles{
  display: none !important;
}

#chart-table-container #fm-pivot-view .fm-grid-layout .fm-sheet-selection-canvas{
  display: none !important;
}

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  report: {
    dataSource: {
      filename: "https://www.flexmonster.com/fm_uploads/2020/06/data-highcharts.json"
    },
    slice: {
      rows: [{
        uniqueName: "Region"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Quantity"
      }, {
        uniqueName: "Price",
        format: "currency"
      }, {
        uniqueName: "Discount",
        format: "currency"
      }],
    },
    options: {
      grid: {
        showHeaders: false
      }
    },
    formats: [{
      name: "",
      thousandsSeparator: " ",
      decimalSeparator: ".",
      decimalPlaces: 2,
      maxDecimalPlaces: -1,
      maxSymbols: 20,
      currencySymbol: "",
      currencySymbolAlign: "left",
      nullValue: "",
      infinityValue: "Infinity",
      divideByZeroValue: "Infinity",
      textAlign: "right",
      isPercent: false
    }, {
      name: "currency",
      thousandsSeparator: " ",
      decimalSeparator: ".",
      decimalPlaces: 2,
      maxDecimalPlaces: -1,
      maxSymbols: 20,
      currencySymbol: "$",
      currencySymbolAlign: "left",
      nullValue: "",
      infinityValue: "Infinity",
      divideByZeroValue: "Infinity",
      textAlign: "right",
      isPercent: false
    }]
  },
  height: 280,
  toolbar: true,
  reportcomplete: function() {
    pivot.off("reportcomplete");
    createChartWithBothAxesNumeric();
  }
});



function createChartWithBothAxesNumeric() {
  pivot.highcharts.getData({
      type: "spline",
      valuesOnly: true,
      slice: {
        rows: [{
          uniqueName: "Business Type"
        }],
        columns: [{
          uniqueName: "[Measures]"
        }],
        measures: [{
          uniqueName: "Quantity"
        }, {
          uniqueName: "Price"
        }],
        sorting:...