Nivo: How to customise tooltip values?

[abhijit-padhy]

I have lot of answers with tooltip={tooltip} for tooltip formatting. But I am not clear what does {tooltip} means and how should it be written. #@nivo/pie #plouc

Please be more descriptive.

[mathiasflaatt]

Looking at the index.d.ts for @nivo/pie
tooltip is defined as :

tooltipFormat: string | ValueFormatter

and ValueFormatter is defined as:

export type ValueFormatter = (value: number) => string | number

So if you want to create a dynamical tooltip that changes based on hovered value it could look like this.

tooltipFormat={value => Number(value).toLocaleString('en-US', {minimumFractionDigits: 2}) + '$'}

[danpettay]

@MathiasFl's answer has worked on all the chart types I've used thus far (Line, Bar, Pie)

[plouc]

@abhijit-padhy, you often see tooltip={tooltip} because the storybook and website's examples are not able to display the code for nested components, however you can explore the storybook's source to see how it's implemented, for example https://github.com/plouc/nivo/blob/master/packages/bar/stories/bar.stories.js#L202

[plouc]

tooltip allows to customise the whole tooltip while tooltipFormat only acts on the value.

[DominicTobias]

I simply want to format the date in the tooltip so tooltip seems overkill but tooltipFormat never gets called for ResponsiveLine at least :(

[markdascher]

Looks like yFormat does the trick for line charts.

[ilirosmanaj]

@DominicTobias / @markdascher , did you find any way to use tooltip for ResponsiveLine? yFormat works fine, but I cannot access the whole object using it

[znoland3]

This helped me with custom tooltips - https://github.com/plouc/nivo/issues/149#issuecomment-593617357