JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://s3.amazonaws.com/flexmonster/2.3/flexmonster.js"></script>
<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

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  height: 600,
  report: {
    dataSource: {
      dataSourceType: "csv",
      filename: "data/data.csv"
    },
    slice: {
      rows: [{
        uniqueName: "Country"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price"
      }],
      sorting: {
        column: {
          type: "desc",
          tuple: [],
          measure: "Price"
        }
      }
    },
    options: {
      viewType: "charts",
      chart: {
        type: "pie",
        title: "Title"
      }
    }
  },
  toolbar: true,
  reportcomplete: function() {
    pivot.getData({
        slice: {
          rows: [{
            uniqueName: "Country"
          }],
          columns: [{
            uniqueName: "[Measures]"
          }],
          measures: [{
            uniqueName: "Price"
          }],
          sorting: {
            column: {
              type: "desc",
              tuple: [],
              measure: "Price"
            }
          }
        }
      },
      updateTitle,
      updateTitle,
    );
  }
});


function updateTitle(rawData) {
  let options = pivot.getOptions();
  options.chart.title = "Grand Total: $" + rawData.data[0]["v0"];
  pivot.setOptions(options);
  pivot.refresh()
}