Nivo: Add support for custom tooltip

[plouc]

Allowing custom tooltips has been requested several times:

https://github.com/plouc/nivo/issues/117 | https://github.com/plouc/nivo/issues/186 | https://github.com/plouc/nivo/issues/120

This issue is used to track down the ongoing implementation of custom tooltips on all nivo packages/components:

• [x] @nivo/bar ResponsiveBar >=0.36.0
• [x] @nivo/bar ResponsiveBarCanvas >=0.36.0
• [ ] @nivo/bullet ResponsiveBullet
• [x] @nivo/calendar ResponsiveCalendar - https://github.com/plouc/nivo/pull/223
• [x] @nivo/chord ResponsiveChord
• [x] @nivo/chord ResponsiveChordCanvas
• [x] @nivo/circle-packing ResponsiveBubble - https://github.com/plouc/nivo/pull/200
• [x] @nivo/circle-packing ResponsiveBubbleHtml - https://github.com/plouc/nivo/pull/200
• [x] @nivo/circle-packing ResponsiveBubbleCanvas - https://github.com/plouc/nivo/pull/200
• [x] @nivo/heatmap ResponsiveHeatMap
• [x] @nivo/heatmap ResponsiveHeatMapCanvas
• [x] @nivo/line ResponsiveLine - https://github.com/plouc/nivo/pull/258
• [x] @nivo/pie ResponsivePie - https://github.com/plouc/nivo/pull/208
• [x] @nivo/pie ResponsivePieCanvas
• [ ] @nivo/radar ResponsiveRadar
• [x] @nivo/sankey ResponsiveSankey
• [x] @nivo/scatterplot ResponsiveScatterPlot - https://github.com/plouc/nivo/pull/255
• [x] @nivo/scatterplot ResponsiveScatterPlotCanvas
• [ ] @nivo/stream ResponsiveStream
• [x] @nivo/sunburst ResponsiveSunburst
• [x] @nivo/treemap ResponsiveTreeMap - https://github.com/plouc/nivo/pull/200
• [x] @nivo/treemap ResponsiveTreeMapHtml - https://github.com/plouc/nivo/pull/200
• [x] @nivo/treemap ResponsiveTreeMapCanvas - https://github.com/plouc/nivo/pull/200
• [x] @nivo/waffle ResponsiveWaffle - https://github.com/plouc/nivo/pull/202
• [x] @nivo/waffle ResponsiveWaffleHtml - https://github.com/plouc/nivo/pull/202
• [x] @nivo/waffle ResponsiveWaffleCanvas - https://github.com/plouc/nivo/pull/202

[Panczo]

any updates about @nivo/line ResponsiveLine ?
Thanks

[jbenua]

Support for line https://github.com/plouc/nivo/pull/258

[aballal]

Any chance jbenua's PR will be merged soon and a release is made available?

[taugustyn]

+1! Having custom tooltip on the line chart is really crucial.

[plouc]

PR for line has been merged.

[plouc]

PR for ScatterPlot => https://github.com/plouc/nivo/pull/255

[plouc]

PR merged for ScatterPlot support.

[Prior99]

Hi, I'd greatly appreciate custom tooltip support for the Sunburst component.

[Hellboyksr2]

Any Update's about the ResponsiveChord custom Tooltip.

Thanks

[ncknuna]

@plouc Does this issue also include the ability to custom the tooltip's position calculation (for example, to make it so that it positions itself relative to the hovered element rather than the mouse position)? Should I file a separate issue for that? I didn't see an easy way to override what's being done here: https://github.com/plouc/nivo/blob/262a8ee96bb870fe388e64d1453248aed94bf445/packages/core/src/components/Container.js#L45 . Happy to send a PR for that if you point me in your desired direction :)

[conanak99]

Any update on @nivo/bullet? I don't even see it there?

[rudyStrikes]

@plouc Can you please update if custom tooltips are available for ResponsiveChord?

[plouc]

@conanak99, not yet available for bullet, @rudyStrikes the status is up-to-date :)

