Search code examples
javascripthighchartsreact-highcharts

Highcharts: Conditional tooltip based on multiple checking chart is drilldown or not


 formatter: function() {
                           return (this.hasOwnProperty("drilldown") ? 'Count of user' : 'count of number' + this.point.y);
                         }
                   },

I just want to change tooltip text based on drilldown condition.

I have set Xaxis name by add event in chart and it's working So what should i do for tooltip ??

events: {drilldown: function(e) {
                              this.xAxis[0].setTitle({
                                text: 'Accounts'
                              });
                            },
                            drillup: function(e) {
                              this.xAxis[0].setTitle({
                                text: 'Source'
                              });
                            }
                          }

Solution

  • You can check ddDupes chart's property in tooltip's formatter. For example:

      tooltip: {
        formatter: function() {
          const chart = this.series.chart;
          if (chart.ddDupes && chart.ddDupes.length) {
            return 'Drilled down';
          }
    
          return 'Not drilled down';
        }
      }
    

    Live demo: https://jsfiddle.net/BlackLabel/7abL0en4/

    API Reference: https://api.highcharts.com/highcharts/tooltip.formatter