If you define stacked bar data as ranges, Recharts will use those ranges as-is without any calculations.
The ranges can be connected, disconnected, or overlapping depending on your use case (e.g., timeline of events).
BarStack component allows you to set radius for rounded corners on the entire stack.
These features are available since Recharts 3.6.
import { BarChart, XAxis, YAxis, Tooltip, Bar, BarStack, TooltipIndex, lightTheme } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
// #region Sample data
const rangedStackedBarData = [
{ name: 'A', value1: [100, 200], value2: [200, 250], value3: [250, 300] },
{ name: 'B', value1: [120, 180], value2: [130, 230], value3: [170, 270] },
{ name: 'C', value1: [90, 160], value2: [210, 310], value3: [340, 440] },
{ name: 'D', value1: [80, 140], value2: [140, 200], value3: [200, 220] },
];
// #endregion
const RangedStackedBarChart = ({
isAnimationActive = true,
defaultIndex,
}: {
isAnimationActive?: boolean;
defaultIndex?: TooltipIndex;
}) => (
<BarChart
style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
responsive
data={rangedStackedBarData}
id="recharts-ranged-stacked-bar-chart"
margin={{
top: 20,
right: 20,
bottom: 20,
left: 20,
}}
>
<XAxis dataKey="name" />
<YAxis width="auto" />
<Tooltip defaultIndex={defaultIndex} />
<BarStack radius={25}>
<Bar
dataKey="value1"
{...lightTheme.graphicalItems[0]}
maxBarSize={50}
isAnimationActive={isAnimationActive}
activeBar={{ fillOpacity: 1 }}
/>
<Bar
dataKey="value2"
{...lightTheme.graphicalItems[1]}
maxBarSize={50}
isAnimationActive={isAnimationActive}
activeBar={{ fillOpacity: 1 }}
/>
<Bar
dataKey="value3"
{...lightTheme.graphicalItems[2]}
maxBarSize={50}
isAnimationActive={isAnimationActive}
activeBar={{ fillOpacity: 1 }}
/>
</BarStack>
<RechartsDevtools />
</BarChart>
);
export default RangedStackedBarChart;