Fix overlapping axis labels on smaller viewports

change/@uifabric-charting-8b8460f0-0d39-4472-a435-f031b33918cb.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix overlapping axis labels on smaller viewports",
+  "packageName": "@uifabric/charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charting/package.json

@@ -56,6 +56,7 @@
     "@types/d3-selection": "1.4.1",
     "@types/d3-shape": "^1.2.3",
     "@types/d3-time-format": "^2.1.0",
+    "@types/d3-time": "^1.1.0",
     "@uifabric/icons": "^7.9.5",
     "@uifabric/set-version": "^7.0.24",
     "@types/d3-hierarchy": "2.0.0",
@@ -66,6 +67,7 @@
     "d3-selection": "1.3.0",
     "d3-shape": "^1.2.0",
     "d3-time-format": "^2.1.3",
+    "d3-time": "^1.1.0",
     "d3-hierarchy": "2.0.0",
     "prop-types": "^15.7.2",
     "tslib": "^1.10.0"

packages/charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap

@@ -26,6 +26,9 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone6"
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -377,6 +380,9 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone31"
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -708,6 +714,9 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone15"
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -893,6 +902,9 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone22"
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -1244,6 +1256,9 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone40"
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -1595,6 +1610,9 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone49"
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -1946,6 +1964,9 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone58"
     onFocus={[Function]}
     onKeyDown={[Function]}

packages/charting/src/components/CommonComponents/CartesianChart.base.tsx

@@ -27,6 +27,8 @@ import {
   createWrapOfXLabels,
   Points,
   pointTypes,
+  calculateLongestLabelWidth,
+  ChartTypes,
 } from '../../utilities/index';
 import { LegendShape, Shape } from '../Legends/index';
 
@@ -67,6 +69,7 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
   private idForGraph: string;
   private _reqID: number;
   private _isRtl: boolean = getRTL();
