JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js"></script>


<div id="pivot-container"></div>

CSS

/* Decrease the chart legend container size*/
.fm-chart-legend-container {
  max-height: 120px !important;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 600,
  toolbar: true,
  customizeChartElement: customizeChartElementFunction,
  report: {
  mapping: {
   Date : {
   type: "date string"
   }
  },
    dataSource: {
      filename: "data/retail-data.json"
    },
    slice: {
      expands: {
        expandAll: true
      },
      columns: [
         {
          uniqueName: "Date"
        }, {
          uniqueName: "Country"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [{
        uniqueName: "Price"
      }]
    },
    options: {
      viewType: "charts",
      chart: {
        type: "column"
      }
    }
  }
});

function customizeChartElementFunction(element, data) {
  if (data.type === "series") {
    element.querySelector("title").textContent = `${data.measure.uniqueName} : ${data.value}\n${data.label}` //Custom caption
  }
}