Charts: Is it possible to get axis categories in the Tooltip formatter?

Flow
1

I have a Column chart using categories on the x-axis, and I’d like to be able to access the categories in the Tooltip. (Basically, we’re using it as a histogram and I want to show the range of values encompassed by each bin in the tooltip.) I’ve managed to do this without too much trouble in a Highcharts jsfiddle with the following in the chart configuration:

        xAxis: {
            categories: [1, 2, 3, 4, 5, 6]
,
            id: 'x-axis'
        },
        
        tooltip: {
            formatter: function() {
                var chart = $('#container').highcharts();
                var start = chart.get('x-axis').categories[this.point.x]
;
                var end = chart.get('x-axis').categories[this.point.x + 1]
;
                return '[' + start + ',' + end + ')';
            }
        },
...

In Vaadin, I’m passing this same formatter function to the Tooltip’s setFormatter method, and I’ve added the “x-axis” id to the axis configuration JSON manually (I didn’t see anything in the Java API to do this) and then called drawChart with the updated JSON string. However, I think I need to do something differently on line 8; trying to grab the highcharts object this way doesn’t seem to work in Vaadin Charts. I’m not very experienced with Javascript so I don’t really know where to look to find the highcharts object, or an alternate way to get to the xAxis categories. Any hints?

2

Hi Donald,

Regarding the missing API an easier workaround to add the id attribute would be to extends the XAxis class:

[code]
public class XAxisWithID extends XAxis {

private String id;

public String getId() {
    return id;
}

public void setId(String id) {
    this.id = id;
}

}
[/code]I’ve created a ticket for a definitive solution to the ID API: https://dev.vaadin.com/ticket/18511

Regarding on how to get the chart, I’ve found diferent alternatives:

  • If the tooltip is not shared you can use:
var chart = this.series.chart;
  • If the tooltip is shared you can use:
var chart = this.points[0]
.series.chart;
  • Or in both cases:

var chart = Highcharts.charts[0] ; (Highcharts.charts is an array containing the current chart objects in the page, although I’m not sure what the index will be in all the cases)

3

Also if you want to avoid setting the id and doing get(‘x-axis’), you can take a look at chart.axes array

And I think you should be using point.index as the category array index, because this.point.x is the category value which might be a string

        tooltip.setFormatter("function() { "
                + " var index = this.point.index; "
                + " var chart = this.series.chart; "
                + " var start = chart.axes[0]
.categories[index]
; "
                + " var end = chart.axes[0]
.categories[index + 1]
; "
                + " return '[' + start + ',' + end + ')'; }");

Hope it helped!

4

The chart.axes array is exactly what I was looking for! The only reason I really wanted to set the ID was because I thought I would need it to get the axis object from the chart in the formatter function. It might be helpful to add that to the API documentation. (The Tooltip docs do list some properties that are accessible, but not these ones.)

Thanks so much for your help!

5

Just noticed there are also the following properties:

  • chart.xAxes (array)
  • chart.yAxes (array)
  • series.xAxis (single axis, associated to the series)
  • series.yAxis (single axis, associated to the series)

this.series.xAxis might be handy in your case