Added new props for customizing the Bar chart

brainstormforce · Nov 19, 2024 · ef381ef · ef381ef
1 parent d134f70
commit ef381ef
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 1 deletion.
diff --git a/src/components/bar-chart/bar-chart.stories.tsx b/src/components/bar-chart/bar-chart.stories.tsx
@@ -567,3 +567,35 @@ export const AreaChartCard5: Story1 = ( args ) => (
 );
 
 AreaChartCard5.storyName = 'Revenue Card With Bar Chart Interactive';
+
+export const BarChartCard6: Story = {
+	args: {
+		data: chartData,
+		dataKeys: [ 'desktop' ],
+		layout: 'horizontal',
+		showXAxis: true,
+		showYAxis: false,
+		showTooltip: true,
+		tooltipIndicator: 'dot',
+		showCartesianGrid: true,
+		tickFormatter: monthFormatter,
+		yAxisDataKey: 'month',
+		activeBar: {
+			fill: '#2563EB',
+		},
+		tooltipProps: {
+			cursor: {
+				fill: 'transparent',
+			},
+		},
+	},
+	render: ( args ) => (
+		<BarChart
+			{ ...args }
+			xAxisDataKey={ args.layout === 'vertical' ? '' : 'month' }
+			showCartesianGrid={ args.layout === 'vertical' ? false : true }
+		/>
+	),
+};
+
+BarChartCard6.storyName = 'Customize hover effect';
diff --git a/src/components/bar-chart/bar-chart.tsx b/src/components/bar-chart/bar-chart.tsx
@@ -7,6 +7,7 @@ import {
 	Tooltip,
 	Legend,
 	ResponsiveContainer,
+	type BarProps,
 } from 'recharts';
 import ChartLegendContent from './chart-legend-content';
 import ChartTooltipContent from './chart-tooltip-content';
@@ -82,6 +83,34 @@ interface BarChartProps {
 
 	/** Border radius of chart bar. */
 	borderRadius?: number;
+
+	/**
+	 * xAxis related props.
+	 *
+	 * @see https://recharts.org/en-US/api/XAxis
+	 */
+	xAxisProps?: Record<string, unknown>;
+
+	/**
+	 * yAxis related props.
+	 *
+	 * @see https://recharts.org/en-US/api/YAxis
+	 */
+	yAxisProps?: Record<string, unknown>;
+
+	/**
+	 * Tooltip related props.
+	 *
+	 * @see https://recharts.org/en-US/api/Tooltip
+	 */
+	tooltipProps?: Record<string, unknown>;
+
+	/**
+	 * Active bar index.
+	 *
+	 * @see https://recharts.org/en-US/api/Bar#activeBar
+	 */
+	activeBar?: BarProps['activeBar'];
 }
 
 const BarChart = ( {
@@ -106,6 +135,10 @@ const BarChart = ( {
 	chartWidth = 350,
 	chartHeight = 200,
 	borderRadius = 8,
+	xAxisProps,
+	yAxisProps,
+	tooltipProps,
+	activeBar,
 }: BarChartProps ) => {
 	const defaultColors = [ { fill: '#7DD3FC' }, { fill: '#2563EB' } ];
 
@@ -138,6 +171,7 @@ const BarChart = ( {
 
 				{ layout === 'horizontal' && showXAxis && (
 					<XAxis
+						{ ...xAxisProps }
 						dataKey={ xAxisDataKey }
 						tickLine={ false }
 						axisLine={ false }
@@ -152,6 +186,7 @@ const BarChart = ( {
 
 				{ layout === 'horizontal' && showYAxis && (
 					<YAxis
+						{ ...yAxisProps }
 						dataKey={ yAxisDataKey }
 						tickLine={ false }
 						tickMargin={ 10 }
@@ -165,8 +200,14 @@ const BarChart = ( {
 
 				{ layout === 'vertical' && (
 					<>
-						<XAxis type="number" dataKey={ xAxisDataKey } hide />
+						<XAxis
+							{ ...xAxisProps }
+							type="number"
+							dataKey={ xAxisDataKey }
+							hide
+						/>
 						<YAxis
+							{ ...yAxisProps }
 							dataKey={ yAxisDataKey }
 							type="category"
 							tickLine={ false }
@@ -184,6 +225,7 @@ const BarChart = ( {
 				{ showYAxis && <YAxis dataKey={ yAxisDataKey } /> }
 				{ showTooltip && (
 					<Tooltip
+						{ ...tooltipProps }
 						content={
 							<ChartTooltipContent
 								indicator={ tooltipIndicator }
@@ -224,6 +266,7 @@ const BarChart = ( {
 							fill={ appliedColors[ index ]?.fill }
 							radius={ radius }
 							stackId={ stacked ? 'a' : undefined }
+							activeBar={ activeBar }
 						/>
 					);
 				} ) }