I am trying to pass a custom valueFormat function as props so the arcLabels will be rendered with an trailing "%" to a PieChart. While this works pretty well with simple expressions, I do not get it to work with an arrow function. I am fairly new to coding so I hope this is an easy one for you experienced guys.
What works
Calling the PieChart with a simple expression as a prop:
valueFormat: ">-~",
into:
valueFormat={props.valueFormat}
Using the arrow function for "%" as hard coded attribute, so no call with a prop:
valueFormat={value =>
${Number(value).toLocaleString('en-EN', {
minimumFractionDigits: 2,
})} %`
}
What doesn't work
Calling the PieChart with an arrow function as a prop:
valueFormat:{{value =>
${Number(value).toLocaleString('en-EN', {minimumFractionDigits: 2,
})} %`
}}
into:
valueFormat={props.valueFormat}
I tried:
- to wrap it as a const and pass the const
- convert it to a string and pass it as that
I cannot be sure that I didn't do any mistakes, though.
At this point I am just trying things without understanding anything. Hope you guys can give me a quick hint. Currently I simply built a second PieChart component and hard-coded it into the second.
Thanks in advance!
Thanks to your post I was now able to put it in a const and pass it as a prop of the PieCompanySizes which then creates the Pie (ResponsivePie) and passes the valueFormat as a prop to it, like this:
PieCompanySizes:
Pie (from Nivo):
Just so no one is confused: I am using
<Pie>
instead of<ResponsivePie>
as fiddling around with CSS flex and the zero-height issue of Nivo Pies created too much headache for me to solve at that point.Thank you! :)