Tengo que representar la siguiente matriz en un gráfico usando la biblioteca Recharts Js. Quiero que el eje Y represente la propiedad de costo y el eje X para representar la propiedad de volumen y el gráfico debe ser un gráfico de barras (solicitado por el cliente). Básicamente, la barra debe crecer en altura en función de su costo, pero también tiene que crecer en altura en función de su volumen y eso es con lo que estoy luchando: no puedo encontrar una manera de mostrar las barras en función de su volumen también. En esta imagen es posible ver el resultado deseado , me la envió el cliente, pero tenga en cuenta que la representación visual puede no ser exacta y consistente con los datos.
Lo que probé: traté de dibujar las barras "manualmente" usando el accesorio de forma en el componente Barra y estableciendo un ancho basado en el valor del volumen , pero es solo una solución débil porque la escala del eje X no será consistente con las barras También traté de establecer el ancho con el accesorio barSize , pero esto solo afecta la altura en el caso de un gráfico horizontal.
Ejemplo de matriz de datos:
[ { volume 1500, cost: -136.06243, totalVolumeCost: -204093.645 }, { volume 1000, cost: -272.12486, totalVolumeCost: -294166.97366 } ]Pregunta: ¿Cómo puedo configurar el ancho de las barras para mostrar el valor del volumen?
Lo que obtuve hasta ahora:https://codesandbox.io/s/overall-cost-implication-forked-1sumje
Traté de lograrlo con un BarChart, pero no parece posible: puede editar BarGap, pero no hay anulación para el contenedor de cada barra.
Una alternativa que todavía usa Recharts es este codesandbox:
https://codesandbox.io/s/area-chart-with-variable-rectangle-widths-h8o780?file=/src/App.tsx
El formato de datos necesita alguna modificación, pero he escrito un ciclo para eso:
//Init edited data data let dataAdjusted = [{ volume: 0, cost: 0 }]; for (let i = 0; i < data.length; i++) { let currentData = data[i]; dataAdjusted.push({ volume: dataAdjusted.at(-1).volume, cost: currentData.cost }); dataAdjusted.push({ volume: dataAdjusted.at(-1).volume + currentData.volume, cost: currentData.cost }); } Funciona proporcionando el parámetro de fill del elemento Area con un degradado:
<Area dataKey="cost" stroke="#FFFFFF" fill="url(#gradient)" />El degradado toma los datos modificados y agrega paradas de degradado para cada color.
<linearGradient id="gradient" x1="0" y1="0" x2="100%" y2="0"> {dataAdjusted.map(function (d, index) { let cost = d.cost; let volume = d.volume; let percentage = 100 * (volume / totalVolume); let fill = "#111111"; if (cost > 0) fill = "#d9f7be"; if (cost > 5) fill = "#b7eb8f"; if (cost < 0) fill = "#ffd8bf"; if (cost <= -5) fill = "#ff9c6e"; return <stop offset={`${percentage}%`} stopColor={fill} />; })} </linearGradient>Todavía necesita algo de trabajo de etiquetado y probablemente algunas correcciones en la función de gradiente, pero debería ser un comienzo para su problema.