From b99fa45c8c2f0d57087e7dc9fd0698e7b642ab45 Mon Sep 17 00:00:00 2001
From: jaieds <87969327+jaieds@users.noreply.github.com>
Date: Thu, 10 Apr 2025 19:33:16 +0600
Subject: [PATCH 1/4] imprv (LineChart): Prop to customize y-axis colors

- Added an option to change y-axis colors.
---
 .../line-chart/line-chart.stories.tsx         | 10 ++++++
 src/components/line-chart/line-chart.tsx      | 35 +++++++++++++------
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/components/line-chart/line-chart.stories.tsx b/src/components/line-chart/line-chart.stories.tsx
index c270c89e..69edcc79 100644
--- a/src/components/line-chart/line-chart.stories.tsx
+++ b/src/components/line-chart/line-chart.stories.tsx
@@ -63,6 +63,9 @@ export const LineChartSimple: Story = {
 		xAxisDataKey: 'month',
 		xAxisFontSize: 'sm',
 		withDots: false,
+		lineChartWrapperProps: {
+			margin: { top: 5, right: 15, bottom: 5, left: 15 },
+		},
 	},
 };
 
@@ -79,6 +82,9 @@ export const LineChartWithDots: Story = {
 		xAxisDataKey: 'month',
 		xAxisFontSize: 'sm',
 		withDots: true,
+		lineChartWrapperProps: {
+			margin: { top: 5, right: 15, bottom: 5, left: 15 },
+		},
 	},
 };
 
@@ -95,6 +101,9 @@ export const LineChartMultiple: Story = {
 		xAxisDataKey: 'month',
 		xAxisFontSize: 'sm',
 		withDots: false,
+		lineChartWrapperProps: {
+			margin: { top: 5, right: 15, bottom: 5, left: 15 },
+		},
 	},
 };
 
@@ -117,5 +126,6 @@ export const BiaxialLineChart: Story = {
 		lineChartWrapperProps: {
 			margin: { top: 5, right: 5, bottom: 5, left: 5 },
 		},
+		yAxisFontColor: [ '#3b82f6', '#10B981' ],
 	},
 };
diff --git a/src/components/line-chart/line-chart.tsx b/src/components/line-chart/line-chart.tsx
index ba160144..36b944ec 100644
--- a/src/components/line-chart/line-chart.tsx
+++ b/src/components/line-chart/line-chart.tsx
@@ -11,6 +11,11 @@ import ChartTooltipContent from './chart-tooltip-content';
 import Label from '../label';
 import type { CategoricalChartProps } from 'recharts/types/chart/generateCategoricalChart';
 
+// Default color constants
+const DEFAULT_FONT_COLOR = '#6B7280';
+const DEFAULT_GRID_COLOR = '#E5E7EB';
+const DEFAULT_LINE_COLORS = [ { stroke: '#2563EB' }, { stroke: '#38BDF8' } ];
+
 interface DataItem {
 	[key: string]: number | string;
 }
