introducing new feature in vertical bar chart. added line (#15505)

* introducing the new feature in vertical bar chart

* put check box true

* Change files

* added prop usesingle color, which makes sure that all the bars are of same color

Co-authored-by: v-sivsar <v-sivsar@microsoft.com>

change/@fluentui-react-examples-2020-10-14-12-35-26-user-v-sivsar-ComboChartSimple.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "added some example code for new feature",
+  "packageName": "@fluentui/react-examples",
+  "email": "v-sivsar@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-14T07:05:26.323Z"
+}

change/@uifabric-charting-2020-10-14-12-35-26-user-v-sivsar-ComboChartSimple.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "added line to the vertical bar chart",
+  "packageName": "@uifabric/charting",
+  "email": "v-sivsar@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-14T07:04:59.025Z"
+}

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

@@ -308,6 +308,7 @@ export interface IYValueHover {
   y?: number;
   color?: string;
   data?: string | number;
+  yAxisCalloutData?: string | { [id: string]: number };
 }
 
 export interface IChildProps {

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

@@ -32,6 +32,7 @@ interface ILegendItem extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   key: number;
   opacity?: number;
   stripePattern?: boolean;
+  isLineLegendInBarChart?: boolean;
 }
 
 export interface ILegendState {
@@ -105,6 +106,7 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
         color: legend.color,
         shape: legend.shape,
         stripePattern: legend.stripePattern,
+        isLineLegendInBarChart: legend.isLineLegendInBarChart,
         opacity: legend.opacity,
         key: index,
       };
@@ -343,6 +345,7 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
       hoverAction: data.hoverAction,
       onMouseOutAction: data.onMouseOutAction,
       stripePattern: data.stripePattern,
+      isLineLegendInBarChart: data.isLineLegendInBarChart,
       opacity: data.opacity,
     };
     const color = this._getColor(legend.title, legend.color);
@@ -354,6 +357,7 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
       borderColor: legend.color,
       overflow: overflow,
       stripePattern: legend.stripePattern,
+      isLineLegendInBarChart: legend.isLineLegendInBarChart,
       opacity: legend.opacity,
     });
     const onClickHandler = () => {

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

@@ -7,7 +7,7 @@ import {
 } from 'office-ui-fabric-react/lib/Styling';
 
 export const getStyles = (props: ILegendStyleProps): ILegendsStyles => {
-  const { className, theme } = props;
+  const { className, theme, isLineLegendInBarChart = false } = props;
   const { palette, fonts } = theme!;
   const options: IGetFocusStylesOptions = {
     inset: undefined,
@@ -47,7 +47,7 @@ export const getStyles = (props: ILegendStyleProps): ILegendsStyles => {
         },
       },
       width: '12px',
-      height: '12px',
+      height: isLineLegendInBarChart ? '4px' : '12px',
       backgroundColor: props.stripePattern ? '' : props.colorOnSelectedState,
       marginRight: '8px',
       border: '1px solid',

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

@@ -103,6 +103,10 @@ export interface ILegend {
    */
   stripePattern?: boolean;
 
+  /**
+   * Indicates if the legend belongs to a line in the Bar Chart
+   */
+  isLineLegendInBarChart?: boolean;
   /*
    *  native button props for the legend button
    */
@@ -117,6 +121,7 @@ export interface ILegendStyleProps {
   opacity?: number;
   overflow?: boolean;
   stripePattern?: boolean;
+  isLineLegendInBarChart?: boolean;
 }
 
 export interface ILegendsProps {