Quiero trazar mi barra de historgrama con diferentes colores para A , B , C pero tengo mis 3 barras con el mismo color, es decir, negro, supongo que está en el problema del campo de fill . Si trazo solo una barra, se imprime con el color correcto, pero cuando es más de 1, es todo negro. estoy usando recharts
¿Alguna idea, por favor?
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> ) }Aquí están mis datos de mi API:
{ "ratingBar": [ { "title": "A", "count": 2 }, { "title": "B", "count": 48 }, { "title": "C", "count": 78 } ] }tienes que usar la propiedad de las celdas:
cells: data.map(m => ({fill: COLORS[m.title]}))fill: data.map(m => COLORS[m.title])Tu mapa está mal. Supongo que el relleno espera una variedad de colores. Pero está accediendo a la tecla COLORS con una matriz asignada que siempre estará indefinida.