Saturday, 3 December 2022

Fill opacity don't work with calculate value Recharts

For each Stacked Bar element, I calculate its percentage

const valuePercent = attribute => ({payload}) => {
    const keys  = getKeys(chartData);
    const total = keys.reduce((acc, curr) => {
        return acc + payload[curr].count;
    }, 0);
    const ratio = total > 0 ? payload[attribute].count / total : 0;
    return `${(ratio * 100).toFixed(0)}%`;
  };

But when I substitute this value in the style, it doesn't work. What could be the problem?

return keys.map((item, index) => ( <
  Bar key = {
    index
  }
  dataKey = {
    `${item}.count`
  }
  stackId = 'a'
  style = {
    {
      fill: '#0452D7',
      fillOpacity: valuePercent(item),
    }
  }
  />
));
if you just put some value in fill opacity, everything is fine. At the same time, I see in the console that the function is triggered, and the percentages are calculated

from Fill opacity don't work with calculate value Recharts

No comments:

Post a Comment