How to add custom tooltip to nivo chart?

user_12768467 0
Viewed 5461

I'm doing a stream chart with Nivo (nivo(.dot)rocks)) in react.js. How to customize the tooltip? The documentation doesn't talk about this point.

reactjs
3 Answers

in nivo Line chart type case that works for me:

 <ResponsiveLine
  data={data}
  tooltip={point => {
    return <div>{point}</div>;
  }}
/>
user_112893360

Maybe you can kick start by something like this

<ResponsiveLine
    data={data}
    tooltip={({ point }) => {
        return (
            <div
                style={{
                    background: 'white',
                    padding: '9px 12px',
                    border: '1px solid #ccc',
                }}
            >
                <div>x: {point.x}</div>
                <div>y: {point.y}</div>
            </div>
        )
    }} 
/>
user_96225630

I hope this helps someone, because for my package version (0.79.1), tooltip didn't do anything at all. I found that there's a prop called sliceTooltip that seems to function the same way. I have no idea what the difference is supposed to be, but it's the only one that allowed me to write a custom tooltip component for ResponsiveLine.

user_192931880
Related