1

I would like to be able to use the values printed on Highcharts x and y axes when the chart renders in another part of my app, so for example an array of number from 0 to n.

I am using highcharts-react-official - I can't find any documentation on methods that return the values as they are printed exactly on the screen.

Is this possible?

Update

With this code I can return an array of numbers that represent the tick values on the y axis:

const options: Highcharts.Options = {
yAxis: {
  labels: {
    formatter(): string {
      console.log('YAXIS', Object.keys(this.axis.ticks)
      }
    }
  }
}

Although the array includes a negative number which I cannot see in the chart axis itself.

The same trick does not work for the x axis.

Is there a cleaner approach do getting the correct result?

Update 2

Following the solution below I finally got what I was looking for: This does not work as you would expect:

const res = this.yAxis
  .map((axis) => axis.ticks)
  .map((axisTicks) => Highcharts.objectEach(axisTicks, (tick) => tick.label.textStr));
console.log(res); // undefined;

However this does:

const yAxisVals: string[][] = [];
const axisTicks = this.yAxis.map((axis) => axis.ticks);
axisTicks.forEach((item, idx) => {
  yAxisVals[idx] = [];
  Highcharts.objectEach(item, (tick) => yAxisVals[idx].push(tick.label.textStr));
});
console.log(yAxisVals);
Mr. Robot
  • 1,334
  • 6
  • 27
  • 79

1 Answers1

0

You can use render event and get the values by Axis.tickPositions property:

chart: {
  events: {
    render: function() {
      var xAxisTickPositions = this.xAxis[0].tickPositions,
        yAxisTickPositions = this.yAxis[0].tickPositions;

      console.log(xAxisTickPositions, yAxisTickPositions);
    }
  }
}

Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4960/

API Reference:

https://api.highcharts.com/highmaps/chart.events.render

https://api.highcharts.com/class-reference/Highcharts.Axis#tickPositions

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • Thank you very much for your answer - in my case this doesn't quite work - I am getting 4 y axes returned when there are only three shown (I am combining 6 series in to 3 axis as each pair of axis share the same unit), and the returned array also includes negative ticks which have been removed from the chart. In the case of the x axis, the array returned is an array of numbers when the chart is displaying categories. I know I could just use the categories provided to the chart, but is there a way to return exactly what's shown as label values? Thanks again. – Mr. Robot Apr 20 '20 at 08:23
  • Hi @Mr. Robot, Yes, you can get the labels. Please check this example: http://jsfiddle.net/BlackLabel/6m4e8x0y/4969/ – ppotaczek Apr 20 '20 at 08:27
  • Thank you - this has taken me a while to work out but FYI I have updated my question with my final solution – Mr. Robot Apr 20 '20 at 16:09