Recharts - add commas to number on tooltip on bar chart

reactjs tooltip recharts
Gearóid picture Gearóid · Jul 17, 2018 · Viewed 9.8k times · Source

Is it possible to add a comma to large numbers on the tooltip?

for example 57,574 instead of 57574

enter image description here

Thanks!

Answer

eronisko picture eronisko · Jul 17, 2018

Yes, you can pass any formatter function to the Tooltip component, using the formatter prop e.g.

<BarChart>
  <Tooltip formatter={(value) => new Intl.NumberFormat('en').format(value)} />
</BarChart>

Check out the documentation here: http://recharts.org/en-US/api/Tooltip#formatter

Related questions

How to style Material-UI's tooltip?

How can I style Material-UI's tooltip text? The default tooltip on hover comes out black with no text-wrap. Is it possible to change the background, color etc? Is this option even available?

Read More
Can you force a React component to rerender without calling setState?

I have an external (to the component), observable object that I want to listen for changes on. When the object is updated it emits change events, and then I want to rerender the component when any change is detected. With …

Read More
Loop inside React JSX

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> I realize and understand why this isn't …

Read More