feat(react-charts): add support for tickmode in declarative chart (microsoft#35121)

Co-authored-by: Anush <[email protected]>

Author: Anush2303

change/@fluentui-react-charts-00310f28-f856-48b5-926c-5c4f192e0d8b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add support for tickmode in declarative chart",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/etc/react-charts.api.md

@@ -72,6 +72,12 @@ export interface AreaChartStyles extends CartesianChartStyles {
 // @public
 export type AxisCategoryOrder = 'default' | 'data' | string[] | 'category ascending' | 'category descending' | 'total ascending' | 'total descending' | 'min ascending' | 'min descending' | 'max ascending' | 'max descending' | 'sum ascending' | 'sum descending' | 'mean ascending' | 'mean descending' | 'median ascending' | 'median descending';
 
+// @public
+export type AxisProps = {
+    tickStep?: number | string;
+    tick0?: number | Date;
+};
+
 // @public
 export type AxisScaleType = 'default' | 'log';
 
@@ -179,6 +185,7 @@ export interface CartesianChartProps {
     useUTC?: string | boolean;
     width?: number;
     wrapXAxisLables?: boolean;
+    xAxis?: AxisProps;
     xAxisAnnotation?: string;
     xAxisCategoryOrder?: AxisCategoryOrder;
     xAxisTickCount?: number;
@@ -187,10 +194,12 @@ export interface CartesianChartProps {
     xAxisTitle?: string;
     xMaxValue?: number;
     xScaleType?: AxisScaleType;
+    yAxis?: AxisProps;
     yAxisAnnotation?: string;
     yAxisCategoryOrder?: AxisCategoryOrder;
     yAxisTickCount?: number;
     yAxisTickFormat?: any;
+    yAxisTickValues?: number[] | Date[] | string[];
     yAxisTitle?: string;
     yMaxValue?: number;
     yMinValue?: number;

packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx

@@ -270,6 +270,8 @@ export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps
       containerWidth: containerWidth,
       hideTickOverlap: props.rotateXAxisLables ? false : props.hideTickOverlap,
       calcMaxLabelWidth: _calcMaxLabelWidthWithTransform,
+      tickStep: props.xAxis?.tickStep,
+      tick0: props.xAxis?.tick0,
     };
 
     /**
@@ -341,6 +343,9 @@ export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps
       // and the parent chart(HBWA/Vertical etc..) for more details refer example
       // http://using-d3js.com/04_07_ordinal_scales.html
       yAxisPadding: props.yAxisPadding || 0,
+      tickValues: props.yAxisTickValues,
+      tickStep: props.yAxis?.tickStep,
+      tick0: props.yAxis?.tick0,
     };
     /**
      * These scales used for 2 purposes.

packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.types.ts

@@ -15,6 +15,7 @@ import {
   ScatterChartPoints,
   GanttChartDataPoint,
   AxisCategoryOrder,
+  AxisProps,
   AxisScaleType,
 } from '../../types/index';
 import { TimeLocaleDefinition } from 'd3-time-format';
@@ -479,6 +480,24 @@ export interface CartesianChartProps {
    * @default 'default'
    */
   secondaryYScaleType?: AxisScaleType;
+
+  /**
+   * Explicit set of tick values for the y-axis.
+   * If provided, these values override automatic tick generation.
+   */
+  yAxisTickValues?: number[] | Date[] | string[];
+
+  /**
+   * Configuration for the x-axis.
+   * Use this to control `tickStep`, `tick0`, etc.
+   */
+  xAxis?: AxisProps;
+
+  /**
+   * Configuration for the y-axis.
+   * Use this to control `tickStep`, `tick0`, etc.
+   */
+  yAxis?: AxisProps;
 }
 
 export interface YValueHover {