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={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>
)}