From d1ebfc1f8582c35ced8fd24f6f1d08e36b680890 Mon Sep 17 00:00:00 2001
From: Mercedes Miller <memille@microsoft.com>
Date: Mon, 17 Aug 2020 14:16:26 -0700
Subject: [PATCH 01/14] Added overlays and updated legend

---
 .../src/components/Legends/Legends.base.tsx   |  12 ++-
 .../src/components/Legends/Legends.styles.ts  |   8 +-
 .../src/components/Legends/Legends.types.ts   |   7 ++
 .../components/LineChart/LineChart.base.tsx   | 100 ++++++++++++++++--
 .../components/LineChart/LineChart.types.ts   |  20 ++++
 .../examples/LineChart.Basic.Example.tsx      |  27 +++++
 6 files changed, 165 insertions(+), 9 deletions(-)

diff --git a/packages/charting/src/components/Legends/Legends.base.tsx b/packages/charting/src/components/Legends/Legends.base.tsx
index 4baf446186f56..362bb4ee8551b 100644
--- a/packages/charting/src/components/Legends/Legends.base.tsx
+++ b/packages/charting/src/components/Legends/Legends.base.tsx
@@ -28,6 +28,8 @@ interface ILegendItem extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   color: string;
   shape?: LegendShape;
   key: number;
+  opacity?: number;
+  fill?: string;
 }
 
 export interface ILegendState {
@@ -90,6 +92,8 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
         onMouseOutAction: legend.onMouseOutAction!,
         color: legend.color,
         shape: legend.shape,
+        fill: legend.fill,
+        opacity: legend.opacity,
         key: index,
       };
     });
@@ -245,6 +249,7 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
       >
         <div
           className={classNames.overflowIndicationTextStyle}
+          // eslint-disable-next-line react/jsx-no-bind
           ref={(rootElem: HTMLDivElement) => (this._hoverCardRef = rootElem)}
           data-is-focusable={false}
         >
@@ -284,6 +289,8 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
       action: data.action,
       hoverAction: data.hoverAction,
       onMouseOutAction: data.onMouseOutAction,
+      fill: data.fill,
+      opacity: data.opacity,
     };
     const color = this._getColor(legend.title, legend.color);
     const { theme, className, styles } = this.props;
@@ -293,8 +300,9 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
       colorOnSelectedState: color,
       borderColor: legend.color,
       overflow: overflow,
+      fill: legend.fill,
+      opacity: legend.opacity,
     });
-
     const onClickHandler = () => {
       this._onClick(legend);
     };
@@ -308,12 +316,14 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
       <button
         key={index}
         className={classNames.legend}
+        /* eslint-disable react/jsx-no-bind */
         onClick={onClickHandler}
         onMouseOver={onHoverHandler}
         onMouseOut={onMouseOut}
         onFocus={onHoverHandler}
         onBlur={onMouseOut}
         data-is-focusable={false}
+        /* eslint-enable react/jsx-no-bind */
       >
         <div className={this._getShapeClass(classNames, legend)} />
         <div className={classNames.text}>{legend.title}</div>
diff --git a/packages/charting/src/components/Legends/Legends.styles.ts b/packages/charting/src/components/Legends/Legends.styles.ts
index 637072fc417cd..fd19cffdcf21d 100644
--- a/packages/charting/src/components/Legends/Legends.styles.ts
+++ b/packages/charting/src/components/Legends/Legends.styles.ts
@@ -48,11 +48,14 @@ export const getStyles = (props: ILegendStyleProps): ILegendsStyles => {
       },
       width: '12px',
       height: '12px',
-      backgroundColor: props.colorOnSelectedState,
+      backgroundColor: props.fill ? '' : props.colorOnSelectedState,
       marginRight: '8px',
       border: '1px solid',
       borderColor: props.borderColor ? props.borderColor : theme?.semanticColors.buttonBorder,
