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

#fm-pivot-view .fm-axis .special-label {
  fill: coral;
  outline: 1px dashed coral;
  outline-offset: 2px;
  font-weight: bold;
}

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

// Specific labels to style:
const specialLabels = ["2002", "2003"];

pivot.on('afterchartdraw', function() {
  // Get the chart labels:
  let labels = document.getElementsByClassName('fm-label');
  let labelsArray = [...labels];

  for (let i = 0; i < labelsArray.length; i++) {
    let label = labelsArray[i];
    if (specialLabels.includes(label.innerHTML)) {
     ...