JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>
JavaScript
new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
width: "100%",
height: 430,
toolbar: true,
report: {
"dataSource": {
"dataSourceType": "json",
"data": [
{
"Category": "cat1",
"Term": "term1",
"Frequency": 10
},
{
"Category": "cat1",
"Term": "term2",
"Frequency": 15
},
{
"Category": "cat2",
"Term": "term1",
"Frequency": 20
},
{
"Category": "cat2",
"Term": "term2",
"Frequency": 40
}
]
},
"slice": {
"rows": [
{
"uniqueName": "Term"
}
],
"columns": [
{
"uniqueName": "Category"
},
{
"uniqueName": "[Measures]"
}
],
"measures": [
{
"uniqueName": "Frequency",
"aggregation": "sum"
}
]
},
"options": {
"viewType": "charts"
}
}
});