-      opacity: props.colorOnSelectedState === palette.white ? '0.6' : '',
+      opacity: props.colorOnSelectedState === palette.white ? '0.6' : props.opacity ? props.opacity : '',
+      backgroundImage: props.fill
+        ? `repeating-linear-gradient(135deg, transparent, transparent 3px, ${props.colorOnSelectedState} 1px, ${props.colorOnSelectedState} 4px)`
+        : '',
     },
     triangle: {
       width: '0',
@@ -62,6 +65,7 @@ export const getStyles = (props: ILegendStyleProps): ILegendsStyles => {
       borderTop: '10.4px solid',
       borderTopColor: props.colorOnSelectedState,
       marginRight: '8px',
+      opacity: props.colorOnSelectedState === palette.white ? '0.6' : props.opacity ? props.opacity : '',
       selectors: {
         [HighContrastSelector]: {
           border: '0px',
diff --git a/packages/charting/src/components/Legends/Legends.types.ts b/packages/charting/src/components/Legends/Legends.types.ts
index c232230d0c191..22f02ca19cbdd 100644
--- a/packages/charting/src/components/Legends/Legends.types.ts
+++ b/packages/charting/src/components/Legends/Legends.types.ts
@@ -86,6 +86,10 @@ export interface ILegend extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    * The shape for the legend
    */
   shape?: LegendShape;
+
+  opacity?: number;
+
+  fill?: string;
 }
 
 export interface ILegendStyleProps {
@@ -94,6 +98,9 @@ export interface ILegendStyleProps {
   colorOnSelectedState?: string;
   borderColor?: string;
   overflow?: boolean;
+  //
+  opacity?: number;
+  fill?: string;
 }
 
 export interface ILegendsProps {
diff --git a/packages/charting/src/components/LineChart/LineChart.base.tsx b/packages/charting/src/components/LineChart/LineChart.base.tsx
index 0b432519cd010..b6a2813468b40 100644
--- a/packages/charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/charting/src/components/LineChart/LineChart.base.tsx
@@ -3,11 +3,12 @@ import { Axis as D3Axis } from 'd3-axis';
 import { select as d3Select } from 'd3-selection';
 import { ILegend, Legends } from '../Legends/index';
 import { getId, find } from 'office-ui-fabric-react/lib/Utilities';
-import { ILineChartProps, ILineChartPoints, IBasestate, IChildProps } from './LineChart.types';
+import { ILineChartProps, ILineChartPoints, IBasestate, IChildProps, IOverlayProps } from './LineChart.types';
 import { DirectionalHint } from 'office-ui-fabric-react/lib/Callout';
 import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
 import { calloutData, IMargins } from '../../utilities/index';
 import { ChartHelper } from '../CommonComponents/ChartHelper';
+import { thresholdSturges } from 'd3-array';
 
 type NumericAxis = D3Axis<number | { valueOf(): number }>;
 
@@ -34,11 +35,14 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   private _circleId: string;
   private _lineId: string;
   private _verticalLine: string;
+  private _overlayPatternId: string;
   private _uniqueCallOutID: string;
   private _refArray: IRefArrayData[];
   private margins: IMargins;
   private eventLabelHeight: number = 36;
   private lines: JSX.Element[];
+  private overlays: IOverlayProps[];
+  private _renderedOverlays: JSX.Element[];
 
   constructor(props: ILineChartProps) {
     super(props);
@@ -53,9 +57,11 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     this._refArray = [];
     this._points = this.props.data.lineChartData || [];
     this._calloutPoints = calloutData(this._points) || [];
+    this.overlays = this.props.overlays || [];
     this._circleId = getId('circle');
     this._lineId = getId('lineID');
     this._verticalLine = getId('verticalLine');
+    this._overlayPatternId = getId('overlayPattern');
     this.margins = {
       top: this.props.margins?.top || 20,
       right: this.props.margins?.right || 20,
@@ -113,7 +119,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       <ChartHelper
         {...this.props}
         points={this._points}
-        getGraphData={this._getLinesData}
+        getGraphData={this._initializeLineChartData}
         calloutProps={calloutProps}
         tickParams={tickParams}
         legendBars={legendBars}
@@ -136,7 +142,10 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
                   visibility={'hidden'}
                   strokeDasharray={'5,5'}
                 />
-                <g>{this.lines}</g>
+                <g>
+                  {this._renderedOverlays}
+                  {this.lines}
+                </g>
                 {eventAnnotationProps && (
                   <EventsAnnotation
                     {...eventAnnotationProps}
@@ -154,10 +163,16 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private _getLinesData = (xScale: any, yScale: NumericAxis, containerHeight: number, containerWidth: number) => {
+  private _initializeLineChartData = (
+    xScale: any,
+    yScale: NumericAxis,
+    containerHeight: number,
+    containerWidth: number,
+  ) => {
     this._xAxisScale = xScale;
     this._yAxisScale = yScale;
-    return (this.lines = this._createLines());
+    this._renderedOverlays = this._createOverlays(containerHeight);
+    this.lines = this._createLines();
   };
 
   private _createLegends(data: ILineChartPoints[]): JSX.Element {
@@ -186,9 +201,37 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       };
       return legend;
     });
+
+    const overlayLegendDataItems = this.overlays.map((overlay: IOverlayProps, index: number) => {
+      const title = overlay.name;
+      const legend: ILegend = {
+        title,
+        color: overlay.color,
+        action: () => {
+          if (this.state.selectedLegend === title) {
+            this.setState({ selectedLegend: '' });
+            this._handleOverlayLengendClick(overlay, null);
+          } else {
+            this.setState({ selectedLegend: title });
+            this._handleOverlayLengendClick(overlay, title);
+          }
+          this.setState({ activeLegend: title });
+        },
+        onMouseOutAction: () => {
+          this.setState({ activeLegend: '' });
+        },
+        hoverAction: () => {
+          this.setState({ activeLegend: title });
+        },
+        opacity: 0.4,
+        fill: overlay.applyPattern ? `url(#${this._overlayPatternId}${index})` : undefined,
+      };
+      return legend;
+    });
+
     const legends = (
       <Legends
-        legends={legendDataItems}
+        legends={[...legendDataItems, ...overlayLegendDataItems]}
         enabledWrapLines={this.props.enabledLegendsWrapLines}
         overflowProps={this.props.legendsOverflowProps}
         focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}
@@ -226,6 +269,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
         const y2 = this._points[i].data[j].y;
         const xAxisCalloutData = this._points[i].data[j - 1].xAxisCalloutData;
         if (this.state.activeLegend === legendVal || this.state.activeLegend === '') {
+          /* eslint-disable react/jsx-no-bind */
           lines.push(
             <line
               id={lineId}
@@ -299,6 +343,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
                 strokeWidth={3}
               />,
             );
+            /* eslint-enable react/jsx-no-bind */
           }
         } else {
           lines.push(
@@ -415,4 +460,47 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       point.onLegendClick(selectedLegend);
     }
   };
+
+  private _handleOverlayLengendClick = (overlay: IOverlayProps, selectedLegend: string | null): void => {
+    if (overlay.onLegendClick) {
+      overlay.onLegendClick(selectedLegend);
+    }
+  };
+
+  private _createOverlays = (containerHeight: number) => {
+    const overlays: JSX.Element[] = [];
+    for (let i = 0; i < this.overlays.length; i++) {
+      const overlay = this.overlays[i];
+      const overlayId = getId(overlay.name.replace(/\W/g, ''));
+      if (overlay.applyPattern) {
+        overlays.push(
+          <pattern
+            id={`${this._overlayPatternId}${i}`}
+            width={16}
+            height={16}
+            key={`${this._overlayPatternId}${i}`}
+            patternUnits={'userSpaceOnUse'}
+          >
+            <path d={'M-4,4 l8,-8 M0,16 l16,-16 M12,20 l8,-8'} stroke={overlay.color} strokeWidth={2} />
+          </pattern>,
+        );
+      }
+      for (let j = 0; j < overlay.data.length; j++) {
+        const startX = overlay.data[j].startX;
+        const endX = overlay.data[j].endX;
+        overlays.push(
+          <rect
+            fill={overlay.applyPattern ? `url(#${this._overlayPatternId}${i})` : overlay.color}
+            fillOpacity={this.state.activeLegend === overlay.name || this.state.activeLegend === '' ? 0.4 : 0.1}
+            x={this._xAxisScale(startX)}
+            y={this._yAxisScale(0) - containerHeight}
+            width={Math.abs(this._xAxisScale(endX) - this._xAxisScale(startX))}
+            height={containerHeight}
+            key={`${overlayId}${j}`}
+          />,
+        );
+      }
+    }
+    return overlays;
+  };
 }
diff --git a/packages/charting/src/components/LineChart/LineChart.types.ts b/packages/charting/src/components/LineChart/LineChart.types.ts
index 065a3fa1e64cf..5a1d4c21f3070 100644
--- a/packages/charting/src/components/LineChart/LineChart.types.ts
+++ b/packages/charting/src/components/LineChart/LineChart.types.ts
@@ -153,6 +153,11 @@ export interface ILineChartProps extends Partial<IChartHelperProps> {
    * Margins for the chart
    */
   margins?: IMargins;
+
+  /*
+   * EXPERIMENTING
+   */
+  overlays?: IOverlayProps[];
 }
 
 export interface IEventsAnnotationProps {
@@ -167,3 +172,18 @@ export interface IEventsAnnotationProps {
 export interface ILineChartStyles extends IChartHelperStyles {}
 
 export interface ILineChartStyleProps extends IChartHelperStyleProps {}
+
+// Experimentation
+
+export interface IOverlayProps {
+  name: string;
+  color: string;
+  data: IOverlayData[];
+  applyPattern?: boolean;
+  onLegendClick?: (selectedLegend: string | null) => void | undefined;
+}
+
+export interface IOverlayData {
+  startX: number | Date;
+  endX: number | Date;
+}
diff --git a/packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx b/packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx
index ea623746a1775..de5d11007b631 100644
--- a/packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx
+++ b/packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx
@@ -138,6 +138,33 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
             height={this.state.height}
             width={this.state.width}
             margins={margins}
+            overlays={[
+              {
+                name: 'Time range 1',
+                color: 'blue',
+                data: [
+                  {
+                    startX: new Date('2020-03-03T10:00:00.000Z'),
+                    endX: new Date('2020-03-05T00:00:00.000Z'),
+                  },
+                ],
+              },
+              {
+                name: 'Time range 2',
+                color: 'red',
+                data: [
+                  {
+                    startX: new Date('2020-03-07T00:00:00.000Z'),
+                    endX: new Date('2020-03-08T00:00:00.000Z'),
+                  },
+                  {
+                    startX: new Date('2020-03-04T10:00:00.000Z'),
+                    endX: new Date('2020-03-06T00:00:00.000Z'),
+                  },
+                ],
+                applyPattern: true,
+              },
+            ]}
           />
         </div>
       </>

From 47443b15c99307db5e63240290494e2481633dcf Mon Sep 17 00:00:00 2001
From: Mercedes Miller <memille@microsoft.com>
Date: Mon, 17 Aug 2020 16:42:40 -0700
Subject: [PATCH 02/14] Updated variable names

---
 .../src/components/Legends/Legends.base.tsx   |  8 +-
 .../src/components/Legends/Legends.styles.ts  |  4 +-
 .../src/components/Legends/Legends.types.ts   | 17 +++--
 .../components/LineChart/LineChart.base.tsx   | 76 +++++++++----------
 .../components/LineChart/LineChart.types.ts   |  4 +-
 5 files changed, 56 insertions(+), 53 deletions(-)

diff --git a/packages/charting/src/components/Legends/Legends.base.tsx b/packages/charting/src/components/Legends/Legends.base.tsx
index 362bb4ee8551b..4bb8e42dcab5f 100644
--- a/packages/charting/src/components/Legends/Legends.base.tsx
+++ b/packages/charting/src/components/Legends/Legends.base.tsx
@@ -29,7 +29,7 @@ interface ILegendItem extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   shape?: LegendShape;
   key: number;
   opacity?: number;
-  fill?: string;
+  stripePattern?: boolean;
 }
 
 export interface ILegendState {
@@ -92,7 +92,7 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
         onMouseOutAction: legend.onMouseOutAction!,
         color: legend.color,
         shape: legend.shape,
-        fill: legend.fill,
+        stripePattern: legend.stripePattern,
         opacity: legend.opacity,
         key: index,
       };
@@ -289,7 +289,7 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
       action: data.action,
       hoverAction: data.hoverAction,
       onMouseOutAction: data.onMouseOutAction,
-      fill: data.fill,
+      stripePattern: data.stripePattern,
       opacity: data.opacity,
     };
     const color = this._getColor(legend.title, legend.color);
@@ -300,7 +300,7 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
       colorOnSelectedState: color,
       borderColor: legend.color,
       overflow: overflow,
-      fill: legend.fill,
+      stripePattern: legend.stripePattern,
       opacity: legend.opacity,
     });
     const onClickHandler = () => {
diff --git a/packages/charting/src/components/Legends/Legends.styles.ts b/packages/charting/src/components/Legends/Legends.styles.ts
index fd19cffdcf21d..2ae18c342b9a9 100644
--- a/packages/charting/src/components/Legends/Legends.styles.ts
+++ b/packages/charting/src/components/Legends/Legends.styles.ts
@@ -48,12 +48,12 @@ export const getStyles = (props: ILegendStyleProps): ILegendsStyles => {
       },
       width: '12px',
       height: '12px',
-      backgroundColor: props.fill ? '' : props.colorOnSelectedState,
+      backgroundColor: props.stripePattern ? '' : props.colorOnSelectedState,
       marginRight: '8px',
       border: '1px solid',
       borderColor: props.borderColor ? props.borderColor : theme?.semanticColors.buttonBorder,
       opacity: props.colorOnSelectedState === palette.white ? '0.6' : props.opacity ? props.opacity : '',
-      backgroundImage: props.fill
+      backgroundImage: props.stripePattern
         ? `repeating-linear-gradient(135deg, transparent, transparent 3px, ${props.colorOnSelectedState} 1px, ${props.colorOnSelectedState} 4px)`
         : '',
     },
diff --git a/packages/charting/src/components/Legends/Legends.types.ts b/packages/charting/src/components/Legends/Legends.types.ts
index 22f02ca19cbdd..249e5c9377103 100644
--- a/packages/charting/src/components/Legends/Legends.types.ts
+++ b/packages/charting/src/components/Legends/Legends.types.ts
@@ -82,14 +82,20 @@ export interface ILegend extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    */
   color: string;
 
+  /**
+   * The opacity of the legend color
+   */
+  opacity?: number;
+
   /**
    * The shape for the legend
    */
   shape?: LegendShape;
 
-  opacity?: number;
-
-  fill?: string;
+  /**
+   * The opacity of the legend color
+   */
+  stripePattern?: boolean;
 }
 
 export interface ILegendStyleProps {
@@ -97,10 +103,9 @@ export interface ILegendStyleProps {
   className?: string;
   colorOnSelectedState?: string;
   borderColor?: string;
-  overflow?: boolean;
-  //
   opacity?: number;
-  fill?: string;
+  overflow?: boolean;
+  stripePattern?: boolean;
 }
 
 export interface ILegendsProps {
diff --git a/packages/charting/src/components/LineChart/LineChart.base.tsx b/packages/charting/src/components/LineChart/LineChart.base.tsx
index b6a2813468b40..4359498ef80ed 100644
--- a/packages/charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/charting/src/components/LineChart/LineChart.base.tsx
@@ -224,7 +224,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
           this.setState({ activeLegend: title });
         },
         opacity: 0.4,
-        fill: overlay.applyPattern ? `url(#${this._overlayPatternId}${index})` : undefined,
+        stripePattern: overlay.applyPattern,
       };
       return legend;
     });
@@ -366,6 +366,43 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     return lines;
   }
 
