I want to plot my historgram bar with different colors for A
, B
, C
but I have my 3 bars with the same color i.e black, I guess it's in the fill
field issue. If I plot only one bar then it's printed wirth the right color, but when it's more than 1 then it's all black.
I'm using recharts
Any idea please ?
export default function Overview() {
const { ratingBar } = graphs ?? {}
const COLORS = {
'A': 'red',
'B': 'green',
'C': 'orange',
}
function ratingGraph() {
const data = ratingBar
return ({
graph: {
type: 'bar',
showTooltip: true,
showXAxis: true,
showYAxis: true,
showLegend: true,
container: {
data,
},
bars: [
{
dataKey: 'count',
fill: COLORS[data.map((m) => m.title)],
}
],
xaxis: {
dataKey: 'title',
tick: { style: { fontSize: '.9rem' } },
},
yaxis: {
dataKey: 'count',
domain: [0, 100],
},
},
}).graph
}
return (
<div >
{...ratingGraph()}
</div>
)
}
Here is my data from my api :
{
"ratingBar": [
{
"title": "A",
"count": 2
},
{
"title": "B",
"count": 48
},
{
"title": "C",
"count": 78
}
]
}
you have to use cells property :
cells: data.map(m => ({fill: COLORS[m.title]}))
fill: data.map(m => COLORS[m.title])
Yours map is wrong. I guess the fill expects an array of colors. But you are accessing COLORS key with a mapped array which will be always undefined.