search

plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.19k stars 1.03k forks source link

Add support for custom tooltip #192

Closed plouc closed 3 years ago

plouc commented 6 years ago

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:

Panczo commented 6 years ago

any updates about @nivo/line ResponsiveLine ? Thanks

jbenua commented 6 years ago

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

aballal commented 6 years ago

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

taugustyn commented 6 years ago

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

plouc commented 6 years ago

PR for line has been merged.

plouc commented 6 years ago

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

plouc commented 6 years ago

PR merged for ScatterPlot support.

Prior99 commented 6 years ago

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

Hellboyksr2 commented 6 years ago

Any Update's about the ResponsiveChord custom Tooltip.

Thanks

ncknuna commented 5 years ago

@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 commented 5 years ago

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

rudyStrikes commented 5 years ago

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

plouc commented 5 years ago

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

brunodesde1987 commented 5 years ago

Is there any way of change this tooltip wrapper padding? image

plouc commented 5 years ago

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

plouc commented 5 years ago

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

canfie1d commented 5 years ago

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

danzawadzki commented 5 years ago

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 commented 5 years ago

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

jarodhanko commented 5 years ago

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 commented 5 years ago

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? image

plouc commented 5 years ago

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

jarodhanko commented 5 years ago

@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 commented 5 years ago

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

piltsen commented 5 years ago

@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 commented 5 years ago

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

piltsen commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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

pietervanwijk commented 4 years ago

Would be great to have this for Bullet :)

vinayshah1998 commented 4 years ago

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

j-avila commented 4 years ago

How can I disable the tooltip?

wyze commented 4 years ago

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

plouc commented 4 years ago

@vinayshah1998 not yet unfortunately

vinayshah1998 commented 4 years ago

bump

wyze commented 4 years ago

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

mvdobrinin commented 3 years ago

Would be good to have this for Stream. 👍

markopaju commented 3 years ago

Would be good to have this for Bullet. 👍

nathsou commented 3 years ago

Would be awesome to have this for Radar too 😅

jlaguma commented 3 years ago

I have a Scatterplot chart where I need a tooltip to only appear when mouse is over the particular "dot" on the chart. On "ScatterPlot", I'm able to achieve this by using "useMesh=false". On "ScatterPlotCanvas" that option has no effect on tooltip, and tooltip is visible no matter where the mouse is on the chart. Can someone suggest if this is possible on "ScatterPlotCanvas" or "ResponsiveScatterPlotCanvas"? Posting it here, as it seems to be related to unsupported tooltip behaviour.

BrawlingBear commented 3 years ago

It would be great to have this for the Radar. It would allow users to work around the single maxValue property. In my case, I scaled down relevant metrics so that they are always between 0 and 1, but I cannot display unscaled values on tooltips.

jquintozamora commented 3 years ago

@wyze @plouc wondering what are the plans for next release, as I'd be interested on using custom tooltip for Bullet.

Thanks!

ChuckJonas commented 3 years ago

I'm also in need for the bullet custom tooltip. TY

plouc commented 3 years ago

Support added for @nivo/stream via https://github.com/plouc/nivo/pull/1721.

plouc commented 3 years ago

@jquintozamora, @ChuckJonas, I'll try to release this week, sorry for the delay.

plouc commented 3 years ago

Support added for @nivo/radar, the list is now complete.

ericanaughton commented 2 years ago

@nivo/scatterplot ResponsiveScatterPlotCanvas is missing the support for custom tooltip.

mauro-mascia commented 1 year ago

also @nivo/radialbar ResponsiveRadialBar is missing the support for custom tooltip