How to format value in chart tooltip

[MD-AZMAL]

The default chart tooltip component

    <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />

displays the value as it is, is it possible to format the value like the tickformater, I checked the docs it only has labelFormatter and not the valueFormatter and the only option left is the formatter prop which requires returning your own component which is not ideal in most cases

[KresimirJurkovic]

Same here - I'd like to pass a percentage sign to e.g. a Pie chart, but since the payload value can only be a number (logical), I'd like to have a possibility to format the value

[DeividasJackus]

A bit of clarification for anyone else stumbling on this.

You can use ChartTooltipContent's formatter to achieve this, and pass either a whole component or a simple function.
Doing so, however, replaces the entire label value line along with the icon, indicator, etc.

<ChartTooltipContent formatter={(value) => `${value.toLocaleString()} %`} />

Alternatively, see #4542 for a potential implementation

[MD-AZMAL]

The issue with this is it just displays the formatted value, the prestyled shadcn tooltip content is entirely overwritten as you just mentioned. Do let me know once your PR is merged for production! I'm experimenting with it

[guilleliss]

Also, this overwrites the style for all label-values of the tooltip. Being able to customise each value with a different format would be great.

[wintercounter]

I had to check the source code what arguments formatter is being called with. Why formatter is not in the docs at all?

formatter(item.value, item.name, item, index, item.payload)

Using all these data I was able to build the content I needed. Feels fragile tho.

[seekerpig]

One work around I found other than using the formatter suggested by DeividasJackus which overwrites the prestyled tooltip is to add a class name in the ChartToolTipContent e.g.
<ChartTooltip content={<ChartTooltipContent className="percentage"/>} />

then go into the ChartTooltipContent class and add a className to the value span:
<span className="font-mono font-medium tabular-nums text-foreground tooltip-value"> {item.value.toLocaleString()} </span>

Then just go to your global.css and add:
.percentage .tooltip-value::after { content:"%"; }

Then whenever you have a chart where you want to add percentage, just make sure you pass the className to the ChartToolTip class, else if you don't pass it, nothing is added.

[seekerpig]

Hopefully a valueFormatter solution is added in the future, think it will be super useful.

[shriekdj]

@MD-AZMAL i got the same issue but i saw this section of the shadcn charts https://ui.shadcn.com/charts#tooltip

There is last option Tooltip - Advanced it have the option of adding the total value which can be changed to percentage our-self.

[yasithfernando]

You can actually update the payload value as you wish. It's something like this
<ChartTooltipContent payload={props.payload.map( (p: Payload<number, string>) => ({ ...p, value: formatValue(p.value, unit) }) )} />

This way you don't have to use the formatter just to change the tooltip value and also you can keep the styles unchanged. Define the formatValue function to return the updated value with the percentage

[pepew-le-boss]

My solution without breaking the style:

1. Inside <ChartTooltipContent /> add this prop: valueFormatter?: (value: ValueType) => string

2. ValueType is imported like this: import { ValueType } from "recharts/types/component/DefaultTooltipContent"

3. Then at the end of the component there is:

   {item.value && (
     <span className="font-mono font-medium tabular-nums text-foreground">
       {item.value.toLocaleString()}
     </span>
   )}

   Replace by this:

   {item.value && (
     <span className="font-mono font-medium tabular-nums text-foreground">
       {valueFormatter ? valueFormatter(item.value) : item.value.toLocaleString()}
     </span>
   )}

4. Usage:

   <ChartTooltip
     cursor={false}
     content={
       <ChartTooltipContent
         indicator={Object.keys(chartConfig).length > 1 ? "dot" : "line"}
         labelFormatter={(value) => new Date(value).toLocaleDateString("fr-FR")}
         valueFormatter={(value) => `${value.toLocaleString("fr-FR", { style: "currency", currency: "EUR" })}`}
       />
     }
   />

It might not be the cleanest solution but it works

[unav4ila8le]

This is the way!

[audipasuatmadi]

I think this is worth a PR, @pepew-le-boss.