hsbr13
hsbr13

Reputation: 431

highcharts drilldown click listener for short column bars problem

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?

problem is: enter image description here

what I want is that the area I mentioned to be all clickable: enter image description here

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

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

It can be done in a few steps:

  1. 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');
    
             }
           })
         }
       }
     }
    },
    
  2. 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

Related Questions