Color Fill Bars Feature for Line Chart Component

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": "[email protected]",
+  "dependentChangeType": "none",
+  "date": "2020-09-02T23:50:17.310Z"
+}

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"
+}

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

@@ -30,6 +30,8 @@ interface ILegendItem extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   color: string;
   shape?: LegendShape;
   key: number;
+  opacity?: number;
+  stripePattern?: boolean;
 }
 
 export interface ILegendState {
@@ -102,6 +104,8 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
         onMouseOutAction: legend.onMouseOutAction!,
         color: legend.color,
         shape: legend.shape,
+        stripePattern: legend.stripePattern,
+        opacity: legend.opacity,
         key: index,
       };
     });
@@ -297,6 +301,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)}
           {...(allowFocusOnLegends && {
             'aria-expanded': this.state.isHoverCardVisible,
@@ -341,6 +346,8 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
       action: data.action,
       hoverAction: data.hoverAction,
       onMouseOutAction: data.onMouseOutAction,
+      stripePattern: data.stripePattern,
+      opacity: data.opacity,
     };
     const color = this._getColor(legend.title, legend.color);
     const { theme, className, styles } = this.props;
@@ -350,8 +357,9 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
       colorOnSelectedState: color,
       borderColor: legend.color,
       overflow: overflow,
+      stripePattern: legend.stripePattern,
+      opacity: legend.opacity,
     });
-
     const onClickHandler = () => {
       this._onClick(legend);
     };
@@ -373,12 +381,14 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
         {...(data.nativeButtonProps && { ...data.nativeButtonProps })}
         key={index}
         className={classNames.legend}
+        /* eslint-disable react/jsx-no-bind */
         onClick={onClickHandler}
         onMouseOver={onHoverHandler}
         onMouseOut={onMouseOut}
         onFocus={onHoverHandler}
         onBlur={onMouseOut}
         data-is-focusable={allowFocusOnLegends}
+        /* eslint-enable react/jsx-no-bind */
       >
         <div className={this._getShapeClass(classNames, legend)} />
         <div className={classNames.text}>{legend.title}</div>

packages/charting/src/components/Legends/Legends.styles.ts

@@ -48,11 +48,15 @@ export const getStyles = (props: ILegendStyleProps): ILegendsStyles => {
       },
       width: '12px',
       height: '12px',
-      backgroundColor: 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' : '',
+      opacity: props.colorOnSelectedState === palette.white ? '0.6' : props.opacity ? props.opacity : '',
+      backgroundImage: props.stripePattern
+        ? // eslint-disable-next-line @fluentui/max-len
+          `repeating-linear-gradient(135deg, transparent, transparent 3px, ${props.colorOnSelectedState} 1px, ${props.colorOnSelectedState} 4px)`
+        : '',
     },
     triangle: {
       width: '0',
@@ -62,6 +66,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',

packages/charting/src/components/Legends/Legends.types.ts

@@ -83,12 +83,22 @@ export interface ILegend {
    */
   color: string;
 
+  /**
+   * The opacity of the legend color
+   */
+  opacity?: number;
+
   /**
    * The shape for the legend
    */
   shape?: LegendShape;
 
   /**
+   * Indicated whether of not to apply stripe pattern
+   */
+  stripePattern?: boolean;
+
+  /*
    *  native button props for the legend button
    */
   nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
@@ -99,7 +109,9 @@ export interface ILegendStyleProps {
   className?: string;
   colorOnSelectedState?: string;
   borderColor?: string;
+  opacity?: number;
   overflow?: boolean;
+  stripePattern?: boolean;
 }
 
 export interface ILegendsProps {