JSFiddle - React, Tailwind, and code Playground

by Dongor7

HTML

<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/4.2.2/highcharts.js"></script>
<div>

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

<button id="addPie">Edit Chart</button>
<div style="margin-top: 30px; padding-bottom: 25px;" id="highcharts-pie-first-container"></div>

</div>

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  height: 300,
  toolbar: true,
  report: {
    dataSource: {
      data: getData()
    },
    slice: {
      "rows": [{
        "uniqueName": "Date.Month"
      }],
      "measures": [{
          "uniqueName": "Requests",
          "aggregation": "sum"
        },
      ],
    },
    "options": {
      "showHeaders": false
    }
  },
  reportcomplete: function() {
    pivot.off("reportcomplete");
    createPieChart('highcharts-pie-first-container', pivot.getReport().slice );
  }
});

function createPieChart(id, slice) {
  pivot.highcharts.getData({
      type: "pie",
      slice,
    },
    function(data) {
      data.chart.style = {
        fontFamily: 'SERIF TYPEFACE'
      };
      data.title = {
        style: {
          fontSize: '16px',
          fontWeight: 'bold',
          textTransform: 'uppercase'
        }
      };
      data.title.text = 'Customer Satisfaction';
      Highcharts.setOptions({
        colors: ['#a9aaaa', '#ffa836', '#ff3b1d', '#00b370', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
      });

      Highcharts.chart(id, data);
    },
    function(data) {
      data.chart.style = {
        fontFamily: 'SERIF TYPEFACE'
      };
      data.title = {
        style: {
          fontSize: '16px',
          fontWeight: 'bold',
          textTransform: 'uppercase'
        }
      };
      data.title.text = 'Customer Satisfaction';
      Highcharts.setOptions({
        colors: ['#a9aaaa', '#ffa836', '#ff3b1d', '#00b370', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
      });
      Highcharts.chart(id, data);
    }
  );
}

function getData() {
  return [{
      "Customer Satisfaction": "Satisfied",
      "Average Time to Solve An Issue": "Less than 1 hour",
      "Revenue": 455,
      "Support Cost": 250,
      "Requests": 55,
      "Date": "2015-02-14T07:34:08",
    ...