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>
<script src="https://cdn.flexmonster.com/lib/flexmonster.highcharts.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

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

<div id="chartContainer"></div>

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  toolbar: true,
  height: 260,
  report: {
    dataSource: {
      data: getData()
    },
    options: {
      grid: {
        type: "flat"
      }
    },
  },
  reportcomplete: function() {
    pivot.off("reportcomplete");
    createChart();
  }
});

function prepareDataFunction(rawData) {
  let data = [];
  for (let i = 0; i < rawData.data.length; i++) {
    let record = rawData.data[i];
    if (record.r0 == undefined || record.c0 == undefined) continue;
    let from = record.r0;
    let to = record.c0;
    let value = record.v0;
    data.push([from, to, value]);
  }
  return data;
}

function createChart() {
  pivot.highcharts.getData({
    slice: {
      rows: [{
          uniqueName: "from"
        },
      ],
      columns: [{
        uniqueName: "to"
      }, {
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "value",
        aggregation: "sum"
      }, ]
    },
    prepareDataFunction: function(data, options) {
      let output = {
        chart: {
          type: 'sankey'
        },
        title: {
          text: 'Sankey Chart'
        },
        series: [{
          type: 'sankey',
          name: 'Sankey demo series',
          nodes: [{
              id: data.data[1].r0,
              color: '#009c00'
            },
            {
              id: data.data[2].r0,
              color: '#1a8dff'
            },
            {
              id: data.data[3].r0,
              color: '#ffa500'
            },
          ],
          data: prepareDataFunction(data)
        }]
      }
      return output;
    }
  }, function(chartConfig) {
    Highcharts.chart('chartContainer', chartConfig);
  }, function(chartConfig) {
    Highcharts.chart('chartContainer', chartConfig);
  });
}


function getData() {
  return [
    ["from", "to", "value"],
  ...