How to enable tooltip on React-vis?

awzx picture awzx · Aug 16, 2017 · Viewed 9.6k times · Source

How to enable tooltip on React-vis?

<Sunburst
 hideRootNode
 colorType="literal"
 data={data}
 height={300}
 width={350}/>

I don't see tooltip on vizualisation, how can I see a tool on hovering the chart?

In the case of SunBurst, there's an example on Uber github page, and you have to recompute the position of the tooltip based on the angle of your datapoint which is not super convenient.

Answer

mcnutt picture mcnutt · Aug 16, 2017

You need to manually add a tooltip if you want one! React-vis tries not to make assumptions about how you will be using it, it just tries to offers a flexible platform. You can see an example of how to do this here: https://github.com/uber/react-vis/blob/master/showcase/sunbursts/sunburst-with-tooltips.js but I can give a quick example here as well:

<Sunburst hideRootNode colorType="literal" data={data} height={300} width={350}> <Hint value={hoveredValue} /> </Sunburst> Where hoveredValues is an appropriate hover value (perhaps garnered from a hover listener on the sunburst it self). You may need to modify the value you get from you on hover method

function buildValue(hoveredCell) {
  const {radius, angle, angle0} = hoveredCell;
  const truedAngle = (angle + angle0) / 2;
  return {
    x: radius * Math.cos(truedAngle),
    y: radius * Math.sin(truedAngle)
  };
}

I've opened a PR to add the content of this answer to the sunburst documentation (#552), which I hope helps.