Reputation: 431
In Highcharts drilldown if you have a very tall and a very short column, clicking on the short one to open the drilldown is so hard (if the short value is zero it is absolutely impossible). Is there any way to open the drilldown on clicking on the whole column and empty space above columns?
what I want is that the area I mentioned to be all clickable:
If needed, the drilldown part of the config is this:
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
color: '#000',
cursor: "initial",
},
series: nat_drill_downs,
drillUpButton: {
theme: {
r: 5,
fill: '#0CB0B0',
stroke: '#0CB0B0',
states: {
hover: {
fill: 'url(#coloured-arrow)',
}
},
style: {
color: "#fff",
direction: "ltr"
},
},
},
},
Upvotes: 0
Views: 40
Reputation: 11633
It can be done in a few steps:
Add a transparent dummy series (which will fill this area above the small column) and add the logic to trigger drilldown those invisible points:
{
data: [200, 200, 200, 200],
color: 'transparent',
linkedTo: 'browsers',
point: {
events: {
click(event) {
this.series.linkedParent.data.forEach(d => {
if (d.category === this.category && d.applyOptions) {
Highcharts.fireEvent(d, 'click');
}
})
}
}
}
},
Disable tooltip for the dummy series:
tooltip: {
formatter(tooltip) {
let series = this.series;
if (series.linkedParent) {
return false
} else {
return tooltip.defaultFormatter.call(this, tooltip);
}
}
},
Final demo: https://jsfiddle.net/BlackLabel/6e9vzhcL/
API: https://api.highcharts.com/highcharts/series.line.point.events
API: https://api.highcharts.com/highcharts/tooltip.formatter
Upvotes: 1