Added Y Axis tick formatter

brainstormforce · Jan 9, 2025 · 4126b08 · 4126b08
1 parent a172a30
commit 4126b08
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/src/components/bar-chart/bar-chart.stories.tsx b/src/components/bar-chart/bar-chart.stories.tsx
@@ -156,7 +156,7 @@ export const BarChartSimple: Story = {
 		showTooltip: true,
 		tooltipIndicator: 'dot',
 		showCartesianGrid: true,
-		tickFormatter: monthFormatter,
+		xTickFormatter: monthFormatter,
 		yAxisDataKey: 'month',
 	},
 	render: ( args ) => (
@@ -177,7 +177,7 @@ export const BarChartHorizontal: Story = {
 		showYAxis: true,
 		showTooltip: true,
 		showCartesianGrid: false,
-		tickFormatter: monthFormatter,
+		xTickFormatter: monthFormatter,
 		yAxisDataKey: 'month',
 		xAxisFontSize: 'sm',
 		borderRadius: 5,
@@ -196,7 +196,7 @@ export const BarChartMultiple: Story = {
 		tooltipIndicator: 'dashed',
 		tooltipLabelKey: 'month',
 		showCartesianGrid: true,
-		tickFormatter: monthFormatter,
+		xTickFormatter: monthFormatter,
 		xAxisDataKey: 'month',
 		xAxisFontSize: 'sm',
 		borderRadius: 4,
@@ -215,7 +215,7 @@ export const BarChartStucked: Story = {
 		showTooltip: true,
 		showLegend: true,
 		showCartesianGrid: true,
-		tickFormatter: monthFormatter,
+		xTickFormatter: monthFormatter,
 		xAxisDataKey: 'month',
 		xAxisFontSize: 'sm',
 	},
@@ -235,7 +235,7 @@ export const BarChartInteractive: Story = {
 		showTooltip: true,
 		showLegend: false,
 		showCartesianGrid: true,
-		tickFormatter: monthFormatterInteractive,
+		xTickFormatter: monthFormatterInteractive,
 		xAxisDataKey: 'date',
 		xAxisFontSize: 'sm',
 		chartWidth: 900,
@@ -296,7 +296,7 @@ export const BarChartCard1: Story1 = ( args ) => (
 				data={ chartData }
 				dataKeys={ [ 'desktop' ] }
 				showCartesianGrid={ true }
-				tickFormatter={ monthFormatter }
+				xTickFormatter={ monthFormatter }
 				showXAxis={ true }
 				xAxisDataKey="month"
 				showYAxis={ false }
@@ -363,7 +363,7 @@ export const BarChartCard2: Story1 = ( args ) => (
 				showYAxis={ false }
 				showTooltip={ true }
 				showCartesianGrid={ true }
-				tickFormatter={ monthFormatter }
+				xTickFormatter={ monthFormatter }
 				xAxisDataKey="month"
 				borderRadius={ 4 }
 			/>
@@ -430,7 +430,7 @@ export const BarChartCard3: Story1 = ( args ) => (
 				showTooltip={ true }
 				showLegend={ true }
 				showCartesianGrid={ true }
-				tickFormatter={ monthFormatter }
+				xTickFormatter={ monthFormatter }
 				xAxisDataKey="month"
 			/>
 		</Container.Item>
@@ -493,7 +493,7 @@ export const BarChartCard4: Story1 = ( args ) => (
 				showYAxis={ true }
 				showTooltip={ true }
 				showCartesianGrid={ false }
-				tickFormatter={ monthFormatter }
+				xTickFormatter={ monthFormatter }
 				yAxisDataKey="month"
 				xAxisFontSize="sm"
 				borderRadius={ 5 }
@@ -553,7 +553,7 @@ export const AreaChartCard5: Story1 = ( args ) => (
 			<BarChart
 				data={ chartDataIteractive }
 				dataKeys={ [ 'desktop' ] }
-				tickFormatter={ monthFormatterInteractive }
+				xTickFormatter={ monthFormatterInteractive }
 				showXAxis={ true }
 				xAxisDataKey="date"
 				showYAxis={ false }
@@ -578,7 +578,7 @@ export const BarChartCard6: Story = {
 		showTooltip: true,
 		tooltipIndicator: 'dot',
 		showCartesianGrid: true,
-		tickFormatter: monthFormatter,
+		xTickFormatter: monthFormatter,
 		yAxisDataKey: 'month',
 		activeBar: {
 			fill: '#2563EB',

diff --git a/src/components/bar-chart/bar-chart.tsx b/src/components/bar-chart/bar-chart.tsx
@@ -58,7 +58,10 @@ interface BarChartProps {
 	showCartesianGrid?: boolean;
 
 	/** A function used to format the ticks on the axes, e.g., ```const monthFormatter = ( value: string ) => value.slice( 0, 3 );``` */
-	tickFormatter?: ( value: string ) => string;
+	xTickFormatter?: ( value: string ) => string;
+
+	/** A function used to format the ticks on the y-axis. */
+	yTickFormatter?: ( value: string ) => 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;
@@ -126,7 +129,8 @@ const BarChart = ( {
 	tooltipLabelKey,
 	showLegend = false,
 	showCartesianGrid = true,
-	tickFormatter,
+	xTickFormatter,
+	yTickFormatter,
 	xAxisDataKey,
 	yAxisDataKey,
 	xAxisFontSize = 'sm', // sm, md, lg
@@ -176,7 +180,7 @@ const BarChart = ( {
 						tickLine={ false }
 						axisLine={ false }
 						tickMargin={ 8 }
-						tickFormatter={ tickFormatter }
+						tickFormatter={ xTickFormatter }
 						tick={ {
 							fontSize: fontSizeVariant,
 							fill: xAxisFontColor,
@@ -191,6 +195,7 @@ const BarChart = ( {
 						tickLine={ false }
 						tickMargin={ 10 }
 						axisLine={ false }
+						tickFormatter={ yTickFormatter }
 						tick={ {
 							fontSize: fontSizeVariant,
 							fill: yAxisFontColor,
@@ -213,7 +218,7 @@ const BarChart = ( {
 							tickLine={ false }
 							tickMargin={ 10 }
 							axisLine={ false }
-							tickFormatter={ tickFormatter }
+							tickFormatter={ xTickFormatter }
 							tick={ {
 								fontSize: fontSizeVariant,
 								fill: yAxisFontColor,