JSFiddle - React, Tailwind, and code Playground

Integration with Highcharts

by Flexmonster Pivot Table

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/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="pivot-container"></div>

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

CSS

#chartContainer {
  margin: 20px;
}


html,
body {
    font-family: sans-serif;
    font-size: 12px;
}

h2 {
  text-align: center;
}

p {
  font-size: 15px;
  line-height: 1.5;
  padding-right: 10px;
  padding-left: 10px;
}

a {
  color: #00a45a;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
    font-size: 105%;
    color: #DF3800;
    background-color: #f5f5f5;
    padding: 1px 4px;
    font-family: monospace !important;
    border-radius: 4px;
}

ul.styledList {
    list-style: none;
    counter-reset: item;
    font-size: 15px;
    line-height: 1.5;
    padding-left: 25px;
}

ul.styledList > li::before {
    content: "\2022";
    display: block;
    font-weight: bold;
    color: #df3800;
    position: absolute;
    margin: 0;
    margin-left: 9px;
    left: 0;
}

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  height: 350,
  toolbar: true,
  report: {
    dataSource: {
      data: getJsonData(),
    },
    slice: {
      rows: [
        {
          uniqueName: "Prospect Status",
        },
      ],
      columns: [
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Primary Email",
          aggregation: "sum",
        },
        {
          uniqueName: "Prospect Status Stage Order",
          aggregation: "min",
        },
      ],
      sorting: {
        column: {
          type: "asc",
          tuple: [],
          measure: {
            uniqueName: "Prospect Status Stage Order",
            aggregation: "min",
          },
        },
      },
    },
  },
  reportcomplete: function () {
    pivot.off("reportcomplete");
    createChart();
  },
    reportchange: function () {
    createChart();
  },
});


function createChart() {
  pivot.highcharts.getData({
    type: "funnel"
  },
    function (chartConfig) {
      applyConfigs(chartConfig);
      Highcharts.chart('highcharts-container', chartConfig);
    },
    function (chartConfig) {
      applyConfigs(chartConfig);
      Highcharts.chart('highcharts-container', chartConfig);
    }
  );
}

function applyConfigs(config) {
  config.chart = config.chart || {};
  config.chart.style = {
    fontSize: "14px",
    fontFamily: "Arial, sans-serif"
  };

  config.colors = ["#b1cfb7", "#efd9aa", "#efba93", "#b3d9e1", "#ffccc3", "#d7c2d8"];

  config.plotOptions = config.plotOptions || {};
  config.plotOptions.funnel = {
    dataLabels: {
      enabled: true,
      inside: true,
      style: {
        fontSize: "14px"
      }
    },
  };
}



function getJsonData() {
  return [
    {
 ...