highcharts 3d scatter chart: displaying categories

Question

I am using Highcharts and I would like this chart to display categories on axis z. This is what I have now: JSFiddle

zAxis: {
            min: 1,
            max: 3,
            categories: ['Apples', 'Bananas', 'Oranges'],
            minorTickInterval: 1,
            title: 'source'
        },

As you can see I have 3 categories. I would like them to be displayed in the same way as the numbers on the x and y axes. Any ideas?

Doesn't look like it's supported: http://forum.highcharts.com/highcharts-usage/3d-scatter-z-axis-lables-t29261/ — Mark, Oct 08 '14 at 16:33
Indeed, right not zAxis isn't real axis. But for sure will be one day :) — Paweł Fus, Oct 09 '14 at 11:27

score 2 · Answer 1 · answered Dec 22 '16 at 12:21

Just get set categories for every axis in your config and get it from chart.zAxis[0].options.categories for z axis. Then you can get indexes which are in this.point.x this.point.y and this.point.z and return a formatted tooltip containing categories names.

Code:

tooltip: {
  formatter: function() {
    const chart = this.point.series.chart,
      catsX = chart.xAxis[0].categories,
      catsY = chart.yAxis[0].categories,
      catsZ = chart.zAxis[0].options.categories;
    return `X: ${catsX[this.point.x]}<br/>
        Y: ${catsY[this.point.y]}<br/>
        Z: ${catsZ[this.point.z]}`;
  }
},

Live example: https://jsfiddle.net/p86a7y0g/

Api reference: http://api.highcharts.com/highcharts/tooltip.formatter

Output:

highcharts 3d scatter chart: displaying categories

1 Answers1