'Recharts: Change background fill color of RadialBar chart based on fill color in data

I want to use the low-opacity version of the fill color defined in the data object as the background fill color of the RadialBar chart.

I tried using a function as the background property of <RadialBar />, but it doesn't seem to get any arguments.

const data = [
  { name: 'foo', value: 1, fill: 'red' },
  { name: 'bar', value: 2, fill: 'blue' },
];

<RadialBarChart
  width={260}
  height={260}
  innerRadius={80}
  outerRadius={130}
  startAngle={90} 
  endAngle={-270}
  margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
  barSize={12}
  data={data}
>
  <RadialBar
    minAngle={15}
    clockWise
    dataKey="value"
    cornerRadius="5"
    background={(foo) => { console.log(foo); }}
  />
</RadialBarChart>

Any idea how I can access the color of the corresponding sector?

recharts


Solution 1:[1]

Not sure if I understand you correctly, but if you need to change the background colour of the RadialBar, you can assign an object to the "background" property, and if you need to change the fill colour you can change the "fill" property such as here:

<RadialBar
  background={{ fill: data[0].fill }}
  fill={data[0].fill}
/>

Solution 2:[2]

Try this out, using react memo to change the fill property in radialBarChart.

data={React.useMemo(
          () => [
            {
              percentage,
              fill: 'currentColor',
            },
          ],
          [percentage],
        )}

and set a div for this. 

<div className={{
color: 'green',
}} >
<RadialBarChart data={React.UseMemo(..etc)}>
<RadiaBar (radial props) />
</RadialBarChart>
</div>

Solution 3:[3]

Expanding on Dmitry's answer, you can set opacity as well.

The issue I had was the chart doesn't work with different colour themes, specifically light and dark mode. To fix this, set background fill to "rgba(0, 0, 0, opacity)" where the 4th value ranges from 0 to 1

e.g. for 5% opacity (mostly transparent)

<RadialBar
  background={{ fill: rgba(0, 0, 0, 0.05) }}
  dataKey="<yourdatakey>" 
/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dmitry Petrov
Solution 2 Profi Làctic
Solution 3 Iza

Related Questions