JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
Highcharts.chart('container', {
chart: {
// type: 'treemap',
events: {
drilldown(e){
let drilldown_point = e.point;
let chart = this;
//api call to get drill down data - hardcoding sample data for now
chart.showLoading('Loading ...');
let sub_series_data = [
{
"name": "2009",
"y": 6
},
{
"name": "2010",
"y": 3
},
{
"name": "2011",
"y": 7
},
{
"name": "2012",
"y": 17
},
{
"name": "2013",
"y": 12
}
];
//create series for sub treemap
let sub_series = {
type: 'line',
name: 'Line Chart',
colorByPoint: true,
data: sub_series_data,
};
//Update title and subtitle of subchart
chart.update({
yAxis: {
title: {
text: 'Count'
}
},
xAxis: {
title: {
text: 'Year'
},
categories: [2009,2010,2011,2012,2013]
}
});
chart.addSeriesAsDrilldown(drilldown_point, sub_series);
chart.applyDrilldown();
chart.hideLoading();
}
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
animationLimit: 1000,
levels: [{
level: 1,
borderWidth: 2
}],
data: [
{
"name": "IBM",
"value": 870,
"drilldown": true
},
{
"name": "GOOGLE",
"value": 802,
"drilldown": true
},
{
"name": "SAMSUNG",
"value": 613,
...