{"action":"closed","issue":{"url":"https://api.github.com/repos/whawker/react-jsx-highcharts/issues/133","repository_url":"https://api.github.com/repos/whawker/react-jsx-highcharts","labels_url":"https://api.github.com/repos/whawker/react-jsx-highcharts/issues/133/labels{/name}","comments_url":"https://api.github.com/repos/whawker/react-jsx-highcharts/issues/133/comments","events_url":"https://api.github.com/repos/whawker/react-jsx-highcharts/issues/133/events","html_url":"https://github.com/whawker/react-jsx-highcharts/issues/133","id":339718603,"node_id":"MDU6SXNzdWUzMzk3MTg2MDM=","number":133,"title":"Get data that used in tooltip","user":{"login":"bohdanbirdie","id":23266928,"node_id":"MDQ6VXNlcjIzMjY2OTI4","avatar_url":"https://avatars3.githubusercontent.com/u/23266928?v=4","gravatar_id":"","url":"https://api.github.com/users/bohdanbirdie","html_url":"https://github.com/bohdanbirdie","followers_url":"https://api.github.com/users/bohdanbirdie/followers","following_url":"https://api.github.com/users/bohdanbirdie/following{/other_user}","gists_url":"https://api.github.com/users/bohdanbirdie/gists{/gist_id}","starred_url":"https://api.github.com/users/bohdanbirdie/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bohdanbirdie/subscriptions","organizations_url":"https://api.github.com/users/bohdanbirdie/orgs","repos_url":"https://api.github.com/users/bohdanbirdie/repos","events_url":"https://api.github.com/users/bohdanbirdie/events{/privacy}","received_events_url":"https://api.github.com/users/bohdanbirdie/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-07-10T07:06:32Z","updated_at":"2018-07-10T14:30:58Z","closed_at":"2018-07-10T14:30:58Z","author_association":"NONE","body":"#### Bug or Feature Request?\r\nHelp request I guess.\r\n\r\n#### Description\r\nI have a HighchartsStockChart with several LineSeries, and a Tooltip.\r\nSo what I'm looking for is a kind of external tooltip that will be placed outside the chart.\r\nHere is the example that I'd like to copy https://bravenewcoin.com/Bitcoin#Trading-Pairs \r\nWhen you hover over the charts - it will update that tooltip outside the chart.\r\nI 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.\r\n\r\nBut I'm facing a problem and struggling to fix it for several days.\r\nI'll go step by step explaining what I'm doing:\r\n- To be able to reach the component context I'm passing it to the chart via props\r\n`<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.\r\n- Then I'm setting tooltip in this manner\r\n`<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.\r\n- Then, in the formatter I'm calling the passed via props function to update data\r\n```TypeScript\r\npublic tooltipFormatter = function (this: any, tooltip: any) {\r\n    const indexes = {};\r\n    this.points.forEach((point: any) => {\r\n      indexes[point.series.name] = point.point.index;\r\n    });\r\n\r\n    const self = tooltip.chart.options.chart.context; //passed to the charts context as mentioned above\r\n    self.props.onTooltipUpdate(indexes);\r\n  };\r\n```\r\nThe idea under this `indexes` is next: I have some data for each point, and there are about 5 fields, but when we reading\r\n `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.\r\n\r\nOn the component above I have a state that will keep all the indexes for me\r\n```TypeScript\r\nthis.state = {\r\n      legendItemsIndexes: {},\r\n    };\r\n```\r\nAn my chart component in the render method:\r\n```JSX\r\n<Highchart\r\n          data={this.props.data}\r\n          onTooltipUpdate={this.onTooltipUpdate.bind(this)}/>\r\n```\r\n\r\nSo when the `onTooltipUpdate` fires I'm updating the state of the top component\r\n```TypeScript\r\npublic onTooltipUpdate(indexes: any) {\r\n    console.log(indexes);\r\n    this.setState({\r\n      legendItemsIndexes: {\r\n        ...this.state.legendItemsIndexes,\r\n        ...indexes,\r\n      },\r\n    });\r\n  }\r\n```\r\n\r\nBy 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.\r\nSo 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.\r\n\r\nI feed bad to this code quality, but did not found any other workaround.\r\n\r\n\r\n#### Live demo demonstrating bug\r\n### **THIS WILL KILL YOUR BROWSER TAB!**\r\nhttps://stackblitz.com/edit/rjh-tooltip-formatter-nuchbv?file=MyChart.js\r\n\r\n#### Versions\r\n* React JSX Highcharts version: \"react-jsx-highstock\": \"^3.0.2\",\r\n* Highcharts version: \"highcharts\": \"^6.0.0\",\r\n* React version:  \"react\": \"^16.4.0\",\r\n"}}
{"actor":{"display_login":"whawker"}}