0

I'm using Nivo ResponsivePie to display some data and everything seems to be working find other than the tooltip. The tooltip is just not showing. I have a heatmap and bargraph which have a working tooltip. I copied the code I directly from the docs https://nivo.rocks/pie

I'm having the same issue with the line graph.

When I check dev tools, I see <path d=".."/> updating dynamically as I move across the chart, but nothing is popping up in the styles tag as it does for other graphs
(like this

<div style="pointer-events: none; position: absolute; z-index: 10; top: 0px; left: 0px; transform: translate(279.312px, 157px);"><div style="background: white; color: inherit; font-size: inherit; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px; padding: 5px 9px;"><div style="white-space: pre; display: flex; align-items: center;"><span style="display: block; width: 12px; height: 12px; background: rgb(247, 251, 255); margin-right: 7px;"></span><span>approach - Sun 08/01: <strong>20</strong></span></div></div></div>

)

DonCarleone
  • 544
  • 11
  • 20

1 Answers1

4

Issue

Turns out it had something to do with the version. I ran npm ls and found:

├── @nivo/bar@0.72.0
├── @nivo/core@0.73.0
├── @nivo/heatmap@0.72.0
├── @nivo/line@0.73.0
├── @nivo/pie@0.73.0
├── @nivo/tooltip@0.72.0

All of the modules with broken tooltips were running on 0.73.0

Fix

I ran

npm uninstall @nivo/pie
npm uninstall @nivo/core
npm uninstall @nivo/line

and then

npm install @nivo/core@0.72.0 --legacy-peer-deps
npm install @nivo/pie@0.72.0 --legacy-peer-deps
npm install @nivo/line@0.72.0 --legacy-peer-deps
DonCarleone
  • 544
  • 11
  • 20