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/",
  toolbar: true,
  report: {
    dataSource: {
      type: "json",
      data: getData(),
      mapping: {
        "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"
        }
      },
    },
    "slice": {
      "rows": [{
        "uniqueName": "Order Date.Year",
        "filter": {
          "members": [
            "order date.year.[2001]",
            "order date.year.[2003]",
            "order date.year.[2000]",
            "order date.year.[2002]",
            "order date.year.[2004]"
          ]
        }
      }],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
          "uniqueName": "Orders",
          "aggregation": "sum"
        },
        {
          "uniqueName": "Revenue",
          "formula": "sum(\"Amount\") * sum(\"Price\")",
          "individual": true,
          "caption": "Revenue",
          "format": "currency"
        }
      ]
    },
    "options": {
      "viewType": "charts",
      "chart": {
        "type": "line"
      }
    },
  },
  width: "100%",
  height: 500
});

pivot.on('afterchartdraw', function() {
  if (pivot.getOptions().chart.type === "line" || pivot.getOptions().chart.type === "column_line") {
    // Get chart circles:
    let circles = document.getElementsByClassName('fm-circle');
    let circlesArray = [...circles];
    
    for (let i = 0; i < circlesArray.length; i++) {
      let circle = circlesArray[i];
     ...