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>
<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/drilldown.js"></script>
<table cellpadding="10">
<tr>
<td>
<div id="pivot-container"></div>
</td>
</tr>
<tr>
<td>
<div id="highcharts-container" style="width: 100%; height: 300px; display: inline-block;"></div>
</td>
</tr>
</table>
CSS
table {
width: 100%;
border-collapse: collapse;
}
JavaScript
var pivot = new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
report: {
dataSource: {
filename: "https://www.flexmonster.com/fm_uploads/2020/06/data-highcharts.json"
},
slice: {
rows: [{uniqueName: "Region"}],
columns: [{uniqueName: "Business Type"}, {uniqueName: "[Measures]"}],
measures: [{uniqueName: "Business Type"}]
},
options: {
viewType: "grid",
configuratorActive: false,
grid: {
type: "compact",
showHeaders: false
}
}
},
height: 280,
toolbar: true,
reportcomplete: function() {
pivot.off("reportcomplete");
createBarWithDrilldown();
}
});
function createBarWithDrilldown() {
pivot.highcharts.getData(
{
type: "bar",
withDrilldown: true
},
createAndUpdateChart,
createAndUpdateChart
);
}
function createAndUpdateChart(chartConfig) {
console.log(chartConfig);
let defaultTitleXAxis = "Region";
let drilldownTitleXAxis = "Business Type";
chartConfig.title.text = "With Drilldown";
chartConfig.chart.events = {
drilldown: function(e) {
this.xAxis[0].setTitle({ text: drilldownTitleXAxis });
},
drillup: function(e) {
this.xAxis[0].setTitle({ text: defaultTitleXAxis });
}
};
Highcharts.chart('highcharts-container', chartConfig);
}