danielprogramic commented 6 years ago

321

Hi guys, Thank you for your assistance,

I was able to use the method showTooltip in the componentDidMount

componentDidMount() { const { showTooltip } = this.props; showTooltip({ tooltipData: {date: "2017", price: 100}, tooltipLeft: 150, tooltipTop: 67.5, }) }

But, I have a problem. How do I get the tooltipData, tooltipLeft and tooltipTop of all graphs?

I want the circle to appear on all the graphs, not only by the onMouseMove,onMouseLeave, onTouchMove

Demo the problem http://www.danielprogramic.com.br/problem/videotogif_2018.07.13_12.02.11.gif

Thanks guys

hshoff commented 6 years ago

Hi Daniel, you would have to lift the tooltip state up to a component higher up in the tree and pass it down to your graphs. React has a great writeup on this topic: https://reactjs.org/docs/lifting-state-up.html

instead of:

withTooltip(MyChart)

do something like:

withTooltip(App)

// inside App.js
render() {
  const { tooltipData } = this.props;
  return (
  <div>
    <MyChart tooltip={tooltipData} />
    <MyChart tooltip={tooltipData} />
    <MyChart tooltip={tooltipData} />
  </div>
  )
}

This is just pseudocode, you'll probably want to pass the show/hide/updateTooltip functions as well or make your own handle tooltip function that you pass to the child charts.

And of course this is just one way of managing state in React. vx is unopinionated about how you handle state in your app.

Hope that helps get you pointed in the right direction.

danielprogramic commented 6 years ago

Thanks @hshoff This solves my problem. I'm loving @vx

airbnb / visx

My Problem with showTooltip in the componentDidMount #322

321