+  private _createOverlays = (containerHeight: number) => {
+    const overlays: JSX.Element[] = [];
+    for (let i = 0; i < this.overlays.length; i++) {
+      const overlay = this.overlays[i];
+      const overlayId = getId(overlay.name.replace(/\W/g, ''));
+      if (overlay.applyPattern) {
+        overlays.push(
+          <pattern
+            id={`${this._overlayPatternId}${i}`}
+            width={16}
+            height={16}
+            key={`${this._overlayPatternId}${i}`}
+            patternUnits={'userSpaceOnUse'}
+          >
+            <path d={'M-4,4 l8,-8 M0,16 l16,-16 M12,20 l8,-8'} stroke={overlay.color} strokeWidth={2} />
+          </pattern>,
+        );
+      }
+      for (let j = 0; j < overlay.data.length; j++) {
+        const startX = overlay.data[j].startX;
+        const endX = overlay.data[j].endX;
+        overlays.push(
+          <rect
+            fill={overlay.applyPattern ? `url(#${this._overlayPatternId}${i})` : overlay.color}
+            fillOpacity={this.state.activeLegend === overlay.name || this.state.activeLegend === '' ? 0.4 : 0.1}
+            x={this._xAxisScale(startX)}
+            y={this._yAxisScale(0) - containerHeight}
+            width={Math.abs(this._xAxisScale(endX) - this._xAxisScale(startX))}
+            height={containerHeight}
+            key={`${overlayId}${j}`}
+          />,
+        );
+      }
+    }
+    return overlays;
+  };
+
   private _refCallback(element: SVGGElement, legendTitle: string): void {
     this._refArray.push({ index: legendTitle, refElement: element });
   }
@@ -466,41 +503,4 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       overlay.onLegendClick(selectedLegend);
     }
   };
-
-  private _createOverlays = (containerHeight: number) => {
-    const overlays: JSX.Element[] = [];
-    for (let i = 0; i < this.overlays.length; i++) {
-      const overlay = this.overlays[i];
-      const overlayId = getId(overlay.name.replace(/\W/g, ''));
-      if (overlay.applyPattern) {
-        overlays.push(
-          <pattern
-            id={`${this._overlayPatternId}${i}`}
-            width={16}
-            height={16}
-            key={`${this._overlayPatternId}${i}`}
-            patternUnits={'userSpaceOnUse'}
-          >
-            <path d={'M-4,4 l8,-8 M0,16 l16,-16 M12,20 l8,-8'} stroke={overlay.color} strokeWidth={2} />
-          </pattern>,
-        );
-      }
-      for (let j = 0; j < overlay.data.length; j++) {
-        const startX = overlay.data[j].startX;
-        const endX = overlay.data[j].endX;
-        overlays.push(
-          <rect
-            fill={overlay.applyPattern ? `url(#${this._overlayPatternId}${i})` : overlay.color}
-            fillOpacity={this.state.activeLegend === overlay.name || this.state.activeLegend === '' ? 0.4 : 0.1}
-            x={this._xAxisScale(startX)}
-            y={this._yAxisScale(0) - containerHeight}
-            width={Math.abs(this._xAxisScale(endX) - this._xAxisScale(startX))}
-            height={containerHeight}
-            key={`${overlayId}${j}`}
-          />,
-        );
-      }
-    }
-    return overlays;
-  };
 }
diff --git a/packages/charting/src/components/LineChart/LineChart.types.ts b/packages/charting/src/components/LineChart/LineChart.types.ts
index 5a1d4c21f3070..c05bf15d72e7f 100644
--- a/packages/charting/src/components/LineChart/LineChart.types.ts
+++ b/packages/charting/src/components/LineChart/LineChart.types.ts
@@ -155,7 +155,7 @@ export interface ILineChartProps extends Partial<IChartHelperProps> {
   margins?: IMargins;
 
   /*
-   * EXPERIMENTING
+   * Overlays for the chart,
    */
   overlays?: IOverlayProps[];
 }
@@ -173,8 +173,6 @@ export interface ILineChartStyles extends IChartHelperStyles {}
 
 export interface ILineChartStyleProps extends IChartHelperStyleProps {}
 
