javascriptcssreactjsnivo-react

React Nivo tooltip not working on some graphs


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>

)


Solution

  • 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