[brunodesde1987]

Is there any way of change this tooltip wrapper padding?

[plouc]

@solutweb, you can use the theme for this: tooltip.container.padding

[plouc]

Custom tooltips support added for @nivo/chord => https://github.com/plouc/nivo/pull/526

[canfie1d]

Hi @plouc, Just checking on the status of custom tooltips for radar charts. Thank you for your work on this library. 🙇

[danzawadzki]

Alternatively, is there an option to hide the tooltip for radar charts?

Update:
If someone had the same problem, just change the isInteractive flag to false. Until there is no possibility of tooltip customization, it should solve the problem.

[donovanclarke]

Hi @plouc, Was wondering the status of custom tooltips for Responsive Sunburst / Sunburst chart. The library is awesome by the way.

[jarodhanko]

Do custom tooltips work with ResponsivePieCanvas? I can't get them to work on 0.58.0, and I see it is not on the list, but the docs seem to suggest it is supported.

It is also not obvious from the docs that you can include data other than id, value, label, and color if you had other properties in your array of data (which might be useful to note).

[piltsen]

Quick question, I have already done the custom Tooltip, however, I want to disallow tooltips for certain bars (BarChart). Even if I return null, it still renders a small tiny square. Any way to remove that?

[plouc]

@piltsen, which component are you using? I've removed the wrapper on some components, but others still have it.

[jarodhanko]

@piltsen For now it seems you can set theme.tooltip.container or theme.tooltip.container.padding to null. It might still trigger a render, but it doesn't seem to show up.

[plouc]

@jarodhanko, you're right, it might work, thank you.

[piltsen]

@piltsen, which component are you using? I've removed the wrapper on some components, but others still have it.

@plouc I am using ResponsiveBar

@jarodhanko I am new to this, how can I set the theme? in the tooltip?

[piltsen]

@plouc @jarodhanko I figured it out. Thanks for your help. Cheers

[piltsen]

@plouc On tooltips still, is it possible to force the tooltip to always appear below the mouse? It seems that the tooltip dynamically chooses based on the position of the mouse inside the SVG. Thanks

[jarodhanko]

@piltsen

It looks like the values for "right" and "bottom" positioning are automatically calculated somehow using mouse position. It appears you can override them using any common css values, but if you want them positioned correctly you can't change the right or bottom positioning. I don't know if there is a correct way to do it, or a way to make it consistent. I was able to make it kind of work, although the padding between the mouse pointer and the tooltip is inconsistent. It might help you figure something out though. Modify theme.tooltip.container (and/or theme.tooltip) to adjust it.

"theme":  { 
  "tooltip": {
    "container":{
      "position": "absolute",
      "left": "50%",
      "transform": "translateX(-50%)",
      "margin-top": 25
     }
  }
}

[plouc]

@piltsen, it's not possible for now, but there are few opened issues about tooltip positioning, I'm thinking of adding a way to control this, but I don't have much time to work on nivo for now.

[SenelithPerera]

@jarodhanko I'm using nivo line chart. I'm trying to access the tooltip container's position like below.
theme={{ tooltip: { container: { position: "fixed" } } }}

But this doesn't seem to work.

EDIT : What I'm trying to do here is to give a fixed position to the custom tooltip and get the tooltip out of the chart container. But the problem here is i can't access the container attribute of the tooltip. Seems like it's getting overridden

[ardok]

Does this support grouped tooltip?
Say I use grouped bar chart, I want the tooltip to show up per group.

[pietervanwijk]

Would be great to have this for Bullet :)

[vinayshah1998]

Any progress on the custom tooltip for Bullet? My team would love to use it once its available!

[j-avila]

How can I disable the tooltip?

[wyze]

@j-avila You can set isInteractive={false} prop.

[plouc]

@vinayshah1998 not yet unfortunately

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[vinayshah1998]

bump

[wyze]

Thanks for the bump @vinayshah1998. I put a label on so it won't go stale again.

[mvdobrinin]

Would be good to have this for Stream. 👍