JSFiddle - React, Tailwind, and code Playground

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>
<link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/green/flexmonster.min.css" />
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="app">
  <div ref="pivotContainer"></div>
  <div id="highcharts-container"></div>
</div>

Vue

new Vue({
  el: "#app",
  data () {
    return {
      report: null
    }
  },
  mounted () {
    var report = new Flexmonster({
      container: this.$refs.pivotContainer,
      componentFolder: 'https://cdn.flexmonster.com/',
      licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
      toolbar: true, 
      report: {
        dataSource: {
            dataSourceType: "json",
      data: getData()
        },
        slice: {
        "rows": [
            {
                "uniqueName": "Location"
            }
        ],
        "columns": [
            {
                "uniqueName": "[Measures]"
            },
            {
                "uniqueName": "Period",
                "filter": {
                    "members": [
                        "period.[2017]",
                        "period.[2016]",
                        "period.[2015]"
                    ]
                }
            }
        ],
        "measures": [
            {
                "uniqueName": "First Tooltip",
                "aggregation": "average",
                "format": "-15xrw9ur8dcox"
            }
        ]
    },
    "formats": [
        {
            "name": "-15xrw9ur8dcox",
            "decimalPlaces": 2,
            "currencySymbol": "%",
            "positiveCurrencyFormat": "1$",
            "isPercent": false
        }
    ],
    "version": "2.8.25",
    "creationDate": "2021-02-03T15:22:49.633Z"
},
    reportcomplete: function() {
    report.off("reportcomplete");
    areaChart();
  }
    });
    
    function areaChart() {
    report.highcharts.getData({
      type: "area"
    },
    function(chartConfig) {
      Highcharts.chart('highcharts-container', chartConfig);
    },
  );
}

function getData() {
  return [
 {
   "Location": "Afghanistan",
   "Period": 2017,
   "Dim1": "Total",
   "First Tooltip": 37.75,
   "FIELD5": ""
 },
 {
   "Location": "Afghanistan",
   "Period": 2016,
   "Dim1": "Total",
   "First Tooltip": 37.67,
   "FIELD5": ""
...