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

JavaScript

const colors = ["#f768b8", "#ffc0d3", "#ffe198", "#90e9d7", "#44d0cd", "#00ccff", "#aaafe7", "#7a6da1", "#cb99cc"];
const memberColors = {};
let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      filename: "data/data.json"
    },
    slice: {
      rows: [{
        uniqueName: "Country",
        filter: {
          exclude: ["Australia"]
        }
      }],
      columns: [{
        uniqueName: "[Measures]",
      }],
      measures: [{
        uniqueName: "Price"
      }]
    },
    options: {
      viewType: "charts",
      configuratorButton: false,
      chart: {
        type: "pie"
      }
    }
  },
});

let pivot2 = new Flexmonster({
  container: "pivot-container2",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      filename: "data/data.json"
    },
    slice: {
      rows: [{
        uniqueName: "Country",
      }],
      columns: [{
        uniqueName: "[Measures]",
      }],
      measures: [{
        uniqueName: "Quantity"
      }]
    },
    options: {
      viewType: "charts",
      configuratorButton: false,
      chart: {
        type: "pie"
      }
    }
  },
});

pivot.on("reportcomplete", () => {
  const pieHierarchy = pivot.getReport().slice.rows[0].uniqueName;
  const pieMembers = pivot.getMembers(pieHierarchy).map(x => x.caption);


  pieMembers.forEach((member, index) => {
    const color = colors[index % colors.length];
    memberColors[member] = color;
  });
  pivot.customizeChartElement(customizeFunction);
  pivot2.on("reportcomplete", () => {
    pivot2.customizeChartElement(customizeFunction);
  });
});

function customizeFunction(element, data) {
  if (data.type == 'legend') {
    if (data.chartType === "pie") {
      element.querySelector(".fm-icon-display").style.backgroundColor = memberColors[data.label];
    }
  } else {
    if (data.rows && data.rows[0]) {
      if (element.querySelector('path')) {
    ...