feat(react-charting): hide overlapping x-axis tick labels

change/@fluentui-react-charting-8192a933-0ea7-44b9-979a-bc696517a06a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: hide overlapping x-axis tick labels",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -278,6 +278,7 @@ export interface ICartesianChartProps {
     focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;
     height?: number;
     hideLegend?: boolean;
+    hideTickOverlap?: boolean;
     hideTooltip?: boolean;
     href?: string;
     // (undocumented)
@@ -302,7 +303,7 @@ export interface ICartesianChartProps {
     theme?: ITheme;
     tickFormat?: string;
     tickPadding?: number;
-    tickValues?: number[] | Date[];
+    tickValues?: number[] | Date[] | string[];
     timeFormatLocale?: TimeLocaleDefinition;
     useUTC?: boolean;
     width?: number;
@@ -1089,7 +1090,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     getAxisData?: any;
     getDomainMargins?: (containerWidth: number) => IMargins;
     // Warning: (ae-forgotten-export) The symbol "IDomainNRange" needs to be exported by the entry point index.d.ts
-    getDomainNRangeValues: (points: ILineChartPoints[] | IVerticalBarChartDataPoint[] | IVerticalStackedBarDataPoint[] | IHorizontalBarChartWithAxisDataPoint[] | IGroupedVerticalBarChartData[] | IHeatMapChartDataPoint[], margins: IMargins, width: number, chartType: ChartTypes, isRTL: boolean, xAxisType: XAxisTypes, barWidth: number, tickValues: Date[] | number[] | undefined, shiftX: number) => IDomainNRange;
+    getDomainNRangeValues: (points: ILineChartPoints[] | IVerticalBarChartDataPoint[] | IVerticalStackedBarDataPoint[] | IHorizontalBarChartWithAxisDataPoint[] | IGroupedVerticalBarChartData[] | IHeatMapChartDataPoint[], margins: IMargins, width: number, chartType: ChartTypes, isRTL: boolean, xAxisType: XAxisTypes, barWidth: number, tickValues: Date[] | number[] | string[] | undefined, shiftX: number) => IDomainNRange;
     getGraphData?: any;
     getmargins?: (margins: IMargins) => void;
     getMinMaxOfYAxis: (points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[], yAxisType: YAxisType | undefined) => {
@@ -1107,7 +1108,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     stringDatasetForYAxisDomain?: string[];
     svgFocusZoneProps?: IFocusZoneProps;
     tickParams?: {
-        tickValues?: number[] | Date[];
+        tickValues?: number[] | Date[] | string[];
         tickFormat?: string;
     };
     xAxisInnerPadding?: number;

packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx

@@ -294,6 +294,12 @@ export class CartesianChartBase
         xAxisPadding: this.props.xAxisPadding,
         xAxisInnerPadding: this.props.xAxisInnerPadding,
         xAxisOuterPadding: this.props.xAxisOuterPadding,
+        containerWidth: this.state.containerWidth,
+        hideTickOverlap:
+          this.props.hideTickOverlap &&
+          !this.props.rotateXAxisLables &&
+          !this.props.showXAxisLablesTooltip &&
+          !this.props.wrapXAxisLables,
       };
 
       const YAxisParams = {
@@ -324,7 +330,12 @@ export class CartesianChartBase
       let tickValues: (string | number)[];
       switch (this.props.xAxisType!) {
         case XAxisTypes.NumericAxis:
-          ({ xScale, tickValues } = createNumericXAxis(XAxisParams, this.props.chartType, culture));
+          ({ xScale, tickValues } = createNumericXAxis(
+            XAxisParams,
+            this.props.tickParams!,
+            this.props.chartType,
+            culture,
+          ));
           break;
         case XAxisTypes.DateAxis:
           ({ xScale, tickValues } = createDateXAxis(
@@ -346,7 +357,12 @@ export class CartesianChartBase
           ));
           break;
         default:
-          ({ xScale, tickValues } = createNumericXAxis(XAxisParams, this.props.chartType, culture));
+          ({ xScale, tickValues } = createNumericXAxis(
+            XAxisParams,
+            this.props.tickParams!,
+            this.props.chartType,
+            culture,
+          ));
       }
       this._xScale = xScale;
       this._tickValues = tickValues;

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

@@ -236,7 +236,7 @@ export interface ICartesianChartProps {
    * This is a optional parameter if not specified D3 will decide which values appear on the x-axis for you
    * Please look at https://github.com/d3/d3-scale for more information on how D3 decides what data to appear on the axis of chart
    */
-  tickValues?: number[] | Date[];
+  tickValues?: number[] | Date[] | string[];
 
   /**
    * the format for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d'
@@ -452,6 +452,12 @@ export interface ICartesianChartProps {
    * the public methods and properties of the component.
    */
   componentRef?: IRefObject<IChart>;
+
+  /**
+   * Determines whether overlapping x-axis tick labels should be hidden.
+   * @default false
+   */
+  hideTickOverlap?: boolean;
 }
 
 export interface IYValueHover {
@@ -551,7 +557,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
    * Tick params are applicable for date axis only.
    */
   tickParams?: {
-    tickValues?: number[] | Date[];
+    tickValues?: number[] | Date[] | string[];
     tickFormat?: string;
   };
 
@@ -684,7 +690,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     isRTL: boolean,
     xAxisType: XAxisTypes,
     barWidth: number,
-    tickValues: Date[] | number[] | undefined,
+    tickValues: Date[] | number[] | string[] | undefined,
     shiftX: number,
   ) => IDomainNRange;
 

packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts

@@ -308,6 +308,7 @@ export const transformPlotlyJsonToVSBCProps = (
     mode: 'plotly',
     secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle,
     secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions,
+    hideTickOverlap: true,
   };
 };
 
@@ -358,6 +359,7 @@ export const transformPlotlyJsonToGVBCProps = (
     mode: 'plotly',
     secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle,
     secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions,
+    hideTickOverlap: true,
   };
 };
 
@@ -449,6 +451,7 @@ export const transformPlotlyJsonToVBCProps = (
     xAxisTitle,
     yAxisTitle,
     mode: 'plotly',
+    hideTickOverlap: true,
   };
 };
 
@@ -497,6 +500,7 @@ export const transformPlotlyJsonToScatterChartProps = (
       secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle,
       secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions,
       mode,
+      hideTickOverlap: true,
     } as IAreaChartProps;
   } else {
     return {
@@ -506,6 +510,7 @@ export const transformPlotlyJsonToScatterChartProps = (
       yAxisTitle,
       secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle,
       secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions,
+      hideTickOverlap: true,
     } as ILineChartProps;
   }
 };
@@ -561,6 +566,7 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (
         width: input.layout?.width ?? 600,
       },
     },
+    hideTickOverlap: true,
   };
 };
 
@@ -618,6 +624,7 @@ export const transformPlotlyJsonToHeatmapProps = (input: PlotlySchema): IHeatMap
     xAxisTitle,
     yAxisTitle,
     sortOrder: 'none',
+    hideTickOverlap: true,
   };
 };