CODEWITHSUNDEEP
reactjschartsreact-vis
awzx
awzx

Reputation: 1033

How to enable tooltip on React-vis?

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.

Upvotes: 6

Views: 10952

Answers (1)

mcnutt
mcnutt

Reputation: 681

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.

Upvotes: 3

Related Questions