Charts: Add options support for X and Y axis (#41109)

* allow passing in axis options * changelog * passing through the class names * add options * move defaults to component to make them available when options is passed
Automattic · Jan 16, 2025 · 2fb664b · 2fb664b
1 parent 11f43c8
commit 2fb664b
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 2 deletions.
diff --git a/projects/js-packages/charts/changelog/add-x-y-axis-orientation b/projects/js-packages/charts/changelog/add-x-y-axis-orientation
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added passing through options for X, Y axis
diff --git a/projects/js-packages/charts/src/components/line-chart/line-chart.tsx b/projects/js-packages/charts/src/components/line-chart/line-chart.tsx
@@ -83,6 +83,7 @@ const LineChart: FC< LineChartProps > = ( {
 	withTooltips = true,
 	showLegend = false,
 	legendOrientation = 'horizontal',
+	options = {},
 } ) => {
 	const providerTheme = useChartTheme();
 
@@ -124,8 +125,13 @@ const LineChart: FC< LineChartProps > = ( {
 				yScale={ { type: 'linear', nice: true } }
 			>
 				<AnimatedGrid columns={ false } numTicks={ 4 } />
-				<AnimatedAxis orientation="bottom" numTicks={ 5 } tickFormat={ formatDateTick } />
-				<AnimatedAxis orientation="left" numTicks={ 4 } />
+				<AnimatedAxis
+					orientation="bottom"
+					numTicks={ 5 }
+					tickFormat={ formatDateTick }
+					{ ...options?.axis?.x }
+				/>
+				<AnimatedAxis orientation="left" numTicks={ 4 } { ...options?.axis?.y } />
 
 				{ data.map( ( seriesData, index ) => (
 					<AnimatedLineSeries

diff --git a/projects/js-packages/charts/src/components/line-chart/stories/index.stories.tsx b/projects/js-packages/charts/src/components/line-chart/stories/index.stories.tsx
@@ -27,6 +27,16 @@ Default.args = {
 	data: sampleData,
 	showLegend: false,
 	legendOrientation: 'horizontal',
+	options: {
+		axis: {
+			x: {
+				orientation: 'bottom',
+			},
+			y: {
+				orientation: 'left',
+			},
+		},
+	},
 };
 
 // Story with single data series

diff --git a/projects/js-packages/charts/src/types.ts b/projects/js-packages/charts/src/types.ts
@@ -1,5 +1,10 @@
+import { Orientation } from '@visx/axis';
 import type { CSSProperties } from 'react';
 
+type ValueOf< T > = T[ keyof T ];
+
+declare type OrientationType = ValueOf< typeof Orientation >;
+
 export type DataPoint = {
 	label: string;
 	value: number;
@@ -65,6 +70,15 @@ export type ChartTheme = {
 	gridColorDark: string;
 };
 
+declare type AxisOptions = {
+	orientation?: OrientationType;
+	numTicks?: number;
+	axisClassName?: string;
+	axisLineClassName?: string;
+	labelClassName?: string;
+	tickClassName?: string;
+};
+
 /**
  * Base properties shared across all chart components
  */
@@ -110,6 +124,16 @@ export type BaseChartProps< T = DataPoint | DataPointDate > = {
 	 * Grid visibility. x is default.
 	 */
 	gridVisibility?: 'x' | 'y' | 'xy' | 'none';
+
+	/**
+	 * More options for the chart.
+	 */
+	options?: {
+		axis?: {
+			x?: AxisOptions;
+			y?: AxisOptions;
+		};
+	};
 };
 
 /**