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>

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      dataSourceType: "json",
      data: getData()
    },
    slice: {
      rows: [{
        uniqueName: "Country"
      }, {
        uniqueName: "Category"
      }, {
        uniqueName: "[Measures]"
      }],
      columns: [{
        uniqueName: "Color"
      }],
      measures: [{
        uniqueName: "Price"
      }, {
        uniqueName: "Quantity"
      }],
    },
    options: {
      viewType: "charts",
      configuratorActive: false
    }
  },
  width: "100%",
  height: 600,
  toolbar: true
});
pivot.on('afterchartdraw', function() {
  var ticks = document.querySelectorAll("#pivot-container #fm-yAxis .tick text");
  ticks.forEach(function(tick) {
  	var value = tick.innerHTML.replace("M", '000000');
    value = parseInt(value.replace(/[\s,]/g, ''));
    if (value > 999999999) {
      tick.innerHTML = Math.round(value / 1000000000) + "B";
    } else if (value > 999999) {
      tick.innerHTML = Math.round(value / 1000000) + "M";
    } else if (value > 999) {
      tick.innerHTML = Math.round(value / 1000) + "K";
    }
  })
});

function getData() {
  return [{
    "Category": "Accessories",
    "Size": "262 oz",
    "Color": "red",
    "Destination": "Australia",
    "Business Type": "Specialty Bike Shop",
    "Country": "Australia",
    "Price": 50000,
    "Quantity": 225,
    "Discount": 23
  }, {
    "Category": "Accessories",
    "Size": "214 oz",
    "Color": "yellow",
    "Destination": "Canada",
    "Business Type": "Specialty Bike Shop",
    "Country": "Canada",
    "Price": 502,
    "Quantity": 90,
    "Discount": 17
  }, {
    "Category": "Components",
    "Size": "235 oz",
    "Color": "green",
    "Destination": "Australia",
    "Business Type": "Warehouse",
    "Country": "Australia",
    "Price": 551,
    "Quantity": 1950,
    "Discount": 51
  }, {
    "Category": "Components",
    "Size": "307...