• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

158
Vistas
Plotting bars with react with different colors, but they're all in black why?

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
        }
    ]
}
about 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

you have to use cells property :

  cells: data.map(m => ({fill: COLORS[m.title]}))
about 3 years ago · Juan Pablo Isaza Denunciar

0

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.

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda