Label(Tooltip) Not working on Linear Chart

[hiimdjango]

I made a linear chart with the following props

<StyledContainer style={props ? { ...props } : {}}>
     <ResponsiveLine
       colors={{ datum: 'color' }}
       data={data}
       margin={{ top: 12, right: 48, bottom: 40, left: 60 }}
       xScale={{ type: 'point' }}
       yScale={{
         type: 'linear',
         min: 0,
       }}
       axisLeft={{
         legendPosition: 'start',
         renderTick: props => {
           const transformProperty = `translate(${props.x},${props.y})`;
           if (props.tickIndex % 2 === 0) {
             return (
               <g transform={transformProperty}>
                 <line x1='0' x2='-5' y1='0' y2='0' style={{ stroke: 'rgb(119, 119, 119)', strokeWidth: 1 }}></line>
                 <text dominantBaseline='central' textAnchor='end' transform='translate(-10,0)' fontSize={11}>
                   {props.value}
                 </text>
               </g>
             );
           }
           return <></>;
         },
       }}
       axisBottom={{
         renderTick: () => <></>,
       }}
       curve='monotoneX'
       pointBorderColor={theme.colors.primary}
       pointBorderWidth={2}
       useMesh
       animate
       enableGridX={false}
       isInteractive
     />
   </StyledContainer>

I even tried just copy paste the code from the demo here : https://nivo.rocks/line/

Expected behavior A tooltip should appear when I hover on the graph

Current behavior No tooltip is shown

Screenshots

Desktop:

• OS: MacOs Monterey 12.1
• Browser : Chrome -Version 98.0.4758.80 (Official Build) (arm64)

Additional context @nivo/core": "^0.79.0" @nivo/line": "^0.79.0"

[kitravee]

I found the same issue. In my case, resolve by remove @nivo/api package

package.json

"@nivo/api": "^0.74.1", // !EXCIDENT
"@nivo/core": "0.79.0",
"@nivo/line": "0.79.0",

I remove "@nivo/api": "^0.74.1", and then everything works fine 👍

[enigmatikme]

I don't have that package installed and am running into the same issues :/

[radchenk0]

Hello. I've faced the same issue. In my case the problem was related to mesh layer. I had two custom line charts on the same page, and one of them didn't show any tooltips. Mesh layer I had on charts was custom. In some cases, mesh (functional component) returned null because of setup. Turned out, it was the only mesh I had among other layers. I changed the logic a bit (no null returns) and it started working.

So I bet it somehow related to mesh layer. It could be missing among layers, or return something different from Mesh component etc

May be it will help someone.

[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!

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[sujan-s]

Same issue. I don’t have the @nivo/api package, doesn’t work with 0.80.0, 0.79.1, or 0.79.0.

[sujan-s]

Ok, I changed "@nivo/line": "^0.80.0", to "@nivo/line": "0.80.0", and the labels showed up. Try that, @kitravee @enigmatikme @radchenk0?

[naren-sureify]

bump

[oleksiikiselovartkai]

Ok, I changed "@nivo/line": "^0.80.0", to "@nivo/line": "0.80.0", and the labels showed up. Try that, @kitravee @enigmatikme @radchenk0?

This solution worked for me, thank you. Still not sure what is causing the issue.