0
144
Views¿Cómo agregar bordes redondeados en la barra superior de barras apiladas creadas dinámicamente usando Recharts?
En este momento estoy creando un gráfico de barras apiladas como ese:
Componente:
<ResponsiveContainer width="100%" height="100%"> <ComposedChart data={mappedValues} margin={{ top: 20, right: 80, bottom: 20, left: 20, }} > <CartesianGrid stroke="#EBF0FA" vertical={false} /> <XAxis dataKey="periodFixed" axisLine={false} tickLine={false} tick={<CustomizedAxisTick />} /> <YAxis yAxisId="left" axisLine={false} tickLine={false} tickFormatter={formatYAxis} stroke="rgba(99, 110, 131, 0.5)" /> <YAxis yAxisId="right" orientation="right" axisLine={false} tickLine={false} stroke="rgba(99, 110, 131, 0.5)" /> <Tooltip /> {legendFlag ? ( <Legend wrapperStyle={{ paddingTop: "25px", paddingLeft: "10px", }} /> ) : null} {groups.map((data, i) => ( <Bar key={i} dataKey={data} yAxisId="left" stackId="a" fill={data === groups[0] ? colours[0] : colours[1]} barSize={barSize} radius={[4, 4, 0, 0]} /> ))} <Line type="linear" yAxisId="right" dataKey="transactions" stroke="#ADD868" dot={false} strokeWidth={3} /> </ComposedChart> </ResponsiveContainer>Pero el resultado que obtengo es algo como esto:
y estoy tratando de encontrar una manera de agregar solo el radio en la barra superior del gráfico de barras apiladas. ¿Hay alguna manera rápida o una solución para eso? ¡Gracias!
·
Juan Pablo Isaza
1 answers
Answer question0
Encontré una solución para esta tarea,
Usé Cell para las Stacked Bars y lo arreglé así:
{groups.map((data, i) => ( <Bar key={i} dataKey={data} yAxisId="left" stackId="a" barSize={barSize} > {mappedValues.map((entry, index) => ( <Cell key={`cell-${index}`} fill={data === groups[0] ? colours[0] : colours[1]} radius={renderRadius(entry, data, index)} /> ))} </Bar> ))} Donde mappedValues es mi objeto de datos principal. Luego, en mi función, verifiqué cada vez si estaba en la barra superior y si tenía valor para ello:
const renderRadius = (entry, data, i) => { const length = groups.length - 1; if (data !== groups[length]) { if (entry[groups[length]] === 0) { return [4, 4, 0, 0]; } else { return 0; } } else { if (entry[groups[length]] !== 0) { return [4, 4, 0, 0]; } } }; Mientras los groups venían de la respuesta:
const groups = props.data.arrStatsData[0].groups;¡Y eso funciona! Si hay alguna otra solución mejor, por favor hágamelo saber :)
·
Juan Pablo Isaza
Report
Answer question