Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

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

0

you have to use cells property :

  cells: data.map(m => ({fill: COLORS[m.title]}))
7 months 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.

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos