How to pass fill colors to recharts Pie component

Question

So basically i have this array of objects:

const testMeasurments = [
  {
    data: [
      {name: "glucose", value: 6, color: '#57c0e8'},
      {name: "SpO2", value: 5, color: "#FF6565"},
      {name: "Blood Pressure", value: 4, color: "#FFDA83"},
      {name: "Body Weight", value: 2, color: "purple"}
    ]
  }
]

I want to loop over them and access the color property. So basically i have a chart and each part will have its own color so I want to loop inside the object while assigning the value also to assign the color to it.

Example:

{testMeasurments.map(s=>
        <Pie 
        dataKey="value" 
        isAnimationActive={false} 
        data={s.data} 
        cx={200} 
        cy={200} 
        outerRadius={100} 
        innerRadius={60}
    fill={s.color} // Here I want to loop over each color and assign it to the proper value
  >

As you can see it is certainly not working here but thats what i need! Thank you in advance.

@Oyeme sorry for the inconvenient please refer to the fixed code — M.I, Jun 22 '20 at 08:27
@RedBaron sorry for the inconvenient please refer to the fixed code — M.I, Jun 22 '20 at 08:28

viam0Zah · Accepted Answer · 2020-06-22T08:35:01.183

10

Looking at the code example for the Pie component, you need to rename the color property to fill in your data set, and then it will automatically work. The fill property on the Pie component is for the component-level filling color.

const testMeasurments = [
  {
    data: [
      {name: "glucose", value: 6, fill: '#57c0e8'},
      {name: "SpO2", value: 5, fill: "#FF6565"},
      {name: "Blood Pressure", value: 4, fill: "#FFDA83"},
      {name: "Body Weight", value: 2, fill: "purple"}
    ]
  }
]

/// ...

{testMeasurments.map(s=>
        <Pie 
        dataKey="value" 
        isAnimationActive={false} 
        data={s.data} 
        cx={200} 
        cy={200} 
        outerRadius={100} 
        innerRadius={60}
        fill="#fff"
  >

edited Jun 22 '20 at 08:35

answered Jun 22 '20 at 08:28

viam0Zah

25,949
8
77
100

waw i didn't know that! thank you so much it worked perfectly – M.I Jun 22 '20 at 08:34
I don't understand how this works? as fill will be `#fff` everytime wont it? but I thought the OP wanted it to be the value of the colour property? – Red Baron Jun 22 '20 at 08:42
1

@RedBaron because the OP tried to set the wrong property. But s/he wanted to set the fill colors for the individual data points, not for the whole pie chart component. – viam0Zah Jun 22 '20 at 08:50
@viam0Zah i am sorry i didn't accept it earlier but on that day they told me you cannot accept the answer right away so i forgot to do it later sorry! again thank you for your answer – M.I Jun 24 '20 at 12:06

score -1 · Answer 2 · answered Jun 22 '20 at 08:28

-1

try something like this:

testMeasurments.map((tm) => {
   return tm.data.map((data) => {
       <Pie 
         dataKey="value" 
         isAnimationActive={false} 
         data={data.data} 
         cx={200} 
         cy={200} 
         outerRadius={100} 
         innerRadius={60}
         fill={data.color}
   })
}

answered Jun 22 '20 at 08:28

Red Baron

7,181
10
39
86

`data.data` is referring to a not existing property. Only `tm` has `data` attribute. – viam0Zah Jun 22 '20 at 08:38
yeh I wasn't sure what it was so left it as that, sure the OP could fix it though as necessary – Red Baron Jun 22 '20 at 08:40
this way your solution will create a pie chart for each data point instead of showing the data set on a single one. I don't think it's what the OP wanted to achieve. – viam0Zah Jun 22 '20 at 08:55
yeh I think yours is correct but OQ was slightly confusing – Red Baron Jun 22 '20 at 08:58

score -1 · Answer 3 · answered Jun 22 '20 at 08:33

-1

If you are passing testMeasurements as a prop, then you need to take the first element of the testMeasurements array and then you can access the data array and then you can loop over like this -

{
    this.props.testMeasurements[0].map(dataSet => (
        <Pie
         dataKey="value" 
         isAnimationActive={false} 
         data={dataSet.data} 
         cx={200} 
         cy={200} 
         outerRadius={100} 
         innerRadius={60}
         fill={dataSet.color}
        />
    ))
}

answered Jun 22 '20 at 08:33

Siddharth Borderwala

51
1
3

I believe `testMeasurments` will contain more than one measure so hard-coding for the first element doesn't seem a generic solution. Also, in your solution, `dataSet` has no `data` property. – viam0Zah Jun 22 '20 at 08:40

How to pass fill colors to recharts Pie component

3 Answers3