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/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>

<div id="highchartsContainer"></div>
<div id="pivotContainer" style="padding-bottom: 30px;"></div>

JavaScript

var pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  toolbar: true,
  report: {
    dataSource: {
      data: getData()
    }
  }
});

pivot.on("reportcomplete", function() {
  pivot.off("reportcomplete");
  createChart();
});

function createChart() {
  flexmonster.highcharts.getData({
      prepareDataFunction: function(data, options) {
        var output = {
          chart: {
            type: 'pie',
            options3d: {
              enabled: true,
              alpha: 45
            }
          },
          plotOptions: {
            pie: {
              innerSize: 100,
              depth: 45
            }
          },
          title: {
            text: "Donut chart"
          },
          yAxis: {
            title: {
              text: data.meta.r0Name
            }
          },
          series: [{
            name: data.meta.v0Name,
            data: []
          }, {
            type: "errorbar",
            name: data.meta.v0Name + " error",
            data: []
          }]
        }

        for (var i = 0; i < data.data.length; i++) {
          var record = data.data[i];
          if (record["r0"] == undefined || record["r1"] != undefined) continue;
          output.series[0].data.push([record["r0"], record["v0"]]);
        }

        return output;
      }
    },
    function(data) {
      Highcharts.chart('highchartsContainer', data);
      //$("#highcharts-container").highcharts(data);
    },
    function(data) {
      Highcharts.chart('highchartsContainer', data);
      //$("#highcharts-container").highcharts(data);
    }
  );
}

function getData() {
  return [{
      "Color": {
        "type": "string"
      },
      "M": {
        "type": "month",
        "caption": "Month"
      },
      "W": {
        "type": "weekday",
        "caption": "Week Day"
      },
      "Country": {
        "type": "level",
  ...