How to use showTooltip on component load "componentDidMount"

[danielprogramic]

   <svg width={width} height={height}>
      <rect x={0} y={0} width={width} height={height} fill="transparent" />
      <LinePath
        data={data}
        xScale={xScale}
        yScale={yScale}
        x={xSelector}
        y={ySelector}
        strokeWidth={1}
        stroke="#616161"
        strokeLinecap="round"
        fill="transparent"
      />
      <Bar
        x={0}
        y={0}
        width={width}
        height={height}
        fill="transparent"
        data={data}
        onMouseMove={data => event =>
          this.handleTooltip({
            event,
            data,
            xSelector,
            xScale,
            yScale,
          })}
        onMouseLeave={data => event =>
              this.handleTooltip({
                event,
                data,
                xSelector,
                xScale,
                yScale,
              })}
        onTouchMove={data => event =>
          this.handleTooltip({
            event,
            data,
            xSelector,
            xScale,
            yScale,
          })}
      />
      {tooltipData && (
        <g>
          <circle
            cx={tooltipLeft}
            cy={tooltipTop}
            r={4}
            fill="#616161"
            stroke="white"
            strokeWidth={0}
            style={{ pointerEvents: "none" }}
          />
        </g>
      )}
    </svg>

The tooltipData only works on onMouseMove and onMouseLeave, I'd like to use it with onload but, I can't to use

[williaster]

hey @danielprogramic, thanks for checking out vx!

my first thought is that you could call this.props.onMouseMove this.props.showTooltip within the component's componentDidMount lifecycle method. would that work?

[hshoff]

you should be able to do:

componentDidMount() {
  const { showTooltip } = this.props;
  showTooltip({
    tooltipData: {}, // whatever
    tooltipLeft: x,  // some number
    tooltipTop: y, // some number
  })
}

some notes from the React lifecycle docs https://reactjs.org/docs/react-component.html#componentdidmount:

You may call setState() immediately in componentDidMount(). It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state. Use this pattern with caution because it often causes performance issues. In most cases, you should be able to assign the initial state in the constructor() instead. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.

[danielprogramic]

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