From ee4321b8e04b4a0e06d01871c24f00b2744bca65 Mon Sep 17 00:00:00 2001
From: Om Kolte <omk@bsf.io>
Date: Thu, 30 Apr 2026 21:51:47 +0530
Subject: [PATCH] feat(BarChart): expose bar size and gap props
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Recharts' BarChart and Bar components accept four standard props for
controlling bar width and spacing — maxBarSize, barSize, barCategoryGap,
and barGap. The Force UI wrapper currently swallows all of them, so
consumers cannot cap or shrink bar widths without forking the wrapper.

This forwards them through:
- barCategoryGap and barGap go onto the inner <BarChart>
- maxBarSize and barSize go onto each <Bar>

All four props are optional. When unset, Recharts' default sizing
applies, so existing behavior is preserved for current consumers.
---
 src/components/bar-chart/bar-chart.tsx | 40 ++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

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 `<Bar>`.
+	 *
+	 * @see https://recharts.org/en-US/api/Bar#maxBarSize
+	 */
+	maxBarSize?: number;
+
+	/**
+	 * Fixed bar width. Overrides automatic sizing if set. Forwarded to each
+	 * `<Bar>`. 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 `<BarChart>`.
+	 *
+	 * @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 `<BarChart>`.
+	 *
+	 * @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 && <CartesianGrid vertical={ false } /> }
 
@@ -273,6 +311,8 @@ const BarChart = ( {
 								radius={ radius }
 								stackId={ stacked ? 'a' : undefined }
 								activeBar={ activeBar }
+								maxBarSize={ maxBarSize }
+								barSize={ barSize }
 							/>
 						);
 					} ) }