-// Experimentation
-
 export interface IOverlayProps {
   name: string;
   color: string;

From 559a52313301201aefbc9ceec5441ce5d3fd90f6 Mon Sep 17 00:00:00 2001
From: Mercedes Miller <memille@microsoft.com>
Date: Tue, 18 Aug 2020 13:39:20 -0700
Subject: [PATCH 03/14] Updated overlay name to color fill bars

---
 .../components/LineChart/LineChart.base.tsx   | 76 ++++++++++---------
 .../components/LineChart/LineChart.types.ts   | 10 +--
 .../examples/LineChart.Basic.Example.tsx      |  2 +-
 3 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/packages/charting/src/components/LineChart/LineChart.base.tsx b/packages/charting/src/components/LineChart/LineChart.base.tsx
index 4359498ef80ed..037937731db26 100644
--- a/packages/charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/charting/src/components/LineChart/LineChart.base.tsx
@@ -3,12 +3,11 @@ import { Axis as D3Axis } from 'd3-axis';
 import { select as d3Select } from 'd3-selection';
 import { ILegend, Legends } from '../Legends/index';
 import { getId, find } from 'office-ui-fabric-react/lib/Utilities';
-import { ILineChartProps, ILineChartPoints, IBasestate, IChildProps, IOverlayProps } from './LineChart.types';
+import { ILineChartProps, ILineChartPoints, IBasestate, IChildProps, IColorFillBarsProps } from './LineChart.types';
 import { DirectionalHint } from 'office-ui-fabric-react/lib/Callout';
 import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
 import { calloutData, IMargins } from '../../utilities/index';
 import { ChartHelper } from '../CommonComponents/ChartHelper';
-import { thresholdSturges } from 'd3-array';
 
 type NumericAxis = D3Axis<number | { valueOf(): number }>;
 
@@ -35,14 +34,14 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   private _circleId: string;
   private _lineId: string;
   private _verticalLine: string;
-  private _overlayPatternId: string;
+  private _colorFillBarPatternId: string;
   private _uniqueCallOutID: string;
   private _refArray: IRefArrayData[];
   private margins: IMargins;
   private eventLabelHeight: number = 36;
   private lines: JSX.Element[];
-  private overlays: IOverlayProps[];
-  private _renderedOverlays: JSX.Element[];
+  private colorFillBars: IColorFillBarsProps[];
+  private _renderedColorFillBars: JSX.Element[];
 
   constructor(props: ILineChartProps) {
     super(props);
@@ -57,11 +56,11 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     this._refArray = [];
     this._points = this.props.data.lineChartData || [];
     this._calloutPoints = calloutData(this._points) || [];
-    this.overlays = this.props.overlays || [];
+    this.colorFillBars = this.props.colorFillBars || [];
     this._circleId = getId('circle');
     this._lineId = getId('lineID');
     this._verticalLine = getId('verticalLine');
-    this._overlayPatternId = getId('overlayPattern');
+    this._colorFillBarPatternId = getId('colorFillBarPattern');
     this.margins = {
       top: this.props.margins?.top || 20,
       right: this.props.margins?.right || 20,
@@ -143,7 +142,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
                   strokeDasharray={'5,5'}
                 />
                 <g>
-                  {this._renderedOverlays}
+                  {this._renderedColorFillBars}
                   {this.lines}
                 </g>
                 {eventAnnotationProps && (
@@ -171,7 +170,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   ) => {
     this._xAxisScale = xScale;
     this._yAxisScale = yScale;
-    this._renderedOverlays = this._createOverlays(containerHeight);
+    this._renderedColorFillBars = this._createColorFillBars(containerHeight);
     this.lines = this._createLines();
   };
 
@@ -202,18 +201,18 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       return legend;
     });
 
-    const overlayLegendDataItems = this.overlays.map((overlay: IOverlayProps, index: number) => {
-      const title = overlay.name;
+    const colorFillBarsLegendDataItems = this.colorFillBars.map((colorFillBar: IColorFillBarsProps, index: number) => {
+      const title = colorFillBar.name;
       const legend: ILegend = {
         title,
-        color: overlay.color,
+        color: colorFillBar.color,
         action: () => {
           if (this.state.selectedLegend === title) {
             this.setState({ selectedLegend: '' });
-            this._handleOverlayLengendClick(overlay, null);
+            this._handleColorFillBarLengendClick(colorFillBar, null);
           } else {
             this.setState({ selectedLegend: title });
-            this._handleOverlayLengendClick(overlay, title);
+            this._handleColorFillBarLengendClick(colorFillBar, title);
           }
           this.setState({ activeLegend: title });
         },
@@ -224,14 +223,14 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
           this.setState({ activeLegend: title });
         },
         opacity: 0.4,
-        stripePattern: overlay.applyPattern,
+        stripePattern: colorFillBar.applyPattern,
       };
       return legend;
     });
 
     const legends = (
       <Legends
-        legends={[...legendDataItems, ...overlayLegendDataItems]}
+        legends={[...legendDataItems, ...colorFillBarsLegendDataItems]}
         enabledWrapLines={this.props.enabledLegendsWrapLines}
         overflowProps={this.props.legendsOverflowProps}
         focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}
@@ -366,41 +365,41 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     return lines;
   }
 
-  private _createOverlays = (containerHeight: number) => {
-    const overlays: JSX.Element[] = [];
-    for (let i = 0; i < this.overlays.length; i++) {
-      const overlay = this.overlays[i];
-      const overlayId = getId(overlay.name.replace(/\W/g, ''));
-      if (overlay.applyPattern) {
-        overlays.push(
+  private _createColorFillBars = (containerHeight: number) => {
+    const colorFillBars: JSX.Element[] = [];
+    for (let i = 0; i < this.colorFillBars.length; i++) {
+      const colorFillBar = this.colorFillBars[i];
+      const colorFillBarId = getId(colorFillBar.name.replace(/\W/g, ''));
+      if (colorFillBar.applyPattern) {
+        colorFillBars.push(
           <pattern
-            id={`${this._overlayPatternId}${i}`}
+            id={`${this._colorFillBarPatternId}${i}`}
             width={16}
             height={16}
-            key={`${this._overlayPatternId}${i}`}
+            key={`${this._colorFillBarPatternId}${i}`}
             patternUnits={'userSpaceOnUse'}
           >
-            <path d={'M-4,4 l8,-8 M0,16 l16,-16 M12,20 l8,-8'} stroke={overlay.color} strokeWidth={2} />
+            <path d={'M-4,4 l8,-8 M0,16 l16,-16 M12,20 l8,-8'} stroke={colorFillBar.color} strokeWidth={2} />
           </pattern>,
         );
       }
-      for (let j = 0; j < overlay.data.length; j++) {
-        const startX = overlay.data[j].startX;
-        const endX = overlay.data[j].endX;
-        overlays.push(
+      for (let j = 0; j < colorFillBar.data.length; j++) {
+        const startX = colorFillBar.data[j].startX;
+        const endX = colorFillBar.data[j].endX;
+        colorFillBars.push(
           <rect
-            fill={overlay.applyPattern ? `url(#${this._overlayPatternId}${i})` : overlay.color}
-            fillOpacity={this.state.activeLegend === overlay.name || this.state.activeLegend === '' ? 0.4 : 0.1}
+            fill={colorFillBar.applyPattern ? `url(#${this._colorFillBarPatternId}${i})` : colorFillBar.color}
+            fillOpacity={this.state.activeLegend === colorFillBar.name || this.state.activeLegend === '' ? 0.4 : 0.1}
             x={this._xAxisScale(startX)}
             y={this._yAxisScale(0) - containerHeight}
             width={Math.abs(this._xAxisScale(endX) - this._xAxisScale(startX))}
             height={containerHeight}
-            key={`${overlayId}${j}`}
+            key={`${colorFillBarId}${j}`}
           />,
         );
       }
     }
-    return overlays;
+    return colorFillBars;
   };
 
   private _refCallback(element: SVGGElement, legendTitle: string): void {
@@ -498,9 +497,12 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     }
   };
 
-  private _handleOverlayLengendClick = (overlay: IOverlayProps, selectedLegend: string | null): void => {
-    if (overlay.onLegendClick) {
-      overlay.onLegendClick(selectedLegend);
+  private _handleColorFillBarLengendClick = (
+    colorFillBar: IColorFillBarsProps,
+    selectedLegend: string | null,
+  ): void => {
+    if (colorFillBar.onLegendClick) {
+      colorFillBar.onLegendClick(selectedLegend);
     }
   };
 }
diff --git a/packages/charting/src/components/LineChart/LineChart.types.ts b/packages/charting/src/components/LineChart/LineChart.types.ts
index c05bf15d72e7f..9f5a25b8ff0d5 100644
--- a/packages/charting/src/components/LineChart/LineChart.types.ts
+++ b/packages/charting/src/components/LineChart/LineChart.types.ts
@@ -155,9 +155,9 @@ export interface ILineChartProps extends Partial<IChartHelperProps> {
   margins?: IMargins;
 
   /*
-   * Overlays for the chart,
+   * Color fill bars for the chart,
    */
-  overlays?: IOverlayProps[];
+  colorFillBars?: IColorFillBarsProps[];
 }
 
 export interface IEventsAnnotationProps {
@@ -173,15 +173,15 @@ export interface ILineChartStyles extends IChartHelperStyles {}
 
 export interface ILineChartStyleProps extends IChartHelperStyleProps {}
 
-export interface IOverlayProps {
+export interface IColorFillBarsProps {
   name: string;
   color: string;
-  data: IOverlayData[];
+  data: IColorFillBarData[];
   applyPattern?: boolean;
   onLegendClick?: (selectedLegend: string | null) => void | undefined;
 }
 
-export interface IOverlayData {
+export interface IColorFillBarData {
   startX: number | Date;
   endX: number | Date;
 }
diff --git a/packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx b/packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx
index de5d11007b631..0249eec7112c5 100644
--- a/packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx
+++ b/packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx
@@ -138,7 +138,7 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
             height={this.state.height}
             width={this.state.width}
             margins={margins}
-            overlays={[
+            colorFillBars={[
               {
                 name: 'Time range 1',
                 color: 'blue',

From aa4f51c40f9a24f8b4209c6f5cfb1bdeb2d94720 Mon Sep 17 00:00:00 2001
From: Mercedes Miller <memille@microsoft.com>
Date: Tue, 18 Aug 2020 13:59:25 -0700
Subject: [PATCH 04/14] Change files

---
 change/@uifabric-charting-2020-08-18-13-59-25-master.json | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 change/@uifabric-charting-2020-08-18-13-59-25-master.json

diff --git a/change/@uifabric-charting-2020-08-18-13-59-25-master.json b/change/@uifabric-charting-2020-08-18-13-59-25-master.json
new file mode 100644
index 0000000000000..e9f789078019f
--- /dev/null
+++ b/change/@uifabric-charting-2020-08-18-13-59-25-master.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Added color fill bar feature to line chart component",
+  "packageName": "@uifabric/charting",
+  "email": "email not defined",
+  "dependentChangeType": "patch",
+  "date": "2020-08-18T20:59:25.017Z"
+}

From 7b06a4b51824d38c35a617163b6fcda55b7dc84b Mon Sep 17 00:00:00 2001
From: Mercedes Miller <memille@microsoft.com>
Date: Mon, 31 Aug 2020 10:41:52 -0700
Subject: [PATCH 05/14] Removed eslint comment

---
 packages/charting/src/components/LineChart/LineChart.base.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/charting/src/components/LineChart/LineChart.base.tsx b/packages/charting/src/components/LineChart/LineChart.base.tsx
index 19721df2f44a6..1e56868cd4651 100644
--- a/packages/charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/charting/src/components/LineChart/LineChart.base.tsx
@@ -269,7 +269,6 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
         const y2 = this._points[i].data[j].y;
         const xAxisCalloutData = this._points[i].data[j - 1].xAxisCalloutData;
         if (this.state.activeLegend === legendVal || this.state.activeLegend === '') {
-          /* eslint-disable react/jsx-no-bind */
           lines.push(
             <line
               id={lineId}

From 49934fc480100862bdc42eab863d27d59b95a39c Mon Sep 17 00:00:00 2001
From: Mercedes Miller <memille@microsoft.com>
Date: Tue, 1 Sep 2020 09:02:43 -0700
Subject: [PATCH 06/14] Updated snapshot

---
 .../__snapshots__/VerticalBarChart.test.tsx.snap       | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap b/packages/charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
index e3502cd0850d3..eb614f12495e8 100644
--- a/packages/charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
+++ b/packages/charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -93,7 +93,7 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
         id="barGElement"
       >
         <rect
-          aria-labelledby="callout0"
+          aria-labelledby="callout1"
           className=
 
               {
@@ -111,7 +111,7 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
           y={-35}
         />
         <rect
-          aria-labelledby="callout0"
+          aria-labelledby="callout1"
           className=
 
               {
@@ -178,7 +178,7 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
                     justify-content: unset;
                     position: relative;
                   }
-              data-focuszone-id="FocusZone2"
+              data-focuszone-id="FocusZone3"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -245,6 +245,7 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
                     className=
 
                         {
+                          background-image: ;
                           border-color: #8a8886;
                           border: 1px solid;
                           height: 12px;
@@ -335,6 +336,7 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
                     className=
 
                         {
+                          background-image: ;
                           border-color: #8a8886;
                           border: 1px solid;
                           height: 12px;

From 4df52992799a7360f19b72ba6793f68b853c605d Mon Sep 17 00:00:00 2001
From: Mercedes Miller <memille@microsoft.com>
Date: Wed, 2 Sep 2020 16:50:17 -0700
Subject: [PATCH 07/14] Change files

---
 ...eact-next-2020-09-02-16-50-17-ColorFillBarFeature.json | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 change/@fluentui-react-next-2020-09-02-16-50-17-ColorFillBarFeature.json

diff --git a/change/@fluentui-react-next-2020-09-02-16-50-17-ColorFillBarFeature.json b/change/@fluentui-react-next-2020-09-02-16-50-17-ColorFillBarFeature.json
new file mode 100644
index 0000000000000..54e784820bfe8
--- /dev/null
+++ b/change/@fluentui-react-next-2020-09-02-16-50-17-ColorFillBarFeature.json
@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "Removed whitespace",
+  "packageName": "@fluentui/react-next",
+  "email": "memille@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2020-09-02T23:50:17.310Z"
+}

From 8553b9adbcd41fed0151e1a0ad58c0c37391176b Mon Sep 17 00:00:00 2001
From: Mercedes Miller <memille@microsoft.com>
Date: Wed, 9 Sep 2020 19:03:21 -0700
Subject: [PATCH 08/14] Implemented multiple legend selections

---
 .../src/components/Legends/Legends.styles.ts  |   3 +-
 .../components/LineChart/LineChart.base.tsx   | 286 +++++++++++-------
 .../components/LineChart/LineChart.types.ts   |   5 +-
 .../examples/LineChart.Basic.Example.tsx      |   5 +-
 4 files changed, 192 insertions(+), 107 deletions(-)

diff --git a/packages/charting/src/components/Legends/Legends.styles.ts b/packages/charting/src/components/Legends/Legends.styles.ts
index 2ae18c342b9a9..4cdd518974920 100644
--- a/packages/charting/src/components/Legends/Legends.styles.ts
+++ b/packages/charting/src/components/Legends/Legends.styles.ts
@@ -54,7 +54,8 @@ export const getStyles = (props: ILegendStyleProps): ILegendsStyles => {
       borderColor: props.borderColor ? props.borderColor : theme?.semanticColors.buttonBorder,
       opacity: props.colorOnSelectedState === palette.white ? '0.6' : props.opacity ? props.opacity : '',
       backgroundImage: props.stripePattern
-        ? `repeating-linear-gradient(135deg, transparent, transparent 3px, ${props.colorOnSelectedState} 1px, ${props.colorOnSelectedState} 4px)`
+        ? // eslint-disable-next-line @fluentui/max-len
+          `repeating-linear-gradient(135deg, transparent, transparent 3px, ${props.colorOnSelectedState} 1px, ${props.colorOnSelectedState} 4px)`
         : '',
     },
     triangle: {
diff --git a/packages/charting/src/components/LineChart/LineChart.base.tsx b/packages/charting/src/components/LineChart/LineChart.base.tsx
index fb901af542da5..a81a0aa0d092d 100644
--- a/packages/charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/charting/src/components/LineChart/LineChart.base.tsx
@@ -26,8 +26,10 @@ export interface IContainerValues {
   reqID: number;
 }
 export interface ILineChartState extends IBasestate {
-  // This array contais data of selected legends
+  // This array contains data of selected legends for points
   selectedLegendPoints: ILineChartPoints[];
+  // This array contains data of selected legends for color bars
+  selectedColorBarLegend: IColorFillBarsProps[];
   // This is a boolean value which is set to true
   // when at least one legend is selected
   isSelectedLegend: boolean;
@@ -50,8 +52,9 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   private margins: IMargins;
   private eventLabelHeight: number = 36;
   private lines: JSX.Element[];
-  private colorFillBars: IColorFillBarsProps[];
   private _renderedColorFillBars: JSX.Element[];
+  private _colorFillBars: IColorFillBarsProps[];
+  private _colorFillBarsOpacity: number;
 
   constructor(props: ILineChartProps) {
     super(props);
@@ -63,22 +66,18 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       selectedLegend: '',
       isCalloutVisible: false,
       selectedLegendPoints: [],
+      selectedColorBarLegend: [],
       isSelectedLegend: false,
     };
     this._refArray = [];
     this._points = this.props.data.lineChartData || [];
+    this._colorFillBars = [];
+    this._colorFillBarsOpacity = 0.4;
     this._calloutPoints = calloutData(this._points) || [];
-    this.colorFillBars = this.props.colorFillBars || [];
     this._circleId = getId('circle');
     this._lineId = getId('lineID');
     this._verticalLine = getId('verticalLine');
     this._colorFillBarPatternId = getId('colorFillBarPattern');
-    this.margins = {
-      top: this.props.margins?.top || 20,
-      right: this.props.margins?.right || 20,
-      bottom: this.props.margins?.bottom || 35,
-      left: this.props.margins?.left || 35,
-    };
     props.eventAnnotationProps &&
       props.eventAnnotationProps.labelHeight &&
       (this.eventLabelHeight = props.eventAnnotationProps.labelHeight);
@@ -187,51 +186,27 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   ) => {
     this._xAxisScale = xScale;
     this._yAxisScale = yScale;
-    this._renderedColorFillBars = this._createColorFillBars(containerHeight);
+    this._renderedColorFillBars = this.props.colorFillBars ? this._createColorFillBars(containerHeight) : [];
     this.lines = this._createLines();
   };
 
-  private _canSelectOnlySingleLegend = (point: ILineChartPoints) => {
-    if (this.state.selectedLegend === point.legend) {
-      this.setState({ selectedLegend: '', activeLegend: point.legend });
-      this._handleLegendClick(point, null);
+  private _handleSingleLegendSelectionAction = (lineChartItem: ILineChartPoints | IColorFillBarsProps) => {
+    if (this.state.selectedLegend === lineChartItem.legend) {
+      this.setState({ selectedLegend: '', activeLegend: lineChartItem.legend });
+      this._handleLegendClick(lineChartItem, null);
     } else {
       this.setState({
-        selectedLegend: point.legend,
-        activeLegend: point.legend,
+        selectedLegend: lineChartItem.legend,
+        activeLegend: lineChartItem.legend,
       });
-      this._handleLegendClick(point, point.legend);
+      this._handleLegendClick(lineChartItem, lineChartItem.legend);
     }
   };
 
-  private _canSelectMultipleLegends = (
-    point: ILineChartPoints,
-    isLegendMultiSelectEnabled: boolean,
-    selectedLegendTitles: string[],
-  ) => {
-    let values: ILineChartPoints[];
-    const selectedLegendIndex = selectedLegendTitles.indexOf(point.legend);
-    if (selectedLegendIndex === -1) {
-      values = [...this.state.selectedLegendPoints, point];
-    } else {
-      values = this.state.selectedLegendPoints
-        .slice(0, selectedLegendIndex)
-        .concat(this.state.selectedLegendPoints.slice(selectedLegendIndex + 1));
-    }
-    const totalLegendsLength =
-      this.props.data && this.props.data.lineChartData && this.props.data.lineChartData!.length;
-    const points = values.length === totalLegendsLength ? [] : values;
-    this.setState({
-      selectedLegendPoints: isLegendMultiSelectEnabled ? points : [],
-      isSelectedLegend: points.length >= 1 ? true : false,
-    });
-    const selectedLegendTitlesToPass = points.map((item: ILineChartPoints) => item.legend);
-    this._handleLegendClick(point, selectedLegendTitlesToPass);
-  };
-
   private _onHoverCardHide = () => {
     this.setState({
       selectedLegendPoints: [],
+      selectedColorBarLegend: [],
       isSelectedLegend: false,
     });
   };
@@ -239,7 +214,6 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   private _createLegends(data: ILineChartPoints[]): JSX.Element {
     const { legendProps } = this.props;
     const isLegendMultiSelectEnabled = !!(legendProps && !!legendProps.canSelectMultipleLegends);
-    const selectedLegendTitles = this.state.selectedLegendPoints.map((item: ILineChartPoints) => item.legend);
     const legendDataItems = data.map((point: ILineChartPoints, index: number) => {
       const color: string = point.color;
       // mapping data to the format Legends component needs
@@ -248,9 +222,9 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
         color: color,
         action: () => {
           if (isLegendMultiSelectEnabled) {
-            this._canSelectMultipleLegends(point, isLegendMultiSelectEnabled, selectedLegendTitles);
+            this._handleMultipleLineLegendSelectionAction(point);
           } else {
-            this._canSelectOnlySingleLegend(point);
+            this._handleSingleLegendSelectionAction(point);
           }
         },
         onMouseOutAction: () => {
@@ -263,32 +237,31 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       return legend;
     });
 
-    const colorFillBarsLegendDataItems = this.colorFillBars.map((colorFillBar: IColorFillBarsProps, index: number) => {
-      const title = colorFillBar.name;
-      const legend: ILegend = {
-        title,
-        color: colorFillBar.color,
-        action: () => {
-          if (this.state.selectedLegend === title) {
-            this.setState({ selectedLegend: '' });
-            this._handleColorFillBarLengendClick(colorFillBar, null);
-          } else {
-            this.setState({ selectedLegend: title });
-            this._handleColorFillBarLengendClick(colorFillBar, title);
-          }
-          this.setState({ activeLegend: title });
-        },
-        onMouseOutAction: () => {
-          this.setState({ activeLegend: '' });
-        },
-        hoverAction: () => {
-          this.setState({ activeLegend: title });
-        },
-        opacity: 0.4,
-        stripePattern: colorFillBar.applyPattern,
-      };
-      return legend;
-    });
+    const colorFillBarsLegendDataItems = this.props.colorFillBars
+      ? this.props.colorFillBars.map((colorFillBar: IColorFillBarsProps, index: number) => {
+          const title = colorFillBar.legend;
+          const legend: ILegend = {
+            title,
+            color: colorFillBar.color,
+            action: () => {
+              if (isLegendMultiSelectEnabled) {
+                this._handleMultipleColorFillBarLegendSelectionAction(colorFillBar);
+              } else {
+                this._handleSingleLegendSelectionAction(colorFillBar);
+              }
+            },
+            onMouseOutAction: () => {
+              this.setState({ activeLegend: '' });
+            },
+            hoverAction: () => {
+              this.setState({ activeLegend: title });
+            },
+            opacity: this._colorFillBarsOpacity,
+            stripePattern: colorFillBar.applyPattern,
+          };
+          return legend;
+        })
+      : [];
 
     const legends = (
       <Legends
@@ -306,10 +279,12 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
 
   private _createLines(): JSX.Element[] {
     const lines = [];
-    if (this.state.selectedLegendPoints.length > 0) {
+    if (this.state.isSelectedLegend) {
       this._points = this.state.selectedLegendPoints;
       // eslint-disable-next-line no-console
       console.log(this.state.selectedLegendPoints);
+    } else {
+      this._points = this.props.data && this.props.data.lineChartData ? this.props.data.lineChartData : [];
     }
     for (let i = 0; i < this._points.length; i++) {
       const legendVal: string = this._points[i].legend;
@@ -336,12 +311,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
         const x2 = this._points[i].data[j].x;
         const y2 = this._points[i].data[j].y;
         const xAxisCalloutData = this._points[i].data[j - 1].xAxisCalloutData;
-        if (
-          this.state.activeLegend === legendVal ||
-          this.state.activeLegend === '' ||
-          this.state.selectedLegendPoints.length > 0 ||
-          this.state.isSelectedLegend
-        ) {
+        if (this.state.activeLegend === legendVal || this.state.activeLegend === '' || this.state.isSelectedLegend) {
           lines.push(
             <line
               id={lineId}
@@ -440,29 +410,33 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
 
   private _createColorFillBars = (containerHeight: number) => {
     const colorFillBars: JSX.Element[] = [];
-    for (let i = 0; i < this.colorFillBars.length; i++) {
-      const colorFillBar = this.colorFillBars[i];
-      const colorFillBarId = getId(colorFillBar.name.replace(/\W/g, ''));
+    if (this.state.isSelectedLegend) {
+      this._colorFillBars = this.state.selectedColorBarLegend;
+    } else {
+      this._colorFillBars = this.props.colorFillBars!;
+    }
+    for (let i = 0; i < this._colorFillBars.length; i++) {
+      const colorFillBar = this._colorFillBars[i];
+      const colorFillBarId = getId(colorFillBar.legend.replace(/\W/g, ''));
+
       if (colorFillBar.applyPattern) {
-        colorFillBars.push(
-          <pattern
-            id={`${this._colorFillBarPatternId}${i}`}
-            width={16}
-            height={16}
-            key={`${this._colorFillBarPatternId}${i}`}
-            patternUnits={'userSpaceOnUse'}
-          >
-            <path d={'M-4,4 l8,-8 M0,16 l16,-16 M12,20 l8,-8'} stroke={colorFillBar.color} strokeWidth={2} />
-          </pattern>,
-        );
+        // Using a pattern element because CSS was unable to render diagonal stripes for rect elements
+        colorFillBars.push(this._getStripePattern(colorFillBar.color, i));
       }
+
       for (let j = 0; j < colorFillBar.data.length; j++) {
         const startX = colorFillBar.data[j].startX;
         const endX = colorFillBar.data[j].endX;
+        const opacity =
+          this.state.activeLegend === colorFillBar.legend ||
+          this.state.activeLegend === '' ||
+          this.state.isSelectedLegend
+            ? this._colorFillBarsOpacity
+            : 0.1;
         colorFillBars.push(
           <rect
             fill={colorFillBar.applyPattern ? `url(#${this._colorFillBarPatternId}${i})` : colorFillBar.color}
-            fillOpacity={this.state.activeLegend === colorFillBar.name || this.state.activeLegend === '' ? 0.4 : 0.1}
+            fillOpacity={opacity}
             x={this._xAxisScale(startX)}
             y={this._yAxisScale(0) - containerHeight}
             width={Math.abs(this._xAxisScale(endX) - this._xAxisScale(startX))}
@@ -475,6 +449,23 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     return colorFillBars;
   };
 
+  private _getStripePattern = (color: string, id: number) => {
+    // This describes a tile pattern that resembles diagonal stripes
+    // For more information: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
+    const stripePath = 'M-4,4 l8,-8 M0,16 l16,-16 M12,20 l8,-8';
+    return (
+      <pattern
+        id={`${this._colorFillBarPatternId}${id}`}
+        width={16}
+        height={16}
+        key={`${this._colorFillBarPatternId}${id}`}
+        patternUnits={'userSpaceOnUse'}
+      >
+        <path d={stripePath} stroke={color} strokeWidth={2} />
+      </pattern>
+    );
+  };
+
   private _refCallback(element: SVGGElement, legendTitle: string): void {
     this._refArray.push({ index: legendTitle, refElement: element });
   }
@@ -564,18 +555,109 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     });
   };
 
-  private _handleLegendClick = (point: ILineChartPoints, selectedLegend: string | null | string[]): void => {
-    if (point.onLegendClick) {
-      point.onLegendClick(selectedLegend);
+  private _handleLegendClick = (
+    lineChartItem: ILineChartPoints | IColorFillBarsProps,
+    selectedLegend: string | null | string[],
+  ): void => {
+    if (lineChartItem.onLegendClick) {
+      lineChartItem.onLegendClick(selectedLegend);
     }
   };
 
-  private _handleColorFillBarLengendClick = (
-    colorFillBar: IColorFillBarsProps,
-    selectedLegend: string | null,
-  ): void => {
-    if (colorFillBar.onLegendClick) {
-      colorFillBar.onLegendClick(selectedLegend);
+  private _handleMultipleLineLegendSelectionAction = (selectedLine: ILineChartPoints) => {
+    const selectedLineIndex = this.state.selectedLegendPoints.reduce((acc, line, index) => {
+      if (acc > -1 || line.legend !== selectedLine.legend) {
+        return acc;
+      } else {
+        return index;
+      }
+    }, -1);
+
+    let selectedLines: ILineChartPoints[];
+    if (selectedLineIndex === -1) {
+      selectedLines = [...this.state.selectedLegendPoints, selectedLine];
+    } else {
+      selectedLines = this.state.selectedLegendPoints
+        .slice(0, selectedLineIndex)
+        .concat(this.state.selectedLegendPoints.slice(selectedLineIndex + 1));
+    }
+
+    const areAllLineLegendsSelected = this.props.data && selectedLines.length === this.props.data.lineChartData!.length;
+
+    if (
+      areAllLineLegendsSelected &&
+      ((this.props.colorFillBars && this.props.colorFillBars.length === this.state.selectedColorBarLegend.length) ||
+        !this.props.colorFillBars)
+    ) {
+      // Clear all legends if all legends including color fill bar legends are selected
+      // Or clear all legends if all legends are selected and there are no color fill bars
+      this._clearMultipleLegendSelections();
+    } else if (!selectedLines.length && !this.state.selectedColorBarLegend.length) {
+      // Clear all legends if no legends including color fill bar legends are selected
+      this._clearMultipleLegendSelections();
+    } else {
+      // Otherwise, set state when one or more legends are selected, including color fill bar legends
+      this.setState({
+        selectedLegendPoints: selectedLines,
+        isSelectedLegend: true,
+      });
+    }
+
+    const selectedLegendTitlesToPass = selectedLines.map((line: ILineChartPoints) => line.legend);
+    this._handleLegendClick(selectedLine, selectedLegendTitlesToPass);
+  };
+
+  private _handleMultipleColorFillBarLegendSelectionAction = (selectedColorFillBar: IColorFillBarsProps) => {
+    const selectedColorFillBarIndex = this.state.selectedColorBarLegend.reduce((acc, colorFillBar, index) => {
+      if (acc > -1 || colorFillBar.legend !== selectedColorFillBar.legend) {
+        return acc;
+      } else {
+        return index;
+      }
+    }, -1);
+
+    let selectedColorFillBars: IColorFillBarsProps[];
+    if (selectedColorFillBarIndex === -1) {
+      selectedColorFillBars = [...this.state.selectedColorBarLegend, selectedColorFillBar];
+    } else {
+      selectedColorFillBars = this.state.selectedColorBarLegend
+        .slice(0, selectedColorFillBarIndex)
+        .concat(this.state.selectedColorBarLegend.slice(selectedColorFillBarIndex + 1));
+    }
+
+    const areAllColorFillBarLegendsSelected =
+      selectedColorFillBars.length === (this.props.colorFillBars && this.props.colorFillBars!.length);
+
+    if (
+      areAllColorFillBarLegendsSelected &&
+      ((this.props.data && this.props.data.lineChartData!.length === this.state.selectedLegendPoints.length) ||
+        !this.props.data)
+    ) {
+      // Clear all legends if all legends, including line legends, are selected
+      // Or clear all legends if all legends are selected and there is no line data
+      this._clearMultipleLegendSelections();
+    } else if (!selectedColorFillBars.length && !this.state.selectedLegendPoints.length) {
+      // Clear all legends if no legends are selected, including line legends
+      this._clearMultipleLegendSelections();
+    } else {
+      // set state when one or more legends are selected, including line legends
+      this.setState({
+        selectedColorBarLegend: selectedColorFillBars,
+        isSelectedLegend: true,
+      });
     }
+
+    const selectedLegendTitlesToPass = selectedColorFillBars.map(
+      (colorFillBar: IColorFillBarsProps) => colorFillBar.legend,
+    );
+    this._handleLegendClick(selectedColorFillBar, selectedLegendTitlesToPass);
+  };
+
+  private _clearMultipleLegendSelections = () => {
+    this.setState({
+      selectedColorBarLegend: [],
+      selectedLegendPoints: [],
+      isSelectedLegend: false,
+    });
   };
 }
diff --git a/packages/charting/src/components/LineChart/LineChart.types.ts b/packages/charting/src/components/LineChart/LineChart.types.ts
index ab56de3c28c1c..5d9eacd71ac8a 100644
--- a/packages/charting/src/components/LineChart/LineChart.types.ts
+++ b/packages/charting/src/components/LineChart/LineChart.types.ts
@@ -7,6 +7,7 @@ import {
   ICartesianChartStyles,
   IChildProps,
 } from '../CommonComponents/index';
+import { IStyle } from 'office-ui-fabric-react/lib/Styling';
 
 export { IChildProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData };
 export interface ILineChartProps extends ICartesianChartProps {
@@ -44,11 +45,11 @@ export interface ILineChartStyles extends ICartesianChartStyles {}
 export interface ILineChartStyleProps extends ICartesianChartStyleProps {}
 
 export interface IColorFillBarsProps {
-  name: string;
+  legend: string;
   color: string;
   data: IColorFillBarData[];
   applyPattern?: boolean;
-  onLegendClick?: (selectedLegend: string | null) => void | undefined;
+  onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined;
 }
 
 export interface IColorFillBarData {
diff --git a/packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx b/packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx
index 0249eec7112c5..feed905329b27 100644
--- a/packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx
+++ b/packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx
@@ -138,9 +138,10 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
             height={this.state.height}
             width={this.state.width}
             margins={margins}
+            legendProps={{ canSelectMultipleLegends: true, allowFocusOnLegends: true }}
             colorFillBars={[
               {
-                name: 'Time range 1',
+                legend: 'Time range 1',
                 color: 'blue',
                 data: [
                   {
@@ -150,7 +151,7 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
                 ],
               },
               {
-                name: 'Time range 2',
+                legend: 'Time range 2',
                 color: 'red',
                 data: [
                   {

From 51568352bc204fb83b2862699cf52cea9a2d6ae5 Mon Sep 17 00:00:00 2001
From: Mercedes Miller <memille@microsoft.com>
Date: Wed, 9 Sep 2020 20:12:15 -0700
Subject: [PATCH 09/14] Removed IStyle

---
 packages/charting/src/components/LineChart/LineChart.types.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/charting/src/components/LineChart/LineChart.types.ts b/packages/charting/src/components/LineChart/LineChart.types.ts
index 5d9eacd71ac8a..1452475f521ae 100644
--- a/packages/charting/src/components/LineChart/LineChart.types.ts
+++ b/packages/charting/src/components/LineChart/LineChart.types.ts
@@ -7,7 +7,6 @@ import {
   ICartesianChartStyles,
   IChildProps,
 } from '../CommonComponents/index';
-import { IStyle } from 'office-ui-fabric-react/lib/Styling';
 
 export { IChildProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData };
 export interface ILineChartProps extends ICartesianChartProps {

From fa2ccc2959601e21314bb920fa478bab07b24bef Mon Sep 17 00:00:00 2001
From: Mercedes Miller <memille@microsoft.com>
Date: Tue, 15 Sep 2020 15:29:47 -0700
Subject: [PATCH 10/14] Updated examples

---
 .../examples/LineChart.Basic.Example.tsx      | 28 -------------------
 .../examples/LineChart.Multiple.Example.tsx   | 28 +++++++++++++++++++
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx b/packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx
index feed905329b27..ea623746a1775 100644
--- a/packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx
+++ b/packages/charting/src/components/LineChart/examples/LineChart.Basic.Example.tsx
@@ -138,34 +138,6 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
             height={this.state.height}
             width={this.state.width}
             margins={margins}
-            legendProps={{ canSelectMultipleLegends: true, allowFocusOnLegends: true }}
-            colorFillBars={[
-              {
-                legend: 'Time range 1',
-                color: 'blue',
-                data: [
-                  {
-                    startX: new Date('2020-03-03T10:00:00.000Z'),
-                    endX: new Date('2020-03-05T00:00:00.000Z'),
-                  },
-                ],
-              },
-              {
-                legend: 'Time range 2',
-                color: 'red',
-                data: [
-                  {
-                    startX: new Date('2020-03-07T00:00:00.000Z'),
-                    endX: new Date('2020-03-08T00:00:00.000Z'),
-                  },
-                  {
-                    startX: new Date('2020-03-04T10:00:00.000Z'),
-                    endX: new Date('2020-03-06T00:00:00.000Z'),
-                  },
-                ],
-                applyPattern: true,
-              },
-            ]}
           />
         </div>
       </>
diff --git a/packages/charting/src/components/LineChart/examples/LineChart.Multiple.Example.tsx b/packages/charting/src/components/LineChart/examples/LineChart.Multiple.Example.tsx
index d3abae1c93351..e1e772b33ca12 100644
--- a/packages/charting/src/components/LineChart/examples/LineChart.Multiple.Example.tsx
+++ b/packages/charting/src/components/LineChart/examples/LineChart.Multiple.Example.tsx
@@ -236,6 +236,33 @@ export class LineChartMultipleExample extends React.Component<{}, ILineChartMult
       new Date('06-01-2018'),
       new Date('07-01-2018'),
     ];
+    const colorFillBarData = [
+      {
+        legend: 'Time range 1',
+        color: 'blue',
+        data: [
+          {
+            startX: new Date('2018/01/06'),
+            endX: new Date('2018/01/25'),
+          },
+        ],
+      },
+      {
+        legend: 'Time range 2',
+        color: 'red',
+        data: [
+          {
+            startX: new Date('2018/01/18'),
+            endX: new Date('2018/02/20'),
+          },
+          {
+            startX: new Date('2018/04/17'),
+            endX: new Date('2018/05/10'),
+          },
+        ],
+        applyPattern: true,
+      },
+    ];
     return (
       <div style={rootStyle}>
         <LineChart
@@ -246,6 +273,7 @@ export class LineChartMultipleExample extends React.Component<{}, ILineChartMult
           height={this.state.height}
           width={this.state.width}
           legendProps={{ canSelectMultipleLegends: true, allowFocusOnLegends: true }}
+          colorFillBars={colorFillBarData}
         />
       </div>
     );

From e5816cfe5ad6b701738a5171cbeac6a4d2bdb640 Mon Sep 17 00:00:00 2001
From: Mercedes Miller <memille@microsoft.com>
Date: Thu, 1 Oct 2020 11:49:05 -0700
Subject: [PATCH 11/14] Updated import

---
 packages/charting/src/components/LineChart/LineChart.base.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/charting/src/components/LineChart/LineChart.base.tsx b/packages/charting/src/components/LineChart/LineChart.base.tsx
index ad54fdb549467..11e5580bcb4dc 100644
--- a/packages/charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/charting/src/components/LineChart/LineChart.base.tsx
@@ -12,7 +12,7 @@ import {
   IMargins,
   IRefArrayData,
   IColorFillBarsProps,
-} from '@uifabric/charting';
+} from '../../index';
 import { DirectionalHint } from 'office-ui-fabric-react/lib/Callout';
 import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
 import { calloutData, ChartTypes, getXAxisType, XAxisTypes } from '../../utilities/index';

From 34363f4c40c864605215eda059ab603b006a138e Mon Sep 17 00:00:00 2001
From: Mercedes Miller <memille@microsoft.com>
Date: Mon, 5 Oct 2020 14:03:44 -0700
Subject: [PATCH 12/14] Change files

---
 ...-examples-2020-10-05-14-03-43-ColorFillBarFeature.json | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 change/@fluentui-react-examples-2020-10-05-14-03-43-ColorFillBarFeature.json

diff --git a/change/@fluentui-react-examples-2020-10-05-14-03-43-ColorFillBarFeature.json b/change/@fluentui-react-examples-2020-10-05-14-03-43-ColorFillBarFeature.json
new file mode 100644
index 0000000000000..61b69a279e8dc
--- /dev/null
+++ b/change/@fluentui-react-examples-2020-10-05-14-03-43-ColorFillBarFeature.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Made color fill bars compatible with multi select legends",
+  "packageName": "@fluentui/react-examples",
+  "email": "memille@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-05T21:03:43.761Z"
+}

From cf36277d1f4b7364cb5e4128a8c15c4b4a2bc964 Mon Sep 17 00:00:00 2001
From: Mercedes Miller <memille@microsoft.com>
Date: Mon, 5 Oct 2020 15:55:48 -0700
Subject: [PATCH 13/14] updated snapshots

---
 .../__snapshots__/VerticalBarChart.test.tsx.snap       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap b/packages/charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
index f466a1ac63ace..986ba5f643abf 100644
--- a/packages/charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
+++ b/packages/charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_1"
+  id="chart_2"
   role="presentation"
 >
   <div
@@ -25,7 +25,7 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone2"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -65,7 +65,7 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_1"
+        id="xAxisGElementchart_2"
         transform="translate(0, -35)"
       />
       <g
@@ -93,7 +93,7 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_1"
+        id="yAxisGElementchart_2"
         transform="translate(40, 0)"
       />
       <g>
@@ -187,7 +187,7 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
                     justify-content: unset;
                     position: relative;
                   }
-              data-focuszone-id="FocusZone3"
+              data-focuszone-id="FocusZone4"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}

From 952ac8d7e540b15db065d015c55713fb28708409 Mon Sep 17 00:00:00 2001
From: Mercedes Miller <memille@microsoft.com>
Date: Wed, 7 Oct 2020 11:16:20 -0700
Subject: [PATCH 14/14] Updated snapshot

---
 .../__snapshots__/VerticalBarChart.test.tsx.snap   | 14 +++++++-------
 .../LineChart/LineChart.Styled.Example.tsx         |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap b/packages/charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
index 986ba5f643abf..ee99e5cdd8750 100644
--- a/packages/charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
+++ b/packages/charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_1"
   role="presentation"
 >
   <div
@@ -25,7 +25,7 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -65,7 +65,7 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_1"
         transform="translate(0, -35)"
       />
       <g
@@ -93,12 +93,12 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_1"
         transform="translate(40, 0)"
       />
       <g>
         <rect
-          aria-labelledby="callout1"
+          aria-labelledby="callout0"
           className=
 
               {
@@ -116,7 +116,7 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
           y={-35}
         />
         <rect
-          aria-labelledby="callout1"
+          aria-labelledby="callout0"
           className=
 
               {
@@ -187,7 +187,7 @@ exports[`VerticalBarChart renders VerticalBarChart correctly 1`] = `
                     justify-content: unset;
                     position: relative;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone3"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-examples/src/charting/LineChart/LineChart.Styled.Example.tsx b/packages/react-examples/src/charting/LineChart/LineChart.Styled.Example.tsx
index 5d4889c106c0c..9fee8eb08ebe5 100644
--- a/packages/react-examples/src/charting/LineChart/LineChart.Styled.Example.tsx
+++ b/packages/react-examples/src/charting/LineChart/LineChart.Styled.Example.tsx
@@ -7,7 +7,7 @@ import {
   ChartHoverCard,
   ICustomizedCalloutData,
 } from '@uifabric/charting';
-import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
+import { DefaultPalette } from '@uifabric/styling';
 
 interface IStyledLineChartExampleState {
   width: number;