CODEWITHSUNDEEP
javascriptjqueryhighcharts3dz-axis
KaroCodes
KaroCodes

Reputation: 256

highcharts 3d scatter chart: displaying categories

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?

Upvotes: 2

Views: 829

Answers (1)

stpoa
stpoa

Reputation: 5573

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: enter image description here

Upvotes: 2

Related Questions