Get data that used in tooltip

[bohdanbirdie]

Bug or Feature Request?

Help request I guess.

Description

I have a HighchartsStockChart with several LineSeries, and a Tooltip. So what I'm looking for is a kind of external tooltip that will be placed outside the chart. Here is the example that I'd like to copy https://bravenewcoin.com/Bitcoin#Trading-Pairs When you hover over the charts - it will update that tooltip outside the chart. I found that they are using a tooltipPointFormatter, and I'm using a formatter with shared tooltip prop to get data from all the Lines together.

But I'm facing a problem and struggling to fix it for several days. I'll go step by step explaining what I'm doing:

• To be able to reach the component context I'm passing it to the chart via props <Chart zoomType="x" context={this}/>, looks bad, but this is the only approach that I found to be able to call any props or state of the components.
• Then I'm setting tooltip in this manner <Tooltip shared={true} formatter={this.tooltipFormatter} /> and setting visibility: hidden; for the tooltip to be able to get the data on hover without displaying tooltip itself.

• Then, in the formatter I'm calling the passed via props function to update data

  public tooltipFormatter = function (this: any, tooltip: any) {
  const indexes = {};
  this.points.forEach((point: any) => {
    indexes[point.series.name] = point.point.index;
  });
  
  const self = tooltip.chart.options.chart.context; //passed to the charts context as mentioned above
  self.props.onTooltipUpdate(indexes);
  };

  The idea under this indexes is next: I have some data for each point, and there are about 5 fields, but when we reading y prop from the tooltip argument it only returns the prop that is used for rendering the line. So i'm finding the index in the data array of the current point and passing those indexes to the props function onTooltipUpdate to be able to get all the required fields.

On the component above I have a state that will keep all the indexes for me

this.state = {
      legendItemsIndexes: {},
    };

An my chart component in the render method:

<Highchart
          data={this.props.data}
          onTooltipUpdate={this.onTooltipUpdate.bind(this)}/>

So when the onTooltipUpdate fires I'm updating the state of the top component

public onTooltipUpdate(indexes: any) {
    console.log(indexes);
    this.setState({
      legendItemsIndexes: {
        ...this.state.legendItemsIndexes,
        ...indexes,
      },
    });
  }

By having this indexes in the state I can get them and render the list of data sets and put the value of the specific item in the data set array (by index) to them, as in the example above. So this is where the problems start. Doing setState forcing render method to be called, and for some reason, it just start an infinite loop, when used hovering the chart.

I feed bad to this code quality, but did not found any other workaround.

Live demo demonstrating bug

THIS WILL KILL YOUR BROWSER TAB!

https://stackblitz.com/edit/rjh-tooltip-formatter-nuchbv?file=MyChart.js

Versions

• React JSX Highcharts version: "react-jsx-highstock": "^3.0.2",
• Highcharts version: "highcharts": "^6.0.0",
• React version: "react": "^16.4.0",

[bohdanbirdie]

Well, I finally found a great solution! Instead of saving this indexes in the state I moved them to my redux store and connected external components with the store, so it only rerender that component and doesn't rerender charts component.

Thanks for your great project!

[whawker]

Hi @bohdanbirdie, have you explored using the Higher Order Components to create your own Custom Component? Example with datepickers here

I would suggest creating your own custom component with provideChart, then using this.props.getChart().object.hoverPoints to get the information you need.

Example here

[bohdanbirdie]

@whawker wow, this is much better! Thank you!