JSFiddle - React, Tailwind, and code Playground

by Ravi A

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: "csv",
      filename: "data/data.csv"
    },
    options: {
      viewType: "charts",
      chart: {
        type: "column"
      },
      configuratorActive: false
    },
    slice: {
      rows: [{
        uniqueName: "Country"
      }, {
        uniqueName: "Category"
      }, {
        uniqueName: "[Measures]"
      }],
      columns: [{
        uniqueName: "Color"
      }],
      measures: [{
        uniqueName: "Price"
      }, {
        uniqueName: "Quantity"
      }],
    }

  },
  width: "100%",
  height: 370
});
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";
    }
  })
});