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>
<div id="pivot-container"></div>

CSS

/* Charts Style  */

.fm-charts-color-1 {
  fill: #ffa600 !important;
}

.fm-charts-color-2 {
  fill: #7eae26 !important;
}

.fm-charts-color-3 {
  fill: #00a45a !important;
}

.fm-charts-color-4 {
  fill: #df3800 !important;
}

.fm-charts-color-5 {
  fill: #e95800 !important;
}

.fm-charts-color-6 {
  fill: #ffa600 !important;
}

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 500,
  toolbar: true,
  report: {
    dataSource: {
      data: getData()
    },
    options: {
      viewType: "charts",
      chart: {
        type: "column"
      },
      configuratorActive: false
    },
    "slice": {
      "rows": [{
        "uniqueName": "Order Date.Month"
      }],
      "columns": [{
          "uniqueName": "City",
          "filter": {
            "measure": {
              "uniqueName": "Orders",
              "aggregation": "sum"
            },
            "query": {
              "top": 5
            }
          }
        },
        {
          "uniqueName": "[Measures]"
        }
      ],
      "measures": [{
        "uniqueName": "Orders",
        "aggregation": "sum"
      }]
    }
  }
});

pivot.on("afterchartdraw", () => {
   var legendRow = document.querySelector('#fm-chart-legend .fm-chart-legend-container table tr');
   var fieldTitle = legendRow.insertCell(0);
   fieldTitle.innerHTML = pivot.getReport().slice.columns[0].uniqueName;
});



function getData() {
  return [{
      "Age": {
        "type": "number"
      },
      "Order Date": {
        "type": "date"
      },
      "City": {
        "type": "string"
      },
      "Amount": {
        "type": "number"
      },
      "Price": {
        "type": "number"
      },
      "Payment Type": {
        "type": "string"
      },
      "Referring Site": {
        "type": "string"
      },
      "Orders": {
        "type": "number"
      },
      "Name": {
        "type": "string"
      }
    },

    {
      "Age": 59,
      "Order Date": "9/28/2007",
      "City": "Prague",
      "Amount": 510,
      "Price": 60,
      "Payment Type": "Bitcoin",
      "Referring Site": "Facebook",
      "Orders": 871,
      "Name": "Eleanor"
    },
    {
      "Age": 53,
      "Order Date": "9/29/2005",
      "City": "Prague",
      "Amount": 132,
     ...