Breadcrumbs in Highcharts large treemap [closed] - highcharts

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have a requirement to show breadcrumbs in High charts large tree map as we drill down the level.
As we drill down, need to show the name in the breadcrumbs and user should be able to navigate.
Something similar to the Breadcrumbs in highchart-treemap
But I could not find any solution. Let me know how to achieve this

Answer 1

Drilldown events are not available for a treemap series. Instead you can use point click event for displaying/destroying breadcrumb element - a label.
Disable drill up button:
Highcharts.seriesTypes.treemap.prototype.showDrillUpButton = function () {
this.drillUpButton = {
destroy: function () {}
}
}
Function for creating a breadcrumb element can look like this:
function makeNode(id, name, series, prev) {
const chart = series.chart
const node = {
id,
name
}
let x = chart.plotLeft
if (prev) {
const { width, height, y } = prev.element.getBBox()
x = width + prev.x + 10
node.prev = prev
prev.next = node
prev.element.attr({
anchorX: x,
anchorY: chart.plotTop - 20 + height / 2
})
}
node.destroyNext = function () {
const next = this.next
if (next) {
next.destroyNext()
next.element.destroy()
delete this.next
delete chart.bread[next.id]
}
}
const element = node.element = chart.renderer.label(name, x, chart.plotTop - 20, 'callout').attr({
fill: '#FFFFEF',
stroke: 'gray',
'stroke-width': 2,
padding: 5,
r: 5,
zIndex: 10
}).add()
element.on('click', () => {
node.destroyNext()
node.element.attr({
anchorX: undefined,
anchorY: undefined
})
if (chart.series[0].rootNode !== '') series.drillToNode(id)
})
node.x = x
return node
}
Call that function on chart load:
chart: {
events: {
load: function() {
this.bread = {
'': makeNode('', this.series[0].name, this.series[0])
}
}
}
},
and on point click event:
plotOptions: {
series: {
point: {
events: {
click: function(e) {
const hasChildren = !!this.node.childrenTotal
if (hasChildren) {
const bread = this.series.chart.bread
bread[this.id] = makeNode(this.id, this.name, this.series, bread[this.node.parent])
}
}
}
}
}
},
Example and output
http://jsfiddle.net/z0zc1btk/