Search code examples
javascriptjqueryhighchartsrcharts

Highcharts - how to access category of multiple axis of the point from tooltip


I have a chart with two categorized yAxis,the second one being linked to the first one (with the linkedTo option). I'd like to display the category of a point for both axis in the tooltip but I am unable to find a way to display it properly. I found a way to display all the categories of the main yAxis but no way to limit the output to only the category of a point, nor a way to display categories of the second axis.

Here is fiddle you can play with if you wish: http://jsfiddle.net/75444q2n/

PS: this code might not be very clean as it was generated from Rcharts (a package for R that make possible to get JS visualizations from R code).


Solution

  • As mentioned, you should use tooltip.formatter function (http://api.highcharts.com/highcharts#tooltip.formatter). In your case that would be

    "formatter": function () {
      return "I'd like to have first yAxis category here<br>" 
        + "<span style=\"font-weight: bold; color:" + this.series.color + "\">"
        + this.series.chart.yAxis[0].categories[this.y] + "</span><br/>"
        + "And second yAxis category here. <br/>"
        + "<span style=\"font-weight: bold; color:" + this.series.color + "\">"
        + this.series.chart.yAxis[1].categories[this.y] + "</span><br/>"
        + "x value: " + this.point.x + "<br/>"
      },
    

    (https://jsfiddle.net/75444q2n/3/)