+  private _tickValues: (string | number)[];
 
   constructor(props: IModifiedCartesianChartProps) {
     super(props);
@@ -157,19 +160,26 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let xScale: any;
+    let tickValues: (string | number)[];
     switch (this.props.xAxisType!) {
       case XAxisTypes.NumericAxis:
-        xScale = createNumericXAxis(XAxisParams, culture);
+        ({ xScale, tickValues } = createNumericXAxis(XAxisParams, culture));
         break;
       case XAxisTypes.DateAxis:
-        xScale = createDateXAxis(XAxisParams, this.props.tickParams!);
+        ({ xScale, tickValues } = createDateXAxis(XAxisParams, this.props.tickParams!));
         break;
       case XAxisTypes.StringAxis:
-        xScale = createStringXAxis(XAxisParams, this.props.tickParams!, this.props.datasetForXAxisDomain!, culture);
+        ({ xScale, tickValues } = createStringXAxis(
+          XAxisParams,
+          this.props.tickParams!,
+          this.props.datasetForXAxisDomain!,
+          culture,
+        ));
         break;
       default:
-        xScale = createNumericXAxis(XAxisParams, culture);
+        ({ xScale, tickValues } = createNumericXAxis(XAxisParams, culture));
     }
+    this._tickValues = tickValues;
 
     /*
      * To enable wrapping of x axis tick values or to disaply complete x axis tick values,
@@ -244,7 +254,7 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
         ref={(rootElem: HTMLDivElement) => (this.chartContainer = rootElem)}
         onMouseLeave={this.props.onChartMouseLeave}
       >
-        <FocusZone direction={focusDirection} {...svgFocusZoneProps}>
+        <FocusZone direction={focusDirection} className={this._classNames.chartWrapper} {...svgFocusZoneProps}>
           <svg
             width={svgDimensions.width}
             height={svgDimensions.height}
@@ -471,7 +481,9 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
           parseFloat(legendContainerComputedStyles.marginBottom || '0');
       }
       const container = this.props.parentRef ? this.props.parentRef : this.chartContainer;
-      const currentContainerWidth = container.getBoundingClientRect().width;
+      const currentContainerWidth = this.props.enableReflow
+        ? Math.max(container.getBoundingClientRect().width, this._calculateChartMinWidth())
+        : container.getBoundingClientRect().width;
       const currentContainerHeight =
         container.getBoundingClientRect().height > legendContainerHeight
           ? container.getBoundingClientRect().height
@@ -499,4 +511,42 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
         this.xAxisElement,
       );
   };
+
+  private _calculateChartMinWidth = (): number => {
+    let labelWidth = 10; // Total padding on the left and right sides of the label
+
+    // Case: truncated labels
+    if (this.props.showXAxisLablesTooltip) {
+      const tickValues = this._tickValues.map(val => {
+        const numChars = this.props.noOfCharsToTruncate || 4;
+        return val.toString().length > numChars ? `${val.toString().slice(0, numChars)}...` : val;
+      });
+
+      const longestLabelWidth = calculateLongestLabelWidth(tickValues, `.${this._classNames.xAxis} text`);
+      labelWidth += Math.ceil(longestLabelWidth);
+    }
+    // Case: wrapped labels
+    else if (this.props.wrapXAxisLables) {
+      const words: string[] = [];
+      this._tickValues.forEach((val: string) => {
+        words.push(...val.toString().split(/\s+/));
+      });
+
+      const longestLabelWidth = calculateLongestLabelWidth(words, `.${this._classNames.xAxis} text`);
+      labelWidth += Math.max(Math.ceil(longestLabelWidth), 10);
+    }
+    // Default case
+    else {
+      const longestLabelWidth = calculateLongestLabelWidth(this._tickValues, `.${this._classNames.xAxis} text`);
+      labelWidth += Math.ceil(longestLabelWidth);
+    }
+
+    let minChartWidth = this.margins.left! + this.margins.right! + labelWidth * (this._tickValues.length - 1);
+
+    if (this.props.chartType === ChartTypes.VerticalBarChart && this.props.xAxisType === XAxisTypes.NumericAxis) {
+      minChartWidth += this.props.barwidth || 32;
+    }
+
+    return minChartWidth;
+  };
 }

packages/charting/src/components/CommonComponents/CartesianChart.styles.ts

@@ -19,6 +19,9 @@ export const getStyles = (props: ICartesianChartStyleProps): ICartesianChartStyl
       },
       className,
     ],
+    chartWrapper: {
+      overflow: 'auto',
+    },
     xAxis: {
       selectors: {
         text: [

packages/charting/src/components/CommonComponents/CartesianChart.types.ts

@@ -142,6 +142,11 @@ export interface ICartesianChartStyles {
    * styles set for the shape object in the callout
    */
   shapeStyles?: IStyle;
+
+  /**
+   * Styles for the chart wrapper div
+   */
+  chartWrapper?: IStyle;
 }
 
 export interface ICartesianChartProps {
@@ -326,6 +331,12 @@ export interface ICartesianChartProps {
    * props for the svg; use this to include aria-* or other attributes on the tag
    */
   svgProps?: React.SVGProps<SVGSVGElement>;
+
+  /**
+   * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows
+   * @default True for LineChart but False for other charts
+   */
+  enableReflow?: boolean;
 }
 
 export interface IYValueHover {

packages/charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap

@@ -26,6 +26,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -611,6 +614,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone19"
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -1176,6 +1182,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone9"
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -1417,6 +1426,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone13"
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -2002,6 +2014,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone25"
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -2587,6 +2602,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone31"
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -3172,6 +3190,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone37"
     onFocus={[Function]}
     onKeyDown={[Function]}

packages/charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap

@@ -26,6 +26,9 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone1"
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -368,6 +371,9 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone5"
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -799,6 +805,9 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone9"
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -975,6 +984,9 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone11"
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -1317,6 +1329,9 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         &:focus {
           outline: none;
         }
+        {
+          overflow: auto;
+        }
     data-focuszone-id="FocusZone15"
     onFocus={[Function]}
     onKeyDown={[Function]}

packages/charting/src/components/LineChart/LineChart.base.tsx

@@ -128,6 +128,10 @@ export interface ILineChartState extends IBasestate {
 }
 
 export class LineChartBase extends React.Component<ILineChartProps, ILineChartState> {
+  public static defaultProps: Partial<ILineChartProps> = {
+    enableReflow: true,
+  };
+
   private _points: LineChartDataWithIndex[];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private _calloutPoints: any[];