@fluentui/react-charting 5.14.24 → 5.14.25

package/lib-commonjs/components/StackedBarChart/StackedBarChart.styles.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 var Styling_1 = require("@fluentui/react/lib/Styling");
 var getStyles = function (props) {
     var _a, _b;
-    var className = props.className, width = props.width, barHeight = props.barHeight, shouldHighlight = props.shouldHighlight, theme = props.theme, href = props.href, benchmarkColor = props.benchmarkColor, benchmarkRatio = props.benchmarkRatio, targetColor = props.targetColor, targetRatio = props.targetRatio;
+    var className = props.className, width = props.width, barHeight = props.barHeight, shouldHighlight = props.shouldHighlight, theme = props.theme, href = props.href, benchmarkColor = props.benchmarkColor, benchmarkRatio = props.benchmarkRatio, targetColor = props.targetColor, targetRatio = props.targetRatio, showTriangle = props.showTriangle;
     return {
         root: [
             theme.fonts.medium,
@@ -19,16 +19,18 @@ var getStyles = function (props) {
         ],
         chart: {
             width: '100%',
-            height: barHeight ? barHeight : 16,
-            marginBottom: '12px',
+            height: barHeight ? barHeight : 12,
+            display: 'block',
+            marginBottom: showTriangle ? '16px' : '10px',
         },
-        chartTitle: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between', marginBottom: '3px' }),
+        chartTitle: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between' }),
         chartTitleLeft: {
-            fontWeight: Styling_1.FontWeights.bold,
             textOverflow: 'ellipsis',
             overflow: 'hidden',
             whiteSpace: 'nowrap',
             display: 'block',
+            color: '#171717',
+            marginBottom: '5px',
         },
         legendContainer: {
             margin: '4px 0px 0px 4px',
@@ -46,34 +48,35 @@ var getStyles = function (props) {
             },
         },
         ratioNumerator: {
-            fontSize: Styling_1.FontSizes.small,
+            fontSize: Styling_1.FontSizes.medium,
             fontWeight: Styling_1.FontWeights.semibold,
-            color: theme.palette.black,
+            color: theme.palette.neutralPrimary,
         },
         ratioDenominator: {
-            fontSize: Styling_1.FontSizes.small,
-            color: theme.palette.black,
-            opacity: '0.6',
+            fontSize: Styling_1.FontSizes.medium,
+            color: theme.palette.neutralPrimary,
         },
         benchmarkContainer: {
             position: 'relative',
-            height: '12px',
+            height: '7px',
+            marginTop: '-3px',
+            marginBottom: '-1px',
         },
         benchmark: {
             position: 'absolute',
-            left: 'calc(' + benchmarkRatio + '% - 4.5px)',
+            left: 'calc(' + benchmarkRatio + '% - 4px)',
             width: '0',
             height: '0',
-            borderLeft: '4.5px solid transparent',
-            borderRight: '4.5px solid transparent',
-            borderTop: '7.8px solid',
+            borderLeft: '4px solid transparent',
+            borderRight: '4px solid transparent',
+            borderTop: '7px solid',
             borderTopColor: benchmarkColor,
             marginBottom: '4px',
             selectors: (_a = {},
                 _a[Styling_1.HighContrastSelector] = {
                     border: '0px',
-                    height: '7.8px',
-                    width: '7.8px',
+                    height: '7px',
+                    width: '7px',
                     clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
                     backgroundImage: "linear-gradient(to right, " + benchmarkColor + ", " + benchmarkColor + ")",
                 },
@@ -81,19 +84,19 @@ var getStyles = function (props) {
         },
         target: {
             position: 'absolute',
-            left: 'calc(' + targetRatio + '% - 4.5px)',
+            left: 'calc(' + targetRatio + '% - 4px)',
             width: '0',
             height: '0',
-            borderLeft: '4.5px solid transparent',
-            borderRight: '4.5px solid transparent',
-            borderTop: '7.8px solid',
+            borderLeft: '4px solid transparent',
+            borderRight: '4px solid transparent',
+            borderTop: '7px solid',
             borderTopColor: targetColor,
             marginBottom: '4px',
             selectors: (_b = {},
                 _b[Styling_1.HighContrastSelector] = {
                     border: '0px',
-                    height: '7.8px',
-                    width: '7.8px',
+                    height: '7px',
+                    width: '7px',
                     clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
                     backgroundImage: "linear-gradient(to right, " + targetColor + ", " + targetColor + ")",
                 },

package/lib-commonjs/components/StackedBarChart/StackedBarChart.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackedBarChart.styles.js","sourceRoot":"../src/","sources":["components/StackedBarChart/StackedBarChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { IStackedBarChartStyleProps, IStackedBarChartStyles } from './StackedBarChart.types';\nimport { FontSizes, FontWeights, HighContrastSelector, IStyle } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: IStackedBarChartStyleProps): IStackedBarChartStyles => {\n  const {\n    className,\n    width,\n    barHeight,\n    shouldHighlight,\n    theme,\n    href,\n    benchmarkColor,\n    benchmarkRatio,\n    targetColor,\n    targetRatio,\n  } = props;\n  return {\n    root: [\n      theme.fonts.medium,\n      'ms-StackedBarChart',\n      {\n        width: width ? width : '100%',\n        display: 'flex',\n        flexDirection: 'column',\n      },\n      className,\n    ],\n    chart: {\n      width: '100%',\n      height: barHeight ? barHeight : 16,\n      marginBottom: '12px',\n    },\n    chartTitle: {\n      ...theme.fonts.small,\n      display: 'flex',\n      justifyContent: 'space-between',\n      marginBottom: '3px',\n    },\n    chartTitleLeft: {\n      fontWeight: FontWeights.bold,\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n      display: 'block',\n    },\n    legendContainer: {\n      margin: '4px 0px 0px 4px',\n    },\n    opacityChangeOnHover: {\n      opacity: shouldHighlight ? '' : '0.1',\n      cursor: href ? 'pointer' : 'default',\n      stroke: theme.palette.white,\n      strokeWidth: 2,\n      selectors: {\n        '&:focus': {\n          stroke: theme.palette.black,\n          strokeWidth: '2px',\n        },\n      },\n    },\n    ratioNumerator: {\n      fontSize: FontSizes.small,\n      fontWeight: FontWeights.semibold,\n      color: theme.palette.black,\n    },\n    ratioDenominator: {\n      fontSize: FontSizes.small,\n      color: theme.palette.black,\n      opacity: '0.6',\n    },\n    benchmarkContainer: {\n      position: 'relative',\n      height: '12px',\n    },\n    benchmark: {\n      position: 'absolute',\n      left: 'calc(' + benchmarkRatio + '% - 4.5px)',\n      width: '0',\n      height: '0',\n      borderLeft: '4.5px solid transparent',\n      borderRight: '4.5px solid transparent',\n      borderTop: '7.8px solid',\n      borderTopColor: benchmarkColor,\n      marginBottom: '4px',\n      selectors: {\n        [HighContrastSelector]: {\n          border: '0px',\n          height: '7.8px',\n          width: '7.8px',\n          clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n          backgroundImage: `linear-gradient(to right, ${benchmarkColor}, ${benchmarkColor})`,\n        } as IStyle,\n      },\n    },\n    target: {\n      position: 'absolute',\n      left: 'calc(' + targetRatio + '% - 4.5px)',\n      width: '0',\n      height: '0',\n      borderLeft: '4.5px solid transparent',\n      borderRight: '4.5px solid transparent',\n      borderTop: '7.8px solid',\n      borderTopColor: targetColor,\n      marginBottom: '4px',\n      selectors: {\n        [HighContrastSelector]: {\n          border: '0px',\n          height: '7.8px',\n          width: '7.8px',\n          clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n          backgroundImage: `linear-gradient(to right, ${targetColor}, ${targetColor})`,\n        } as IStyle,\n      },\n    },\n  };\n};\n"]}
+{"version":3,"file":"StackedBarChart.styles.js","sourceRoot":"../src/","sources":["components/StackedBarChart/StackedBarChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { IStackedBarChartStyleProps, IStackedBarChartStyles } from './StackedBarChart.types';\nimport { FontSizes, FontWeights, HighContrastSelector, IStyle } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: IStackedBarChartStyleProps): IStackedBarChartStyles => {\n  const {\n    className,\n    width,\n    barHeight,\n    shouldHighlight,\n    theme,\n    href,\n    benchmarkColor,\n    benchmarkRatio,\n    targetColor,\n    targetRatio,\n    showTriangle,\n  } = props;\n  return {\n    root: [\n      theme.fonts.medium,\n      'ms-StackedBarChart',\n      {\n        width: width ? width : '100%',\n        display: 'flex',\n        flexDirection: 'column',\n      },\n      className,\n    ],\n    chart: {\n      width: '100%',\n      height: barHeight ? barHeight : 12,\n      display: 'block',\n      marginBottom: showTriangle ? '16px' : '10px',\n    },\n    chartTitle: {\n      ...theme.fonts.small,\n      display: 'flex',\n      justifyContent: 'space-between',\n    },\n    chartTitleLeft: {\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n      display: 'block',\n      color: '#171717',\n      marginBottom: '5px',\n    },\n    legendContainer: {\n      margin: '4px 0px 0px 4px',\n    },\n    opacityChangeOnHover: {\n      opacity: shouldHighlight ? '' : '0.1',\n      cursor: href ? 'pointer' : 'default',\n      stroke: theme.palette.white,\n      strokeWidth: 2,\n      selectors: {\n        '&:focus': {\n          stroke: theme.palette.black,\n          strokeWidth: '2px',\n        },\n      },\n    },\n    ratioNumerator: {\n      fontSize: FontSizes.medium,\n      fontWeight: FontWeights.semibold,\n      color: theme.palette.neutralPrimary,\n    },\n    ratioDenominator: {\n      fontSize: FontSizes.medium,\n      color: theme.palette.neutralPrimary,\n    },\n    benchmarkContainer: {\n      position: 'relative',\n      height: '7px',\n      marginTop: '-3px',\n      marginBottom: '-1px',\n    },\n    benchmark: {\n      position: 'absolute',\n      left: 'calc(' + benchmarkRatio + '% - 4px)',\n      width: '0',\n      height: '0',\n      borderLeft: '4px solid transparent',\n      borderRight: '4px solid transparent',\n      borderTop: '7px solid',\n      borderTopColor: benchmarkColor,\n      marginBottom: '4px',\n      selectors: {\n        [HighContrastSelector]: {\n          border: '0px',\n          height: '7px',\n          width: '7px',\n          clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n          backgroundImage: `linear-gradient(to right, ${benchmarkColor}, ${benchmarkColor})`,\n        } as IStyle,\n      },\n    },\n    target: {\n      position: 'absolute',\n      left: 'calc(' + targetRatio + '% - 4px)',\n      width: '0',\n      height: '0',\n      borderLeft: '4px solid transparent',\n      borderRight: '4px solid transparent',\n      borderTop: '7px solid',\n      borderTopColor: targetColor,\n      marginBottom: '4px',\n      selectors: {\n        [HighContrastSelector]: {\n          border: '0px',\n          height: '7px',\n          width: '7px',\n          clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n          backgroundImage: `linear-gradient(to right, ${targetColor}, ${targetColor})`,\n        } as IStyle,\n      },\n    },\n  };\n};\n"]}

package/lib-commonjs/components/StackedBarChart/StackedBarChart.types.d.ts

@@ -157,6 +157,10 @@ export interface IStackedBarChartStyleProps {
      * the ratio position for the target triangle
      */
     targetRatio?: number;
+    /**
+     * prop to check if benchmark data or target data is provided
+     */
+    showTriangle?: boolean;
 }
 export interface IStackedBarChartStyles {
     /**

package/lib-commonjs/components/StackedBarChart/StackedBarChart.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackedBarChart.types.js","sourceRoot":"../src/","sources":["components/StackedBarChart/StackedBarChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { ILegendsProps } from '../Legends/index';\n\nexport interface IStackedBarChart {}\nimport { IChartProps, IChartDataPoint } from './index';\n\nexport interface IStackedBarChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: IChartProps;\n\n  /**\n   * Benchmark Data to render in the chart.\n   */\n  benchmarkData?: IChartDataPoint;\n\n  /**\n   * Target Data to render in the chart.\n   */\n  targetData?: IChartDataPoint;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of each bar in the chart.\n   */\n  barHeight?: number;\n\n  /**\n   * Do not show the legend at the bottom of chart\n   * when there are more than two datapoints\n   *\n   * @default false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Do not show number/ratio on top of bar\n   *\n   * @default false\n   */\n  hideNumberDisplay?: boolean;\n\n  /**\n   * Do not show tooltips in chart\n   *\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IStackedBarChartStyleProps, IStackedBarChartStyles>;\n\n  /**\n   * Color setting of bar background color, this will show while all data points value is 0\n   */\n  barBackgroundColor?: string;\n\n  /**\n   * Url that the data-viz needs to redirect to upon clicking on it\n   */\n  href?: string;\n\n  /**\n   * If this value is set, the fixed display pattern for less than 2 data points chart will be ignore\n   */\n  ignoreFixStyle?: boolean;\n\n  /**\n   * If this value is set to true the denominator will not be shown for the ratio above the chart\n   */\n  hideDenominator?: boolean;\n\n  /**\n   * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n   */\n  enabledLegendsWrapLines?: boolean;\n\n  /**\n   * overflow props for the legend\n   */\n  legendsOverflowProps?: Partial<IOverflowSetProps>;\n\n  /**\n   * text for overflow legends string\n   */\n  legendsOverflowText?: string;\n\n  /**\n   * focus zone props in hover card for legends\n   */\n  focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;\n\n  /**\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<ILegendsProps>;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;\n\n  /**\n   * props for the callout in the chart\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n}\n\nexport interface IStackedBarChartStyleProps {\n  /**\n   * Theme (provided through customization.)\n   */\n  theme: ITheme;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of bar in the chart.\n   */\n  barHeight?: number;\n\n  /**\n   * prop to show data of the chart with appropriate legend color\n   */\n  legendColor?: string;\n\n  /**\n   * prop to check if the chart is selcted or hovered upon to determine opacity\n   */\n  shouldHighlight?: boolean;\n\n  /**\n   * prop to check which specific section of the stacked bar chart is selected or hovered upon\n   */\n  isChartSelected?: boolean;\n\n  /**\n   * prop to check to decide cursor type\n   */\n  href?: string;\n\n  /**\n   * the color for the benchmark triangle\n   */\n  benchmarkColor?: string;\n\n  /**\n   * the ratio position for the benchmark triangle\n   */\n  benchmarkRatio?: number;\n\n  /**\n   * the color for the target triangle\n   */\n  targetColor?: string;\n\n  /**\n   * the ratio position for the target triangle\n   */\n  targetRatio?: number;\n}\n\nexport interface IStackedBarChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root: IStyle;\n\n  /**\n   * Style for the chart.\n   */\n  chart: IStyle;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle: IStyle;\n\n  /**\n   * Style for left side text of the chart title\n   */\n  chartTitleLeft: IStyle;\n\n  /**\n   * Style for the legend container div\n   */\n  legendContainer: IStyle;\n\n  /**\n   * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n   */\n  opacityChangeOnHover: IStyle;\n\n  /**\n   * Style for the chart ratio numerator\n   */\n  ratioNumerator: IStyle;\n\n  /**\n   * Style for the chart ratio denominator\n   */\n  ratioDenominator: IStyle;\n\n  /**\n   * Style for the benchmark container\n   */\n  benchmarkContainer: IStyle;\n\n  /**\n   * Style for the benchmark triangle\n   */\n  benchmark: IStyle;\n\n  /**\n   * Style for the target triangle\n   */\n  target: IStyle;\n}\n"]}
+{"version":3,"file":"StackedBarChart.types.js","sourceRoot":"../src/","sources":["components/StackedBarChart/StackedBarChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { ILegendsProps } from '../Legends/index';\n\nexport interface IStackedBarChart {}\nimport { IChartProps, IChartDataPoint } from './index';\n\nexport interface IStackedBarChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: IChartProps;\n\n  /**\n   * Benchmark Data to render in the chart.\n   */\n  benchmarkData?: IChartDataPoint;\n\n  /**\n   * Target Data to render in the chart.\n   */\n  targetData?: IChartDataPoint;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of each bar in the chart.\n   */\n  barHeight?: number;\n\n  /**\n   * Do not show the legend at the bottom of chart\n   * when there are more than two datapoints\n   *\n   * @default false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Do not show number/ratio on top of bar\n   *\n   * @default false\n   */\n  hideNumberDisplay?: boolean;\n\n  /**\n   * Do not show tooltips in chart\n   *\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IStackedBarChartStyleProps, IStackedBarChartStyles>;\n\n  /**\n   * Color setting of bar background color, this will show while all data points value is 0\n   */\n  barBackgroundColor?: string;\n\n  /**\n   * Url that the data-viz needs to redirect to upon clicking on it\n   */\n  href?: string;\n\n  /**\n   * If this value is set, the fixed display pattern for less than 2 data points chart will be ignore\n   */\n  ignoreFixStyle?: boolean;\n\n  /**\n   * If this value is set to true the denominator will not be shown for the ratio above the chart\n   */\n  hideDenominator?: boolean;\n\n  /**\n   * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n   */\n  enabledLegendsWrapLines?: boolean;\n\n  /**\n   * overflow props for the legend\n   */\n  legendsOverflowProps?: Partial<IOverflowSetProps>;\n\n  /**\n   * text for overflow legends string\n   */\n  legendsOverflowText?: string;\n\n  /**\n   * focus zone props in hover card for legends\n   */\n  focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;\n\n  /**\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<ILegendsProps>;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;\n\n  /**\n   * props for the callout in the chart\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n}\n\nexport interface IStackedBarChartStyleProps {\n  /**\n   * Theme (provided through customization.)\n   */\n  theme: ITheme;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of bar in the chart.\n   */\n  barHeight?: number;\n\n  /**\n   * prop to show data of the chart with appropriate legend color\n   */\n  legendColor?: string;\n\n  /**\n   * prop to check if the chart is selcted or hovered upon to determine opacity\n   */\n  shouldHighlight?: boolean;\n\n  /**\n   * prop to check which specific section of the stacked bar chart is selected or hovered upon\n   */\n  isChartSelected?: boolean;\n\n  /**\n   * prop to check to decide cursor type\n   */\n  href?: string;\n\n  /**\n   * the color for the benchmark triangle\n   */\n  benchmarkColor?: string;\n\n  /**\n   * the ratio position for the benchmark triangle\n   */\n  benchmarkRatio?: number;\n\n  /**\n   * the color for the target triangle\n   */\n  targetColor?: string;\n\n  /**\n   * the ratio position for the target triangle\n   */\n  targetRatio?: number;\n\n  /**\n   * prop to check if benchmark data or target data is provided\n   */\n  showTriangle?: boolean;\n}\n\nexport interface IStackedBarChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root: IStyle;\n\n  /**\n   * Style for the chart.\n   */\n  chart: IStyle;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle: IStyle;\n\n  /**\n   * Style for left side text of the chart title\n   */\n  chartTitleLeft: IStyle;\n\n  /**\n   * Style for the legend container div\n   */\n  legendContainer: IStyle;\n\n  /**\n   * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n   */\n  opacityChangeOnHover: IStyle;\n\n  /**\n   * Style for the chart ratio numerator\n   */\n  ratioNumerator: IStyle;\n\n  /**\n   * Style for the chart ratio denominator\n   */\n  ratioDenominator: IStyle;\n\n  /**\n   * Style for the benchmark container\n   */\n  benchmarkContainer: IStyle;\n\n  /**\n   * Style for the benchmark triangle\n   */\n  benchmark: IStyle;\n\n  /**\n   * Style for the target triangle\n   */\n  target: IStyle;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.14.24",
+  "version": "5.14.25",
   "description": "Experimental React charting components for building experiences for Microsoft 365.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",

package/src/components/HorizontalBarChart/HorizontalBarChart.types.ts

@@ -104,6 +104,11 @@ export interface IHorizontalBarChartStyleProps {
    * @default 15
    */
   barHeight?: number;
+
+  /**
+   * prop to check if benchmark data is provided
+   */
+  showTriangle?: boolean;
 }
 
 export interface IHorizontalBarChartStyles {
@@ -116,6 +121,7 @@ export interface IHorizontalBarChartStyles {
    * Styling for each item in the container
    */
   items: IStyle;
+
   /**
    * Style for the chart.
    */
@@ -146,6 +152,11 @@ export interface IHorizontalBarChartStyles {
    */
   chartDataTextDenominator: IStyle;
 
+  /**
+   * Style for the benchmark container
+   */
+  benchmarkContainer: IStyle;
+
   /**
    * Style for the benchmark triangle
    */

package/src/components/StackedBarChart/MultiStackedBarChart.types.ts

@@ -178,6 +178,16 @@ export interface IMultiStackedBarChartStyles {
    */
   opacityChangeOnHover: IStyle;
 
+  /**
+   * Style for the chart ratio numerator
+   */
+  ratioNumerator: IStyle;
+
+  /**
+   * Style for the chart ratio denominator
+   */
+  ratioDenominator: IStyle;
+
   /**
    * Style to change the opacity of placeholder data point when we hover a single bar or legend
    */

package/src/components/StackedBarChart/StackedBarChart.types.ts

@@ -192,6 +192,11 @@ export interface IStackedBarChartStyleProps {
    * the ratio position for the target triangle
    */
   targetRatio?: number;
+
+  /**
+   * prop to check if benchmark data or target data is provided
+   */
+  showTriangle?: boolean;
 }
 
 export interface IStackedBarChartStyles {