JSFiddle - React, Tailwind, and code Playground
by PavithraG
HTML
<script src="https://techorc.in/flexmonster_V2.6.14.js"></script>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>
JavaScript
var pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
width: "100%",
height: 430,
toolbar: true,
report: {
"slice": {
"measures": [
{
"aggregation": "percent",
"uniqueName": "Amount"
}
],
"rows": [
{
"sort": "unsorted",
"uniqueName": "Name"
}
],
"expands": {
"expandAll": true
},
"columns": [
{
"uniqueName": "[Measures]"
}
]
},
"dataSource": {
"dataSourceType": "json",
"data": [
{
"Name": {
"type": "string"
},
"Amount": {
"type": "number"
}
},
{
"Name": "Row Data 1",
"Amount": 28000000
},
{
"Name": "Row Data 2",
"Amount": 28000000
},
{
"Name": "Row Data 3",
"Amount": 9750000
},
{
"Name": "Row Data 4",
"Amount": 56500000
},
{
"Name": "Row Data 5",
"Amount": 35000000
}
]
},
"options": {
"showAggregationLabels": false,
"viewType":"charts",
"chart": {
"type":"stacked_column",
"showDataLabels": false,
"showOneMeasureSelection": false,
"showFilter": true
},
"configuratorButton": false,
"defaultHierarchySortName": "unsorted",
"datePattern": "MMM d, yyyy"
}
}
});