React, Nivo: Passing custom valueFormat function as props to PieChart

Question

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!

score 1 · Answer 1 · answered Jan 10 '23 at 01:23

When you set a top-level prop on a component, you always use the = syntax.

String constants can be passed directly in quotes:

<Component someProp="someValue"/>

But all other values must be wrapped in curly braces { }. This includes numbers, objects, functions, and variables of any type:

<Component
  a={5}
  b={someVariable}
  c={someFunction}
  d={(e) => {
    console.log(e);
  }}
  e={{ property: "value" }}
/>

You only use colons : in props for setting a property on an object, like the e={{ property: "value" }} in the above example.

valueFormat is a top-level prop of the Pie component, so you need to use valueFormat=.

The valueFormat prop of a Nivo chart can be either:

a string which is a D3 formatter, like your ">-~" example.
a function which takes the value and returns a string.

You can define your formatter with an inline arrow function like this:

<ResponsivePie
    data={data}
    {/* ... your other props ... */}
    valueFormat={(value) =>
      `${Number(value).toLocaleString("en-EN", { minimumFractionDigits: 2 })} %`
    }
/>

You can also store that function as a variable (either function or const) and set that variable as the prop of the pie chart:

function percentFormat(value) {
  return `${Number(value).toLocaleString("en-EN", { minimumFractionDigits: 2 })} %`;
}

const percentFormat = (value) =>
  `${Number(value).toLocaleString("en-EN", { minimumFractionDigits: 2 })} %`;

<ResponsivePie
    data={data}
    {/* ... your other props ... */}
    valueFormat={percentFormat}
/>

Thanks for your elaboration! I learned already something about functions and const. I guess I did not explain my issue very well or I do not get the point. My Setup: I have a PieChart, let's call it "PieCompanySizes" which is a jsx component. This component calls the PieChart Component (ResponsivePie) that I intend to use for instantiating a PieChart based on the props passed by the PieCompanySizes. My challenge is to pass the valueFormat as a prop. I guess my core problem is less about nivo pies but about passing a function as react prop. I hope I understood everything you explained. — protoys, Jan 10 '23 at 03:11

protoys · Accepted Answer · 2023-01-10T03:30:00.620

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:

const PieCompanySizes = () => {
  const valueF = (value) =>
    `${Number(value).toLocaleString("en-EN", { minimumFractionDigits: 2 })}%`;
  return (
    <div className="flex mt-5 relative xs:mr-[-16px]">
      <PieChart
        {...{
          data: piedata,
          arcLabels: true,
          arcLabelsRadiusOffset: 0.5,
          translateX: 0,
          translateY: 45,
          itemsSpacing: 10,
          endAngle: 360,
          width: 320,
          height: 500,
          margin: { top: -65, right: 20, bottom: 80, left: 20 },
          valueFormat: valueF,
        }}
        ...

Pie (from Nivo):

const PieChart = (props) => {
  const theme = useTheme();
  const colors = tokens(theme.palette.mode);
 return (
    <Pie
      data={props.data}
      width={props.width}
      height={props.height}
      margin={props.margin}
      enableArcLabels={props.arcLabels}
      valueFormat={props.valueFormat}
      ...

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! :)

React, Nivo: Passing custom valueFormat function as props to PieChart

2 Answers2