diff --git a/src/components/bar-chart/bar-chart.tsx b/src/components/bar-chart/bar-chart.tsx index 58cb60d2..1ef70103 100644 --- a/src/components/bar-chart/bar-chart.tsx +++ b/src/components/bar-chart/bar-chart.tsx @@ -114,6 +114,38 @@ interface BarChartProps { * @see https://recharts.org/en-US/api/Bar#activeBar */ activeBar?: BarProps['activeBar']; + + /** + * Maximum bar width in pixels. Caps the bar size regardless of available + * space. Forwarded to each ``. + * + * @see https://recharts.org/en-US/api/Bar#maxBarSize + */ + maxBarSize?: number; + + /** + * Fixed bar width. Overrides automatic sizing if set. Forwarded to each + * ``. Accepts a number (pixels) or a percentage string. + * + * @see https://recharts.org/en-US/api/Bar#barSize + */ + barSize?: number | string; + + /** + * Gap between bar groups (across data points). Accepts a number (pixels) + * or a percentage string. Forwarded to the underlying ``. + * + * @see https://recharts.org/en-US/api/BarChart#barCategoryGap + */ + barCategoryGap?: number | string; + + /** + * Gap between bars within the same group (multi-series). Accepts a number + * (pixels) or a percentage string. Forwarded to the underlying ``. + * + * @see https://recharts.org/en-US/api/BarChart#barGap + */ + barGap?: number | string; } const BarChart = ( { @@ -143,6 +175,10 @@ const BarChart = ( { yAxisProps, tooltipProps, activeBar, + maxBarSize, + barSize, + barCategoryGap, + barGap, }: BarChartProps ) => { const defaultColors = [ { fill: '#7DD3FC' }, { fill: '#2563EB' } ]; @@ -171,6 +207,8 @@ const BarChart = ( { data={ data } margin={ { left: 14, right: 14 } } layout={ layout } + barCategoryGap={ barCategoryGap } + barGap={ barGap } > { showCartesianGrid && } @@ -273,6 +311,8 @@ const BarChart = ( { radius={ radius } stackId={ stacked ? 'a' : undefined } activeBar={ activeBar } + maxBarSize={ maxBarSize } + barSize={ barSize } /> ); } ) }