0
137
ViewsHow to add round edges on top bar of dynamically created stacked bars using Recharts?
At the moment I am creating a stacked bars chart like that:
Compnent:
<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>
But the result I get is something like this:
and I am trying to find a way to add only radius on the top bar of stacked bar chart. Is there any quick way or a solution for that? Thanks!
·
Juan Pablo Isaza
1 answers
Answer question0
I found a workaround for this task,
I used Cell for the Stacked Bars and fixed it like that:
{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>
))}
Where mappedValues is my main data object. Then in my function I checked every time if I was on the top bar and if I had value for it:
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];
}
}
};
While the groups were coming from the response:
const groups = props.data.arrStatsData[0].groups;
And that works! If there is any other better solution please let me know :)
·
Juan Pablo Isaza
Report
Answer question