@@ -61,8 +66,12 @@ interface LineChartProps {
 	/** Font color for the labels on the x-axis. */
 	xAxisFontColor?: string;
 
-	/** Font color for the labels on the y-axis. */
-	yAxisFontColor?: string;
+	/**
+	 * Font color for the labels on the y-axis.
+	 * When biaxial is true, you can provide an array of two colors [leftAxisColor, rightAxisColor].
+	 * If a single color is provided, it will be used for both axes.
+	 */
+	yAxisFontColor?: string | string[];
 
 	/** Width of the chart container. */
 	chartWidth?: number | string;
@@ -114,19 +123,17 @@ const LineChart = ( {
 	xAxisDataKey,
 	yAxisDataKey,
 	xAxisFontSize = 'sm', // sm, md, lg
-	xAxisFontColor = '#6B7280',
-	yAxisFontColor = '#6B7280',
+	xAxisFontColor = DEFAULT_FONT_COLOR,
+	yAxisFontColor = DEFAULT_FONT_COLOR,
 	chartWidth = 350,
 	chartHeight = 200,
 	withDots = false,
 	lineChartWrapperProps,
 	strokeDasharray = '3 3',
-	gridColor = '#E5E7EB',
+	gridColor = DEFAULT_GRID_COLOR,
 	biaxial = false,
 }: LineChartProps ) => {
-	const defaultColors = [ { stroke: '#2563EB' }, { stroke: '#38BDF8' } ];
-
-	const appliedColors = colors.length > 0 ? colors : defaultColors;
+	const appliedColors = colors.length > 0 ? colors : DEFAULT_LINE_COLORS;
 
 	const fontSizeMap = {
 		sm: '12px',
@@ -136,6 +143,14 @@ const LineChart = ( {
 
 	const fontSizeVariant = fontSizeMap[ xAxisFontSize ] || fontSizeMap.sm;
 
+	// Handle Y-axis colors for biaxial chart
+	const getYAxisFontColor = ( index = 0 ) => {
+		if ( Array.isArray( yAxisFontColor ) ) {
+			return yAxisFontColor[ index ] || yAxisFontColor[ 0 ] || DEFAULT_FONT_COLOR;
+		}
+		return yAxisFontColor;
+	};
+
 	if ( ! data || data.length === 0 ) {
 		return (
 			<Label size="sm" variant="help">
@@ -175,7 +190,7 @@ const LineChart = ( {
 					tickMargin={ 8 }
 					tick={ {
 						fontSize: fontSizeVariant,
-						fill: yAxisFontColor,
+						fill: getYAxisFontColor( 0 ),
 					} }
 					hide={ ! showYAxis }
 					orientation="left"
@@ -190,7 +205,7 @@ const LineChart = ( {
 						tickMargin={ 8 }
 						tick={ {
 							fontSize: fontSizeVariant,
-							fill: yAxisFontColor,
+							fill: getYAxisFontColor( 1 ),
 						} }
 						orientation="right"
 						hide={ ! showYAxis }

From 39dc73d3f7863b600b7206f64a82942c9ecc3633 Mon Sep 17 00:00:00 2001
From: jaieds <87969327+jaieds@users.noreply.github.com>
Date: Thu, 10 Apr 2025 20:24:48 +0600
Subject: [PATCH 2/4] Add prop to format y-axis label (tick)

---
 .../area-chart/area-chart.stories.tsx         | 80 +++++++++++++++++++
 src/components/area-chart/area-chart.tsx      | 33 +++++---
 .../line-chart/line-chart.stories.tsx         | 78 ++++++++++++++++--
 src/components/line-chart/line-chart.tsx      | 15 +++-
 4 files changed, 190 insertions(+), 16 deletions(-)

diff --git a/src/components/area-chart/area-chart.stories.tsx b/src/components/area-chart/area-chart.stories.tsx
index 69de4b6f..37a72044 100644
--- a/src/components/area-chart/area-chart.stories.tsx
+++ b/src/components/area-chart/area-chart.stories.tsx
@@ -15,7 +15,18 @@ const areaChartData = [
 	{ month: 'June', sales: 214, expenses: 140 },
 ];
 
+// Data with large values to demonstrate Y-axis formatting
+const largeValuesData = [
+	{ month: 'January', pageviews: 1200, sessions: 800 },
+	{ month: 'February', pageviews: 2800, sessions: 1500 },
+	{ month: 'March', pageviews: 5500, sessions: 2900 },
+	{ month: 'April', pageviews: 8200, sessions: 4100 },
+	{ month: 'May', pageviews: 14000, sessions: 6200 },
+	{ month: 'June', pageviews: 18500, sessions: 8800 },
+];
+
 const dataKeys = [ 'sales', 'expenses' ];
+const largeDataKeys = [ 'pageviews', 'sessions' ];
 
 const chartDataIteractive = [
 	{ date: '2024-04-01', desktop: 222, mobile: 150 },
@@ -121,6 +132,17 @@ const colors = [
 // Custom tick formatter function for months
 const monthFormatter = ( value: string ) => value.slice( 0, 3 );
 
+// Custom Y-axis formatter function to display values in K/M format
+const yAxisFormatter = ( value: number ) => {
+	if ( value >= 1000000 ) {
+		return `${(value / 1000000).toFixed(1)}M`;
+	}
+	if ( value >= 1000 ) {
+		return `${(value / 1000).toFixed(1)}K`;
+	}
+	return value.toString();
+};
+
 const monthFormatterInteractive = ( value: string ) => {
 	const date = new Date( value );
 	return date.toLocaleDateString( 'en-US', {
@@ -187,7 +209,65 @@ export const AreaChartInteractive: Story = {
 	},
 };
 
+export const AreaChartWithFormattedYAxis: Story = {
+	args: {
+		chartWidth: 600,
+		chartHeight: 300,
+		data: largeValuesData,
+		dataKeys: largeDataKeys,
+		colors: [
+			{ stroke: '#3b82f6', fill: '#BFDBFE' },
+			{ stroke: '#f97316', fill: '#FFEDD5' },
+		],
+		variant: 'solid',
+		showXAxis: true,
+		xAxisDataKey: 'month',
+		showYAxis: true,
+		tickFormatter: monthFormatter,
+		yAxisTickFormatter: yAxisFormatter,
+		showLegend: true,
+		areaChartWrapperProps: {
+			margin: {
+				left: 35,
+				right: 14,
+				top: 6,
+				bottom: 6,
+			},
+		},
+	},
+};
+
+export const AreaChartGradientWithFormattedYAxis: Story = {
+	args: {
+		chartWidth: 600,
+		chartHeight: 300,
+		data: largeValuesData,
+		dataKeys: largeDataKeys,
+		colors: [
+			{ stroke: '#3b82f6', fill: '#BFDBFE' },
+			{ stroke: '#f97316', fill: '#FFEDD5' },
+		],
+		variant: 'gradient',
+		showXAxis: true,
+		xAxisDataKey: 'month',
+		showYAxis: true,
+		tickFormatter: monthFormatter,
+		yAxisTickFormatter: yAxisFormatter,
+		showLegend: true,
+		areaChartWrapperProps: {
+			margin: {
+				left: 35,
+				right: 14,
+				top: 6,
+				bottom: 6,
+			},
+		},
+	},
+};
+
 AreaChartInteractive.storyName = 'Area Chart Gradient with Legend';
+AreaChartWithFormattedYAxis.storyName = 'Area Chart with Formatted Y-Axis';
+AreaChartGradientWithFormattedYAxis.storyName = 'Area Chart Gradient with Formatted Y-Axis';
 
 type Story1 = StoryFn<typeof AreaChart>;
 
diff --git a/src/components/area-chart/area-chart.tsx b/src/components/area-chart/area-chart.tsx
index a4b24b98..49fe39a4 100644
--- a/src/components/area-chart/area-chart.tsx
+++ b/src/components/area-chart/area-chart.tsx
@@ -14,6 +14,13 @@ import ChartTooltipContent from './chart-tooltip-content';
 import Label from '../label';
 import type { CategoricalChartProps } from 'recharts/types/chart/generateCategoricalChart';
 
+// Default color constants
+const DEFAULT_FONT_COLOR = '#6B7280';
+const DEFAULT_AREA_COLORS = [
+	{ stroke: '#2563EB', fill: '#BFDBFE' },
+	{ stroke: '#38BDF8', fill: '#BAE6FD' },
+];
+
 interface DataItem {
 	[key: string]: number | string; // Adjust based on your data structure
 }
@@ -56,9 +63,18 @@ interface AreaChartProps {
 	/** Whether to display the `<CartesianGrid />`, adding horizontal and vertical grid lines. */
 	showCartesianGrid?: boolean;
 
-	/** A function used to format the ticks on the axes, e.g., for formatting dates or numbers. */
+	/** A function used to format the ticks on the x-axis, e.g., for formatting dates or numbers. */
+	xAxisTickFormatter?: ( value: string ) => string;
+
+	/**
+	 * A function used to format the ticks on the x-axis, e.g., for formatting dates or numbers.
+	 * @deprecated Use `xAxisTickFormatter` instead.
+	 */
 	tickFormatter?: ( value: string ) => string;
 
+	/** A function used to format the ticks on the y-axis, e.g., for converting 1000 to 1K. */
+	yAxisTickFormatter?: ( value: number ) => string;
+
 	/** The key in the data objects representing values for the x-axis. This is used to access the x-axis values from each data entry. */
 	xAxisDataKey?: string;
 
@@ -99,11 +115,13 @@ const AreaChart = ( {
 	tooltipLabelKey,
 	showLegend = true,
 	showCartesianGrid = true,
+	xAxisTickFormatter,
 	tickFormatter,
+	yAxisTickFormatter,
 	xAxisDataKey,
 	yAxisDataKey,
 	xAxisFontSize = 'sm', // sm, md, lg
-	xAxisFontColor = '#6B7280',
+	xAxisFontColor = DEFAULT_FONT_COLOR,
 	chartWidth = 350,
 	chartHeight = 200,
 	areaChartWrapperProps = {
@@ -118,13 +136,7 @@ const AreaChart = ( {
 	const [ width, setWidth ] = useState( chartWidth );
 	const [ height, setHeight ] = useState( chartHeight );
 
-	// Default colors
-	const defaultColors: Color[] = [
-		{ stroke: '#2563EB', fill: '#BFDBFE' },
-		{ stroke: '#38BDF8', fill: '#BAE6FD' },
-	];
-
-	const appliedColors = colors.length > 0 ? colors : defaultColors;
+	const appliedColors = colors.length > 0 ? colors : DEFAULT_AREA_COLORS;
 
 	useEffect( () => {
 		setWidth( chartWidth );
@@ -182,7 +194,7 @@ const AreaChart = ( {
 					tickLine={ false }
 					axisLine={ false }
 					tickMargin={ 8 }
-					tickFormatter={ tickFormatter }
+					tickFormatter={ xAxisTickFormatter || tickFormatter }
 					tick={ {
 						fontSize: fontSizeVariant,
 						fill: xAxisFontColor,
@@ -195,6 +207,7 @@ const AreaChart = ( {
 					tickLine={ false }
 					axisLine={ false }
 					tickMargin={ 8 }
+					tickFormatter={ yAxisTickFormatter }
 					tick={ {
 						fontSize: fontSizeVariant,
 						fill: xAxisFontColor,
diff --git a/src/components/line-chart/line-chart.stories.tsx b/src/components/line-chart/line-chart.stories.tsx
index 69edcc79..42622a85 100644
--- a/src/components/line-chart/line-chart.stories.tsx
+++ b/src/components/line-chart/line-chart.stories.tsx
@@ -29,8 +29,19 @@ const biaxialChartData = [
 	{ month: 'June', visits: 214, revenue: 6800 },
 ];
 
+// Data with large values to demonstrate Y-axis formatting
+const largeValuesData = [
+	{ month: 'January', pageviews: 1200, users: 500 },
+	{ month: 'February', pageviews: 2500, users: 1200 },
+	{ month: 'March', pageviews: 5000, users: 2300 },
+	{ month: 'April', pageviews: 7800, users: 3600 },
+	{ month: 'May', pageviews: 12000, users: 4800 },
+	{ month: 'June', pageviews: 15000, users: 6500 },
+];
+
 const dataKeys = [ 'desktop', 'mobile' ];
 const biaxialDataKeys = [ 'visits', 'revenue' ];
+const largeDataKeys = [ 'pageviews', 'users' ];
 
 const colors = [ { stroke: '#2563EB' }, { stroke: '#38BDF8' } ];
 
@@ -48,6 +59,17 @@ export default meta;
 // Custom tick formatter function for months
 const monthFormatter = ( value: string ) => value.slice( 0, 3 );
 
+// Custom Y-axis formatter function to display values in K/M format
+const yAxisFormatter = ( value: number ) => {
+	if ( value >= 1000000 ) {
+		return `${ ( value / 1000000 ).toFixed( 1 ) }M`;
+	}
+	if ( value >= 1000 ) {
+		return `${ ( value / 1000 ).toFixed( 1 ) }K`;
+	}
+	return value.toString();
+};
+
 type Story = StoryObj<typeof LineChart>;
 
 export const LineChartSimple: Story = {
@@ -59,7 +81,7 @@ export const LineChartSimple: Story = {
 		showYAxis: false,
 		showTooltip: true,
 		showCartesianGrid: true,
-		tickFormatter: monthFormatter,
+		xAxisTickFormatter: monthFormatter,
 		xAxisDataKey: 'month',
 		xAxisFontSize: 'sm',
 		withDots: false,
@@ -78,7 +100,7 @@ export const LineChartWithDots: Story = {
 		showYAxis: false,
 		showTooltip: true,
 		showCartesianGrid: true,
-		tickFormatter: monthFormatter,
+		xAxisTickFormatter: monthFormatter,
 		xAxisDataKey: 'month',
 		xAxisFontSize: 'sm',
 		withDots: true,
@@ -97,7 +119,7 @@ export const LineChartMultiple: Story = {
 		showYAxis: false,
 		showTooltip: true,
 		showCartesianGrid: true,
-		tickFormatter: monthFormatter,
+		xAxisTickFormatter: monthFormatter,
 		xAxisDataKey: 'month',
 		xAxisFontSize: 'sm',
 		withDots: false,
@@ -116,7 +138,53 @@ export const BiaxialLineChart: Story = {
 		showYAxis: true,
 		showTooltip: true,
 		showCartesianGrid: true,
-		tickFormatter: monthFormatter,
+		xAxisTickFormatter: monthFormatter,
+		xAxisDataKey: 'month',
+		xAxisFontSize: 'sm',
+		withDots: true,
+		biaxial: true,
+		chartWidth: 500,
+		chartHeight: 300,
+		lineChartWrapperProps: {
+			margin: { top: 5, right: 45, bottom: 5, left: 5 },
+		},
+		yAxisFontColor: [ '#3b82f6', '#10B981' ],
+	},
+};
+
+export const LineChartWithFormattedYAxis: Story = {
+	args: {
+		data: largeValuesData,
+		dataKeys: largeDataKeys,
+		colors: [ { stroke: '#3b82f6' }, { stroke: '#f97316' } ],
+		showXAxis: true,
+		showYAxis: true,
+		showTooltip: true,
+		showCartesianGrid: true,
+		xAxisTickFormatter: monthFormatter,
+		yAxisTickFormatter: yAxisFormatter,
+		xAxisDataKey: 'month',
+		xAxisFontSize: 'sm',
+		withDots: true,
+		chartWidth: 500,
+		chartHeight: 300,
+		lineChartWrapperProps: {
+			margin: { top: 5, right: 15, bottom: 5, left: 35 },
+		},
+	},
+};
+
+export const BiaxialLineChartWithFormattedYAxis: Story = {
+	args: {
+		data: largeValuesData,
+		dataKeys: largeDataKeys,
+		colors: [ { stroke: '#2563EB' }, { stroke: '#10B981' } ],
+		showXAxis: true,
+		showYAxis: true,
+		showTooltip: true,
+		showCartesianGrid: true,
+		xAxisTickFormatter: monthFormatter,
+		yAxisTickFormatter: yAxisFormatter,
 		xAxisDataKey: 'month',
 		xAxisFontSize: 'sm',
 		withDots: true,
@@ -124,7 +192,7 @@ export const BiaxialLineChart: Story = {
 		chartWidth: 500,
 		chartHeight: 300,
 		lineChartWrapperProps: {
-			margin: { top: 5, right: 5, bottom: 5, left: 5 },
+			margin: { top: 5, right: 45, bottom: 5, left: 35 },
 		},
 		yAxisFontColor: [ '#3b82f6', '#10B981' ],
 	},
diff --git a/src/components/line-chart/line-chart.tsx b/src/components/line-chart/line-chart.tsx
index 36b944ec..cc696cac 100644
--- a/src/components/line-chart/line-chart.tsx
+++ b/src/components/line-chart/line-chart.tsx
@@ -52,8 +52,17 @@ interface LineChartProps {
 	showCartesianGrid?: boolean;
 
 	/** A function used to format the ticks on the x-axis, e.g., for formatting dates or numbers. */
+	xAxisTickFormatter?: ( value: string ) => string;
+
+	/**
+	 * A function used to format the ticks on the x-axis, e.g., for formatting dates or numbers.
+	 * @deprecated Use `xAxisTickFormatter` instead.
+	 */
 	tickFormatter?: ( value: string ) => string;
 
+	/** A function used to format the ticks on the y-axis, e.g., for converting 1000 to 1K. */
+	yAxisTickFormatter?: ( value: number ) => string;
+
 	/** The key in the data objects representing values for the x-axis. */
 	xAxisDataKey?: string;
 
@@ -119,6 +128,8 @@ const LineChart = ( {
 	tooltipIndicator = 'dot', // dot, line, dashed
 	tooltipLabelKey,
 	showCartesianGrid = true,
+	xAxisTickFormatter,
+	yAxisTickFormatter,
 	tickFormatter,
 	xAxisDataKey,
 	yAxisDataKey,
@@ -174,7 +185,7 @@ const LineChart = ( {
 					tickLine={ false }
 					axisLine={ false }
 					tickMargin={ 8 }
-					tickFormatter={ tickFormatter }
+					tickFormatter={ xAxisTickFormatter || tickFormatter }
 					tick={ {
 						fontSize: fontSizeVariant,
 						fill: xAxisFontColor,
@@ -188,6 +199,7 @@ const LineChart = ( {
 					tickLine={ false }
 					axisLine={ false }
 					tickMargin={ 8 }
+					tickFormatter={ yAxisTickFormatter }
 					tick={ {
 						fontSize: fontSizeVariant,
 						fill: getYAxisFontColor( 0 ),
@@ -203,6 +215,7 @@ const LineChart = ( {
 						tickLine={ false }
 						axisLine={ false }
 						tickMargin={ 8 }
+						tickFormatter={ yAxisTickFormatter }
 						tick={ {
 							fontSize: fontSizeVariant,
 							fill: getYAxisFontColor( 1 ),

From 18630190b4039b2cc48a4a519b01599d8e8bb040 Mon Sep 17 00:00:00 2001
From: jaieds <87969327+jaieds@users.noreply.github.com>
Date: Thu, 10 Apr 2025 20:48:07 +0600
Subject: [PATCH 3/4] chore: Lint

---
 src/components/area-chart/area-chart.stories.tsx | 7 ++++---
 src/components/line-chart/line-chart.tsx         | 4 +++-
 src/components/text/text.stories.tsx             | 3 ++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/area-chart/area-chart.stories.tsx b/src/components/area-chart/area-chart.stories.tsx
index 37a72044..fb01158f 100644
--- a/src/components/area-chart/area-chart.stories.tsx
+++ b/src/components/area-chart/area-chart.stories.tsx
@@ -135,10 +135,10 @@ const monthFormatter = ( value: string ) => value.slice( 0, 3 );
 // Custom Y-axis formatter function to display values in K/M format
 const yAxisFormatter = ( value: number ) => {
 	if ( value >= 1000000 ) {
-		return `${(value / 1000000).toFixed(1)}M`;
+		return `${ ( value / 1000000 ).toFixed( 1 ) }M`;
 	}
 	if ( value >= 1000 ) {
-		return `${(value / 1000).toFixed(1)}K`;
+		return `${ ( value / 1000 ).toFixed( 1 ) }K`;
 	}
 	return value.toString();
 };
@@ -267,7 +267,8 @@ export const AreaChartGradientWithFormattedYAxis: Story = {
 
 AreaChartInteractive.storyName = 'Area Chart Gradient with Legend';
 AreaChartWithFormattedYAxis.storyName = 'Area Chart with Formatted Y-Axis';
-AreaChartGradientWithFormattedYAxis.storyName = 'Area Chart Gradient with Formatted Y-Axis';
+AreaChartGradientWithFormattedYAxis.storyName =
+	'Area Chart Gradient with Formatted Y-Axis';
 
 type Story1 = StoryFn<typeof AreaChart>;
 
diff --git a/src/components/line-chart/line-chart.tsx b/src/components/line-chart/line-chart.tsx
index cc696cac..bd58bbd4 100644
--- a/src/components/line-chart/line-chart.tsx
+++ b/src/components/line-chart/line-chart.tsx
@@ -157,7 +157,9 @@ const LineChart = ( {
 	// Handle Y-axis colors for biaxial chart
 	const getYAxisFontColor = ( index = 0 ) => {
 		if ( Array.isArray( yAxisFontColor ) ) {
-			return yAxisFontColor[ index ] || yAxisFontColor[ 0 ] || DEFAULT_FONT_COLOR;
+			return (
+				yAxisFontColor[ index ] || yAxisFontColor[ 0 ] || DEFAULT_FONT_COLOR
+			);
 		}
 		return yAxisFontColor;
 	};
diff --git a/src/components/text/text.stories.tsx b/src/components/text/text.stories.tsx
index 32138d79..0f4738d8 100644
--- a/src/components/text/text.stories.tsx
+++ b/src/components/text/text.stories.tsx
@@ -52,7 +52,8 @@ export default {
 				'h6',
 				'div',
 			],
-			description: 'The element to render the text as. Any HTML element or React component can be added here.',
+			description:
+				'The element to render the text as. Any HTML element or React component can be added here.',
 		},
 		children: {
 			control: 'text',

From de3b44fa37b8e5cf834cfe396e4265b88c2a5ef4 Mon Sep 17 00:00:00 2001
From: jaieds <87969327+jaieds@users.noreply.github.com>
Date: Thu, 10 Apr 2025 20:59:01 +0600
Subject: [PATCH 4/4] Add prop to render custom empty state

---
 .../area-chart/area-chart.stories.tsx         | 34 ++++++++++++++-
 src/components/area-chart/area-chart.tsx      | 17 ++++++--
 .../line-chart/line-chart.stories.tsx         | 42 +++++++++++++++++++
 src/components/line-chart/line-chart.tsx      | 16 +++++--
 4 files changed, 101 insertions(+), 8 deletions(-)

diff --git a/src/components/area-chart/area-chart.stories.tsx b/src/components/area-chart/area-chart.stories.tsx
index fb01158f..3ad97839 100644
--- a/src/components/area-chart/area-chart.stories.tsx
+++ b/src/components/area-chart/area-chart.stories.tsx
@@ -4,7 +4,7 @@ import Label from '../label';
 import Button from '../button';
 import Badge from '../badge';
 import Container from '../container';
-import { ArrowUpRight, ArrowUp } from 'lucide-react';
+import { ArrowUpRight, ArrowUp, AlertCircle } from 'lucide-react';
 
 const areaChartData = [
 	{ month: 'January', sales: 186, expenses: 80 },
@@ -25,6 +25,9 @@ const largeValuesData = [
 	{ month: 'June', pageviews: 18500, sessions: 8800 },
 ];
 
+// Empty data for demonstrating custom no data component
+const emptyData: { month: string; sales: number; expenses: number }[] = [];
+
 const dataKeys = [ 'sales', 'expenses' ];
 const largeDataKeys = [ 'pageviews', 'sessions' ];
 
@@ -143,6 +146,18 @@ const yAxisFormatter = ( value: number ) => {
 	return value.toString();
 };
 
+// Custom No Data Component
+const CustomNoDataComponent = () => (
+	<div className="flex flex-col items-center justify-center p-6 rounded-lg bg-gray-50 text-gray-600">
+		<AlertCircle className="mb-3 text-amber-500" size={ 50 } />
+		<div className="text-base font-medium">No data found</div>
+		<p className="text-sm text-center text-gray-500 mt-1 max-w-xs">
+			There is no data available for this chart at the moment. Try
+			adjusting your filters or check back later.
+		</p>
+	</div>
+);
+
 const monthFormatterInteractive = ( value: string ) => {
 	const date = new Date( value );
 	return date.toLocaleDateString( 'en-US', {
@@ -265,10 +280,27 @@ export const AreaChartGradientWithFormattedYAxis: Story = {
 	},
 };
 
+export const AreaChartWithCustomNoDataComponent: Story = {
+	args: {
+		chartWidth: 600,
+		chartHeight: 300,
+		data: emptyData,
+		dataKeys,
+		colors,
+		variant: 'solid',
+		showXAxis: true,
+		xAxisDataKey: 'month',
+		showYAxis: true,
+		noDataComponent: <CustomNoDataComponent />,
+	},
+};
+
 AreaChartInteractive.storyName = 'Area Chart Gradient with Legend';
 AreaChartWithFormattedYAxis.storyName = 'Area Chart with Formatted Y-Axis';
 AreaChartGradientWithFormattedYAxis.storyName =
 	'Area Chart Gradient with Formatted Y-Axis';
+AreaChartWithCustomNoDataComponent.storyName =
+	'Area Chart with Custom No Data Component';
 
 type Story1 = StoryFn<typeof AreaChart>;
 
diff --git a/src/components/area-chart/area-chart.tsx b/src/components/area-chart/area-chart.tsx
index 49fe39a4..2255206f 100644
--- a/src/components/area-chart/area-chart.tsx
+++ b/src/components/area-chart/area-chart.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
 import {
 	AreaChart as AreaChartWrapper,
 	Area,
@@ -101,6 +101,12 @@ interface AreaChartProps {
 		CategoricalChartProps,
 		'width' | 'height' | 'data'
 	>;
+
+	/**
+	 * Custom component to display when no data is available.
+	 * If not provided, a default "No data available" message will be displayed.
+	 */
+	noDataComponent?: ReactNode;
 }
 
 const AreaChart = ( {
@@ -132,6 +138,7 @@ const AreaChart = ( {
 			bottom: 6,
 		},
 	},
+	noDataComponent,
 }: AreaChartProps ) => {
 	const [ width, setWidth ] = useState( chartWidth );
 	const [ height, setHeight ] = useState( chartHeight );
@@ -179,9 +186,11 @@ const AreaChart = ( {
 
 	if ( ! data || data.length === 0 ) {
 		return (
-			<Label size="sm" variant="help">
-				No data available
-			</Label>
+			noDataComponent || (
+				<Label size="sm" variant="help">
+					No data available
+				</Label>
+			)
 		);
 	}
 
diff --git a/src/components/line-chart/line-chart.stories.tsx b/src/components/line-chart/line-chart.stories.tsx
index 42622a85..ea1ce637 100644
--- a/src/components/line-chart/line-chart.stories.tsx
+++ b/src/components/line-chart/line-chart.stories.tsx
@@ -39,6 +39,9 @@ const largeValuesData = [
 	{ month: 'June', pageviews: 15000, users: 6500 },
 ];
 
+// Empty data for demonstrating custom no data component
+const emptyData: { month: string; desktop: number }[] = [];
+
 const dataKeys = [ 'desktop', 'mobile' ];
 const biaxialDataKeys = [ 'visits', 'revenue' ];
 const largeDataKeys = [ 'pageviews', 'users' ];
@@ -70,6 +73,31 @@ const yAxisFormatter = ( value: number ) => {
 	return value.toString();
 };
 
+// Custom No Data Component
+const CustomNoDataComponent = () => (
+	<div className="flex flex-col items-center justify-center p-4 rounded-lg bg-gray-50 text-gray-600">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="48"
+			height="48"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			className="mb-3 text-gray-400"
+		>
+			<path d="M3 3v18h18" />
+			<path d="m19 9-5 5-4-4-3 3" />
+		</svg>
+		<div className="text-base font-medium">No chart data available</div>
+		<p className="text-sm text-gray-500 mt-1">
+			Please select a different time period or check your filters
+		</p>
+	</div>
+);
+
 type Story = StoryObj<typeof LineChart>;
 
 export const LineChartSimple: Story = {
@@ -197,3 +225,17 @@ export const BiaxialLineChartWithFormattedYAxis: Story = {
 		yAxisFontColor: [ '#3b82f6', '#10B981' ],
 	},
 };
+
+export const LineChartWithCustomNoDataComponent: Story = {
+	args: {
+		data: emptyData,
+		dataKeys: [ 'desktop' ],
+		colors: [ { stroke: '#3b82f6' } ],
+		showXAxis: true,
+		showYAxis: true,
+		xAxisDataKey: 'month',
+		chartWidth: 500,
+		chartHeight: 300,
+		noDataComponent: <CustomNoDataComponent />,
+	},
+};
diff --git a/src/components/line-chart/line-chart.tsx b/src/components/line-chart/line-chart.tsx
index bd58bbd4..cd5f634c 100644
--- a/src/components/line-chart/line-chart.tsx
+++ b/src/components/line-chart/line-chart.tsx
@@ -10,6 +10,7 @@ import {
 import ChartTooltipContent from './chart-tooltip-content';
 import Label from '../label';
 import type { CategoricalChartProps } from 'recharts/types/chart/generateCategoricalChart';
+import { type ReactNode } from 'react';
 
 // Default color constants
 const DEFAULT_FONT_COLOR = '#6B7280';
@@ -116,6 +117,12 @@ interface LineChartProps {
 	 * Biaxial chart.
 	 */
 	biaxial?: boolean;
+
+	/**
+	 * Custom component to display when no data is available.
+	 * If not provided, a default "No data available" message will be displayed.
+	 */
+	noDataComponent?: ReactNode;
 }
 
 const LineChart = ( {
@@ -143,6 +150,7 @@ const LineChart = ( {
 	strokeDasharray = '3 3',
 	gridColor = DEFAULT_GRID_COLOR,
 	biaxial = false,
+	noDataComponent,
 }: LineChartProps ) => {
 	const appliedColors = colors.length > 0 ? colors : DEFAULT_LINE_COLORS;
 
@@ -166,9 +174,11 @@ const LineChart = ( {
 
 	if ( ! data || data.length === 0 ) {
 		return (
-			<Label size="sm" variant="help">
-				No data available
-			</Label>
+			noDataComponent || (
+				<Label size="sm" variant="help">
+					No data available
+				</Label>
+			)
 		);
 	}