Nivo waffle chart: is it possible to create custom tooltips?

85 views Asked by At

I've got a nvio waffle chart that works great, and I'd like to add a custom tooltip to it.

I've tried three 'soultions': the one in the nivo docs storybook, the version in the storybook for bar charts and one from the internet. The first does nothing at all, I imagine something needs to be implemented for noRefCheck()? The other two show a custom tooltip, but without the data itself.

tooltip showing, but no data

tooltip={function noRefCheck(){}}


tooltip={({id, value, label, color}) =>
    <div style={{padding: 12, color, background: '#222222'}}>
        <span>Look, I'm custom :(</span> <br/>
        <strong> {id} : {value} : {label} </strong>
    </div>
}


tooltip={e => (
    <div style={{padding: 12, background: '#222222'}}>
        <span>Look, I'm custom :(</span> <br/>
        <strong> {e.id} : {e.value} : {e.label} </strong>
    </div>
)}

I'd like to pass a separate value to be displayed in the tooltip, but figure I should start by getting a basic one working. Any help appreciated.

Edit: Digging a little deeper in the storybook, I found that I needed to go one more level down to get the data:

tooltip={(e) => (
    <div style={{padding: 12, background: '#222222'}}>
        <span>Look, I'm custom :)</span> <br/>
        <strong> {e.data.id} : {e.data.label} : {e.data.value} </strong>
    </div>
)}
0

There are 0 answers