From 2a0577f88af180330dbbc2b3db5e9903d004e6bd Mon Sep 17 00:00:00 2001 From: Mariam Date: Sun, 17 May 2026 19:09:12 -0700 Subject: [PATCH] fix chart axis label prop spellings --- ...-e73d479c-dbe9-465a-b92c-6830f05aa9f9.json | 7 ++ ...-78af13e0-19ac-49d2-8e5c-73601a02968c.json | 7 ++ .../react-charting/etc/react-charting.api.md | 7 ++ .../CommonComponents/CartesianChart.base.tsx | 54 +++++++++---- .../CommonComponents/CartesianChart.types.ts | 79 +++++++++++++++---- .../HorizontalBarChartWithAxis.test.tsx | 14 ++++ .../VerticalBarChart.test.tsx | 18 +++++ .../library/etc/react-charts.api.md | 7 ++ .../CommonComponents/CartesianChart.tsx | 38 +++++---- .../CommonComponents/CartesianChart.types.ts | 79 +++++++++++++++---- .../HorizontalBarChartWithAxis.test.tsx | 11 +++ .../VerticalBarChart.test.tsx | 12 +++ 12 files changed, 272 insertions(+), 61 deletions(-) create mode 100644 change/@fluentui-react-charting-e73d479c-dbe9-465a-b92c-6830f05aa9f9.json create mode 100644 change/@fluentui-react-charts-78af13e0-19ac-49d2-8e5c-73601a02968c.json diff --git a/change/@fluentui-react-charting-e73d479c-dbe9-465a-b92c-6830f05aa9f9.json b/change/@fluentui-react-charting-e73d479c-dbe9-465a-b92c-6830f05aa9f9.json new file mode 100644 index 00000000000000..37f2422ec7d173 --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-charts-78af13e0-19ac-49d2-8e5c-73601a02968c.json b/change/@fluentui-react-charts-78af13e0-19ac-49d2-8e5c-73601a02968c.json new file mode 100644 index 00000000000000..5a5c75fe49f805 --- /dev/null +++ b/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" +} diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md index 99f2d6b9424c23..f7fb75bded190c 100644 --- a/packages/charts/react-charting/etc/react-charting.api.md +++ b/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; showRoundOffXTickValues?: boolean; + showYAxisLabels?: boolean; + showYAxisLabelsTooltip?: boolean; showYAxisLables?: boolean; showYAxisLablesTooltip?: boolean; stringDatasetForYAxisDomain?: string[]; diff --git a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index 9080da9c5ba80f..298f73f3e35f32 100644 --- a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/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,7 +437,7 @@ 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 && @@ -425,7 +445,7 @@ export class CartesianChartBase this.yAxisElement, yScalePrimary, this.props.noOfCharsToTruncate || 4, - this.props.showYAxisLablesTooltip || false, + this._showYAxisLabelsTooltip() || false, this._isRtl, ); @@ -1030,8 +1050,8 @@ 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`); @@ -1039,7 +1059,7 @@ export class CartesianChartBase } // 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 = { diff --git a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts index 3d54ade533a82c..d646761fdb6d67 100644 --- a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts +++ b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts @@ -404,27 +404,48 @@ export interface ICartesianChartProps { legendProps?: Partial; /** - *@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; /** diff --git a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx index 1dab08f7de7d97..ac98e4110f1134 100644 --- a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx +++ b/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 | undefined; + act(() => { + result = render( + , + ); + }); + expect(result!.container.firstChild).not.toBeNull(); + }); + it('Should render gradients on bars', () => { const { container } = render(); expect(container.firstChild).toMatchSnapshot(); diff --git a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.test.tsx b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.test.tsx index 18997747b4d28c..7595d774387f65 100644 --- a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.test.tsx +++ b/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 | undefined; + act(() => { + result = render( + , + ); + }); + expect(result!.container.firstChild).not.toBeNull(); + }); + + it('supports correctly spelled x-axis label rotation prop', () => { + let result: ReturnType | undefined; + act(() => { + result = render(); + }); + expect(result!.container.firstChild).not.toBeNull(); + }); + it('renders yAxisTickFormat correctly', () => { let result: ReturnType | undefined; act(() => { diff --git a/packages/charts/react-charts/library/etc/react-charts.api.md b/packages/charts/react-charts/library/etc/react-charts.api.md index b841ad9d64148c..4968454b030c4c 100644 --- a/packages/charts/react-charts/library/etc/react-charts.api.md +++ b/packages/charts/react-charts/library/etc/react-charts.api.md @@ -223,6 +223,7 @@ export interface CartesianChartProps { reflowProps?: { mode: 'none' | 'min-width'; }; + rotateXAxisLabels?: boolean; rotateXAxisLables?: boolean; roundedTicks?: boolean; secondaryYAxistitle?: string; @@ -231,7 +232,10 @@ export interface CartesianChartProps { yMaxValue?: number; }; secondaryYScaleType?: AxisScaleType; + showXAxisLabelsTooltip?: boolean; showXAxisLablesTooltip?: boolean; + showYAxisLabels?: boolean; + showYAxisLabelsTooltip?: boolean; showYAxisLables?: boolean; showYAxisLablesTooltip?: boolean; strokeWidth?: number; @@ -244,6 +248,7 @@ export interface CartesianChartProps { titleStyles?: TitleStyles; useUTC?: string | boolean; width?: number; + wrapXAxisLabels?: boolean; wrapXAxisLables?: boolean; xAxis?: AxisProps & { tickLayout?: 'default' | 'auto'; @@ -1491,6 +1496,8 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps { onChartMouseLeave?: () => void; points: any; showRoundOffXTickValues?: boolean; + showYAxisLabels?: boolean; + showYAxisLabelsTooltip?: boolean; showYAxisLables?: boolean; showYAxisLablesTooltip?: boolean; stringDatasetForYAxisDomain?: string[]; diff --git a/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx b/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx index e878b0320fbb2d..e63e8341f0c54b 100644 --- a/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx +++ b/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx @@ -67,11 +67,17 @@ export const CartesianChart: React.FunctionComponent point.y % 1 !== 0); }, [props.points]); const _tooltipId: string = useId('tooltip_'); + const showXAxisLabelsTooltip = props.showXAxisLabelsTooltip ?? props.showXAxisLablesTooltip; + const wrapXAxisLabels = props.wrapXAxisLabels ?? props.wrapXAxisLables; + const rotateXAxisLabelsProp = props.rotateXAxisLabels ?? props.rotateXAxisLables; + const showYAxisLabels = props.showYAxisLabels ?? props.showYAxisLables; + const showYAxisLabelsTooltip = props.showYAxisLabelsTooltip ?? props.showYAxisLablesTooltip; + /* Used for when WrapXAxisLabels props appeared. * 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. */ let _removalValueForTextTuncate: number = 0; const _yAxisTickText = React.useRef([]); @@ -88,7 +94,7 @@ export const CartesianChart: React.FunctionComponent { _fitParentContainer(); - if (props.showYAxisLables) { + if (showYAxisLabels) { const maxYAxisLabelLength = calculateMaxYAxisLabelLength(classes.yAxis!); if (startFromX !== maxYAxisLabelLength) { setStartFromX(maxYAxisLabelLength); @@ -117,7 +123,7 @@ export const CartesianChart: React.FunctionComponent { - if (props.showYAxisLablesTooltip) { + if (showYAxisLabelsTooltip) { return truncateString(str, props.noOfCharsToTruncate || 4); } @@ -212,12 +218,12 @@ export const CartesianChart: React.FunctionComponent { const numChars = props.noOfCharsToTruncate || 4; return val.toString().length > numChars ? `${val.toString().slice(0, numChars)}...` : val; @@ -592,7 +598,7 @@ export const CartesianChart: React.FunctionComponent 1) { @@ -633,7 +639,7 @@ export const CartesianChart: React.FunctionComponent; /** - *@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; @@ -544,13 +565,28 @@ export interface CartesianChartProps { yAxis?: AxisProps; /** - *@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; /** - *@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; } @@ -710,14 +746,29 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps { 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; /** diff --git a/packages/charts/react-charts/library/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx b/packages/charts/react-charts/library/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx index c6186e31b7ba3e..847ebc57a88dc9 100644 --- a/packages/charts/react-charts/library/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx +++ b/packages/charts/react-charts/library/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx @@ -517,6 +517,17 @@ describe('HorizontalBarChartWithAxis snapShot testing', () => { expect(component).toMatchSnapshot(); }); + it('supports correctly spelled y-axis label props', () => { + const { container } = render( + , + ); + expect(container.firstChild).not.toBeNull(); + }); + it('Should render gradients on bars', () => { const component = render(); expect(component).toMatchSnapshot(); diff --git a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx index 1dbe92bfa70130..f65ccc3d41690f 100644 --- a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx +++ b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx @@ -925,6 +925,18 @@ describe('VerticalBarChart snapShot testing', () => { expect(container.firstChild).toMatchSnapshot(); }); + it('supports correctly spelled x-axis label props', () => { + const { container } = render( + , + ); + expect(container.firstChild).not.toBeNull(); + }); + + it('supports correctly spelled x-axis label rotation prop', () => { + const { container } = render(); + expect(container.firstChild).not.toBeNull(); + }); + it('renders yAxisTickFormat correctly', () => { const { container } = render(); expect(container.firstChild).toMatchSnapshot();