fix chart axis label prop spellings

change/@fluentui-react-charting-e73d479c-dbe9-465a-b92c-6830f05aa9f9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add correctly spelled axis label chart props",
+  "packageName": "@fluentui/react-charting",
+  "email": "mariamsulakian@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-charts-78af13e0-19ac-49d2-8e5c-73601a02968c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add correctly spelled axis label chart props",
+  "packageName": "@fluentui/react-charts",
+  "email": "mariamsulakian@gmail.com",
+  "dependentChangeType": "patch"
+}

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

@@ -429,6 +429,7 @@ export interface ICartesianChartProps {
     margins?: IMargins;
     noOfCharsToTruncate?: number;
     parentRef?: HTMLElement | null;
+    rotateXAxisLabels?: boolean;
     rotateXAxisLables?: boolean;
     roundedTicks?: boolean;
     secondaryYAxistitle?: string;
@@ -437,7 +438,10 @@ export interface ICartesianChartProps {
         yMaxValue?: number;
     };
     secondaryYScaleType?: AxisScaleType;
+    showXAxisLabelsTooltip?: boolean;
     showXAxisLablesTooltip?: boolean;
+    showYAxisLabels?: boolean;
+    showYAxisLabelsTooltip?: boolean;
     showYAxisLables?: boolean;
     showYAxisLablesTooltip?: boolean;
     strokeWidth?: number;
@@ -453,6 +457,7 @@ export interface ICartesianChartProps {
     titleStyles?: ITitleStyles;
     useUTC?: boolean;
     width?: number;
+    wrapXAxisLabels?: boolean;
     wrapXAxisLables?: boolean;
     xAxis?: AxisProps & {
         tickLayout?: 'default' | 'auto';
@@ -1446,6 +1451,8 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     points: any;
     ref?: IRefObject<IChart>;
     showRoundOffXTickValues?: boolean;
+    showYAxisLabels?: boolean;
+    showYAxisLabelsTooltip?: boolean;
     showYAxisLables?: boolean;
     showYAxisLablesTooltip?: boolean;
     stringDatasetForYAxisDomain?: string[];

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

@@ -88,7 +88,7 @@ export class CartesianChartBase
    * To display the total word (space separated words), Need to have more space than usual.
    * This height will get total height need to disaply total word.
    * These value need to be removed from actual svg height/graph height.
-   * Defalut value is 0. And this values calculted when 'wrapXAxisLables' or 'showXAxisLablesTooltip' is true.
+   * Defalut value is 0. And this values calculted when 'wrapXAxisLabels' or 'showXAxisLabelsTooltip' is true.
    */
   private _removalValueForTextTuncate: number = 0;
   private _yAxisTickText: string[] = [];
@@ -112,9 +112,29 @@ export class CartesianChartBase
     this._tooltipId = getId('tooltip_');
   }
 
+  private _showXAxisLabelsTooltip(): boolean | undefined {
+    return this.props.showXAxisLabelsTooltip ?? this.props.showXAxisLablesTooltip;
+  }
+
+  private _wrapXAxisLabels(): boolean | undefined {
+    return this.props.wrapXAxisLabels ?? this.props.wrapXAxisLables;
+  }
+
+  private _rotateXAxisLabels(): boolean | undefined {
+    return this.props.rotateXAxisLabels ?? this.props.rotateXAxisLables;
+  }
+
+  private _showYAxisLabels(): boolean | undefined {
+    return this.props.showYAxisLabels ?? this.props.showYAxisLables;
+  }
+
+  private _showYAxisLabelsTooltip(): boolean | undefined {
+    return this.props.showYAxisLabelsTooltip ?? this.props.showYAxisLablesTooltip;
+  }
+
   public componentDidMount(): void {
     this._fitParentContainer();
-    if (this.props.showYAxisLables) {
+    if (this._showYAxisLabels()) {
       const maxYAxisLabelLength = this.calculateMaxYAxisLabelLength(this._classNames.yAxis!);
       if (this.state.startFromX !== maxYAxisLabelLength) {
         this.setState({
@@ -139,7 +159,7 @@ export class CartesianChartBase
     if (prevProps.height !== this.props.height || prevProps.width !== this.props.width) {
       this._fitParentContainer();
     }
-    if (this.props.showYAxisLables) {
+    if (this._showYAxisLabels()) {
       const maxYAxisLabelLength = this.calculateMaxYAxisLabelLength(this._classNames.yAxis!);
       if (this.state.startFromX !== maxYAxisLabelLength) {
         this.setState({
@@ -160,7 +180,7 @@ export class CartesianChartBase
 
   public calculateMaxYAxisLabelLength = (className: string): number => {
     const formatTickLabel = (str: string) => {
-      if (this.props.showYAxisLablesTooltip) {
+      if (this._showYAxisLabelsTooltip()) {
         return truncateString(str, this.props.noOfCharsToTruncate || 4);
       }
 
@@ -239,13 +259,13 @@ export class CartesianChartBase
         showRoundOffXTickValues: this.props.showRoundOffXTickValues ?? true,
         xAxisCount: this.props.xAxisTickCount,
         xAxistickSize: this.props.xAxistickSize,
-        tickPadding: this.props.tickPadding || this.props.showXAxisLablesTooltip ? 5 : 10,
+        tickPadding: this.props.tickPadding || this._showXAxisLabelsTooltip() ? 5 : 10,
         xAxisPadding: this.props.xAxisPadding,
         xAxisInnerPadding: this.props.xAxisInnerPadding,
         xAxisOuterPadding: this.props.xAxisOuterPadding,
         containerWidth: this.state.containerWidth,
         hideTickOverlap:
-          this.props.rotateXAxisLables || this.props.xAxis?.tickLayout === 'auto' ? false : this.props.hideTickOverlap,
+          this._rotateXAxisLabels() || this.props.xAxis?.tickLayout === 'auto' ? false : this.props.hideTickOverlap,
         calcMaxLabelWidth: this._calcMaxLabelWidthWithTransform,
         xMinValue: this.props.xMinValue,
         xMaxValue: this.props.xMaxValue,
@@ -406,7 +426,7 @@ export class CartesianChartBase
         // eslint-disable-next-line no-empty
       } catch (e) {}
       // Used to display tooltip at x axis labels.
-      if (this.props.showXAxisLablesTooltip || this.props.xAxis?.tickLayout === 'auto') {
+      if (this._showXAxisLabelsTooltip() || this.props.xAxis?.tickLayout === 'auto') {
         const xAxisElement = this.xAxisElement ? d3Select(this.xAxisElement).call(xScale) : null;
         const tooltipProps = {
           tooltipCls: this._classNames.tooltip!,
@@ -417,15 +437,15 @@ export class CartesianChartBase
         xAxisElement && tooltipOfAxislabels(tooltipProps);
       }
       // Used to display tooltip at y axis labels.
-      if (this.props.showYAxisLablesTooltip) {
+      if (this._showYAxisLabelsTooltip()) {
         // To create y axis tick values by if specified truncating the rest of the text
         // and showing elipsis or showing the whole string,
         yScalePrimary &&
           createYAxisLabels(
             this.yAxisElement,
             yScalePrimary,
             this.props.noOfCharsToTruncate || 4,
-            this.props.showYAxisLablesTooltip || false,
+            this._showYAxisLabelsTooltip() || false,
             this._isRtl,
           );
 
@@ -1030,16 +1050,16 @@ export class CartesianChartBase
   private _calcMaxLabelWidthWithTransform = (x: (string | number)[]) => {
     // Case: rotated labels
     if (
-      !this.props.wrapXAxisLables &&
-      this.props.rotateXAxisLables &&
+      !this._wrapXAxisLabels() &&
+      this._rotateXAxisLabels() &&
       this.props.xAxisType! === XAxisTypes.StringAxis
     ) {
       const longestLabelWidth = calculateLongestLabelWidth(x, `.${this._classNames.xAxis} text`);
       return Math.ceil(longestLabelWidth * Math.cos(Math.PI / 4));
     }
 
     // Case: truncated labels
-    if (this.props.showXAxisLablesTooltip) {
+    if (this._showXAxisLabelsTooltip()) {
       const tickLabels = x.map(val => {
         const numChars = this.props.noOfCharsToTruncate || 4;
         return val.toString().length > numChars ? `${val.toString().slice(0, numChars)}...` : val;
@@ -1050,7 +1070,7 @@ export class CartesianChartBase
     }
 
     // Case: wrapped labels
-    if (this.props.wrapXAxisLables) {
+    if (this._wrapXAxisLabels()) {
       // FIXME: Calculate the max width of lines instead of words. This requires applying
       // the wrapping transformation earlier to obtain the actual rendered lines.
       const words: string[] = [];
@@ -1078,7 +1098,7 @@ export class CartesianChartBase
      * No need to re-calculate every time the chart renders and same time need to get an update. So using setState.
      * Required space will be calculated first time chart rendering and if any width/height of chart updated.
      * */
-    if (this.props.wrapXAxisLables || this.props.showXAxisLablesTooltip) {
+    if (this._wrapXAxisLabels() || this._showXAxisLabelsTooltip()) {
       let maxXAxisLabelWidth: number | undefined;
       if (this.props.xAxisType === XAxisTypes.StringAxis) {
         if ((this.props.datasetForXAxisDomain?.length || 0) > 1) {
@@ -1091,7 +1111,7 @@ export class CartesianChartBase
       const wrapLabelProps = {
         node: this.xAxisElement,
         xAxis: this._xScale,
-        showXAxisLablesTooltip: this.props.showXAxisLablesTooltip || false,
+        showXAxisLablesTooltip: this._showXAxisLabelsTooltip() || false,
         noOfCharsToTruncate: this.props.noOfCharsToTruncate || 4,
         width: maxXAxisLabelWidth,
         container: this.chartContainer,
@@ -1100,8 +1120,8 @@ export class CartesianChartBase
     }
 
     if (
-      !this.props.wrapXAxisLables &&
-      this.props.rotateXAxisLables &&
+      !this._wrapXAxisLabels() &&
+      this._rotateXAxisLabels() &&
       this.props.xAxisType! === XAxisTypes.StringAxis
     ) {
       const rotateLabelProps = {

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

@@ -404,27 +404,48 @@ export interface ICartesianChartProps {
   legendProps?: Partial<ILegendsProps>;
 
   /**
-   *@default false
-   *Used for to elipse x axis labes and show tooltip on x axis labels
+   * @default false
+   * Used to ellipse x-axis labels and show a tooltip on x-axis labels.
+   */
+  showXAxisLabelsTooltip?: boolean;
+
+  /**
+   * @deprecated Use `showXAxisLabelsTooltip` instead.
+   * @default false
+   * Used to ellipse x-axis labels and show a tooltip on x-axis labels.
    */
   showXAxisLablesTooltip?: boolean;
 
   /**
    * @default 4
-   * Used for X axis labels
-   * While Giving showXAxisLablesTooltip prop, need to define after how many chars, we need to truncate the word.
+   * Used for X axis labels.
+   * When setting `showXAxisLabelsTooltip`, defines after how many chars the word should be truncated.
    */
   noOfCharsToTruncate?: number;
 
   /**
    * @default false
-   * Used to wrap x axis labels values (whole value)
+   * Used to wrap x-axis label values (whole value).
+   */
+  wrapXAxisLabels?: boolean;
+
+  /**
+   * @deprecated Use `wrapXAxisLabels` instead.
+   * @default false
+   * Used to wrap x-axis label values (whole value).
    */
   wrapXAxisLables?: boolean;
 
   /**
    * @default false
-   * Used to rotate x axis labels by 45 degrees
+   * Used to rotate x-axis labels by 45 degrees.
+   */
+  rotateXAxisLabels?: boolean;
+
+  /**
+   * @deprecated Use `rotateXAxisLabels` instead.
+   * @default false
+   * Used to rotate x-axis labels by 45 degrees.
    */
   rotateXAxisLables?: boolean;
 
@@ -591,14 +612,29 @@ export interface ICartesianChartProps {
   yAxis?: AxisProps;
 
   /**
-   *@default false
-   *Used for to elipse y axis labes and show tooltip on x axis labels
+   * @default false
+   * Used to ellipse y-axis labels and show a tooltip on y-axis labels.
+   */
+  showYAxisLabelsTooltip?: boolean;
+
+  /**
+   * @deprecated Use `showYAxisLabelsTooltip` instead.
+   * @default false
+   * Used to ellipse y-axis labels and show a tooltip on y-axis labels.
    */
   showYAxisLablesTooltip?: boolean;
 
   /**
-   *@default false
-   *Used for showing complete y axis lables   */
+   * @default false
+   * Used for showing complete y-axis labels.
+   */
+  showYAxisLabels?: boolean;
+
+  /**
+   * @deprecated Use `showYAxisLabels` instead.
+   * @default false
+   * Used for showing complete y-axis labels.
+   */
   showYAxisLables?: boolean;
 }
 
@@ -788,14 +824,29 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
   xAxisOuterPadding?: number;
 
   /**
-   *@default false
-   *Used for to elipse y axis labes and show tooltip on x axis labels
+   * @default false
+   * Used to ellipse y-axis labels and show a tooltip on y-axis labels.
+   */
+  showYAxisLabelsTooltip?: boolean;
+
+  /**
+   * @deprecated Use `showYAxisLabelsTooltip` instead.
+   * @default false
+   * Used to ellipse y-axis labels and show a tooltip on y-axis labels.
    */
   showYAxisLablesTooltip?: boolean;
 
   /**
-   *@default false
-   *Used for showing complete y axis lables   */
+   * @default false
+   * Used for showing complete y-axis labels.
+   */
+  showYAxisLabels?: boolean;
+
+  /**
+   * @deprecated Use `showYAxisLabels` instead.
+   * @default false
+   * Used for showing complete y-axis labels.
+   */
   showYAxisLables?: boolean;
 
   /**

packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx

@@ -74,6 +74,20 @@ describe('HorizontalBarChartWithAxis snapShot testing', () => {
     expect(result!.container.firstChild).toMatchSnapshot();
   });
 
+  it('supports correctly spelled y-axis label props', () => {
+    let result: ReturnType<typeof render> | undefined;
+    act(() => {
+      result = render(
+        <HorizontalBarChartWithAxis
+          data={pointsForWrapLabels}
+          showYAxisLabels={true}
+          showYAxisLabelsTooltip={true}
+        />,
+      );
+    });
+    expect(result!.container.firstChild).not.toBeNull();
+  });
+
   it('Should render gradients on bars', () => {
     const { container } = render(<HorizontalBarChartWithAxis data={pointsHBCWA} enableGradient={true} />);
     expect(container.firstChild).toMatchSnapshot();

packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.test.tsx

@@ -70,6 +70,24 @@ describe('VerticalBarChart snapShot testing', () => {
     expect(result!.container.firstChild).toMatchSnapshot();
   });
 
+  it('supports correctly spelled x-axis label props', () => {
+    let result: ReturnType<typeof render> | undefined;
+    act(() => {
+      result = render(
+        <VerticalBarChart data={chartPointsVBC} showXAxisLabelsTooltip={true} wrapXAxisLabels={true} />,
+      );
+    });
+    expect(result!.container.firstChild).not.toBeNull();
+  });
+
+  it('supports correctly spelled x-axis label rotation prop', () => {
+    let result: ReturnType<typeof render> | undefined;
+    act(() => {
+      result = render(<VerticalBarChart data={chartPointsVBC} rotateXAxisLabels={true} />);
+    });
+    expect(result!.container.firstChild).not.toBeNull();
+  });
+
   it('renders yAxisTickFormat correctly', () => {
     let result: ReturnType<typeof render> | undefined;
     act(() => {