How to display xAxis labels in a specific format with react-highcharts

[bfang711]

Assume the series has 12,000 data points, however I only need to give 12 xaxis labels in total. by giving a tickInterval = 12K/12 = 1000. In other words, since my xaxis is 0 to 11999, I need to draw a label every 1000th point. Each label will be transformed into a time, since I know the absolute time of point 0 and the deltaT between each pair of points, it is easy to calculate the absolute time of every 1000th point and transform to time label for string.

Now my question is that, to accomplish this, all I can think of is to use labels.formatter, which has a prototype of

function() {
    return this.value;
}

However in this function, I need to use both this.value to be the 1000th point and this.<some variables> to be some react component member variables to do the time transforming. How can I do both these this together in react-highcharts?

or is this the correct way to resolve the issue? maybe there are other better solution.

thank you.

[Joe]

I can't say much without knowing more about your component, but it sounds like something along these lines might work:

class Foo extends React.Component {
  // This method returns the formatter function that you pass on to Highcharts.
  getYAxisFormatter() {
    // Save a reference to the component that we can close over.
    const component = this;

    // NOTE: It's important that you return a `function()` style function
    // rather than an arrow function here so Highcharts can rebind the `this` var.
    return function format() {
      // now `component` refers to the originating React component
      // while `this` refers to whatever it is Highcharts binds this function to.
      // Presumably the tick whose label is being formatted?
      return String(component.props.someComponentProp) + ': ' + this.value;
    }
  }
}

[Kirill Cherkashin]

Closing and there has been no activity in this issue for a while.
if this is still relevant, please feel free to reopen