JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.flexmonster.com/2.9.2/flexmonster.js"></script>
<div id="pivotContainer"></div>
JavaScript
let jsonData = [{
"net_sales": 100,
"day": "Wed"
},
{
"net_sales": 180,
"day": "Fri"
},
{
"net_sales": 200,
"day": "Sun"
},
{
"net_sales": 300,
"day": "Sat"
},
{
"net_sales": 400,
"day": "Mon"
},
{
"net_sales": 500,
"day": "Tue"
},
{
"net_sales": 600,
"day": "Thu"
},
]
var pivot = new Flexmonster({
container: "pivotContainer",
componentFolder: "https://cdn.flexmonster.com/",
licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
toolbar: true,
height: 350,
report: {
dataSource: {
data: jsonData,
mapping: {
net_sales: {
caption: 'Count',
type: "number",
}
}
},
options: {
caseSensitiveMembers: true,
},
slice: {
"rows": [{
"uniqueName": "day",
"sortOrder": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
{
"uniqueName": "[Measures]"
}
],
"measures": [{
"uniqueName": "net_sales",
}]
}
},
reportcomplete: function() {},
});