@fluentui/react-charts 9.1.10 → 9.2.1

package/CHANGELOG.md

@@ -1,12 +1,51 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Mon, 28 Jul 2025 18:44:08 GMT and should not be manually modified.
+This log was last generated on Wed, 30 Jul 2025 16:53:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.2.1)
+
+Wed, 30 Jul 2025 16:53:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.0..@fluentui/react-charts_v9.2.1)
+
+### Patches
+
+- make legends of dotted lines dotted ([PR #34947](https://github.com/microsoft/fluentui/pull/34947) by anushgupta@microsoft.com)
+- support hidelegend property from plotly schema ([PR #34946](https://github.com/microsoft/fluentui/pull/34946) by anushgupta@microsoft.com)
+- Bump @fluentui/react-button to v9.6.3 ([PR #34945](https://github.com/microsoft/fluentui/pull/34945) by beachball)
+- Bump @fluentui/react-overflow to v9.5.3 ([PR #34945](https://github.com/microsoft/fluentui/pull/34945) by beachball)
+- Bump @fluentui/react-popover to v9.12.3 ([PR #34945](https://github.com/microsoft/fluentui/pull/34945) by beachball)
+
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.2.0)
+
+Wed, 30 Jul 2025 13:10:55 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.1.10..@fluentui/react-charts_v9.2.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34912](https://github.com/microsoft/fluentui/pull/34912) by martinhochel@microsoft.com)
+- Bump @fluentui/react-button to v9.6.2 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.4 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
+- Bump @fluentui/react-overflow to v9.5.2 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
+- Bump @fluentui/react-popover to v9.12.2 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.24.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
+- Bump @fluentui/react-tabster to v9.26.2 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
+- Bump @fluentui/react-theme to v9.2.0 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
+- Bump @fluentui/react-tooltip to v9.8.2 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
+- Bump @fluentui/react-utilities to v9.23.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
+
+### Patches
+
+- GVBC FIX ([PR #34932](https://github.com/microsoft/fluentui/pull/34932) by anushgupta@microsoft.com)
+- Adding a variation of horizontal stacked bar chart with inline legends that accept optiona annotation JSX from client to be displayed next the legend items. Also an option to hide the hover callout card. ([PR #34895](https://github.com/microsoft/fluentui/pull/34895) by aknowles@microsoft.com)
+- support image export in v9 charts ([PR #34929](https://github.com/microsoft/fluentui/pull/34929) by anushgupta@microsoft.com)
+- add histogram mode to vbc ([PR #34930](https://github.com/microsoft/fluentui/pull/34930) by anushgupta@microsoft.com)
+- add support for scatter polar trace type ([PR #34933](https://github.com/microsoft/fluentui/pull/34933) by anushgupta@microsoft.com)
+
 ## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.1.10)
 
-Mon, 28 Jul 2025 18:44:08 GMT 
+Mon, 28 Jul 2025 18:48:17 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.1.9..@fluentui/react-charts_v9.1.10)
 
 ### Patches

package/dist/index.d.ts

@@ -564,6 +564,7 @@ export declare interface CartesianChartStyles {
  */
 export declare interface Chart {
     chartContainer: HTMLElement | null;
+    toImage?: (opts?: ImageExportOptions) => Promise<string>;
 }
 
 /**
@@ -571,9 +572,10 @@ export declare interface Chart {
  * default: show the datapoint.x value
  * fraction: show the fraction of datapoint.x/datapoint.y
  * percentage: show the percentage of (datapoint.x/datapoint.y)%
+ * hidden: do not show any data text
  * {@docCategory HorizontalBarChart}
  */
-export declare type ChartDataMode = 'default' | 'fraction' | 'percentage';
+export declare type ChartDataMode = 'default' | 'fraction' | 'percentage' | 'hidden';
 
 /**
  * {@docCategory ChartData}
@@ -1942,6 +1944,11 @@ export declare interface HorizontalBarChartProps extends React_2.RefAttributes<H
      * Define a custom callout props override
      */
     calloutPropsPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;
+    /**
+     * When true, chart will display legends even if a bar ( row ) has only one data point.
+     * @default false
+     */
+    showLegendForSinglePointBar?: boolean;
 }
 
 /**
@@ -2212,7 +2219,7 @@ declare interface IDomainNRange {
 }
 
 /**
- * {@docCategory DeclarativeChart}
+ * {@docCategory Chart}
  */
 export declare interface ImageExportOptions {
     width?: number;
@@ -2307,6 +2314,21 @@ export declare interface Legend {
      */
     isLineLegendInBarChart?: boolean;
     nativeButtonProps?: React_2.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * The annotation for the legend, function returning a React node
+     */
+    legendAnnotation?: () => React_2.ReactNode;
+}
+
+/**
+ * {@docCategory Legends}
+ */
+export declare interface LegendContainer {
+    toSVG: (svgWidth: number, isRTL?: boolean) => {
+        node: SVGGElement | null;
+        width: number;
+        height: number;
+    };
 }
 
 export declare interface LegendDataItem {
@@ -2433,6 +2455,10 @@ export declare interface LegendsProps {
      * The shape for the legend.
      */
     shape?: LegendShape;
+    /**
+     * Callback to access the public methods and properties of the component.
+     */
+    legendRef?: React_2.RefObject<LegendContainer>;
 }
 
 /**
@@ -2473,6 +2499,11 @@ export declare interface LegendsStyles {
      * Style for the area that is resizable
      */
     resizableArea?: string;
+    legendContainer?: string;
+    /**
+     * Style for the annotation that is used in the legend
+     */
+    annotation?: string;
 }
 
 export declare interface LegendState {
@@ -2719,6 +2750,11 @@ export declare interface LineDataInVerticalStackedBarChart {
     y: number;
     color: string;
     legend: string;
+    /**
+     * The shape for the legend
+     * default: show the rect legend
+     */
+    legendShape?: LegendShape;
     /**
      * Data to show in callout
      */
@@ -2895,6 +2931,11 @@ export declare interface ModifiedCartesianChartProps extends CartesianChartProps
      * Create the string y-axis
      */
     createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, barWidth: number | undefined, chartType?: ChartTypes) => ScaleBand<string>;
+    /**
+     * Controls whether the numeric x-axis domain should be extended to start and end at nice rounded values.
+     * @default true
+     */
+    showRoundOffXTickValues?: boolean;
 }
 
 declare type NodesInColumns = {
@@ -3531,7 +3572,7 @@ export declare interface VerticalBarChartProps extends CartesianChartProps {
      * Specifies the mode of the chart.
      * @default 'default'
      */
-    mode?: 'default' | 'plotly';
+    mode?: 'default' | 'plotly' | 'histogram';
 }
 
 /**

package/lib/AreaChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AreaChart.ts"],"sourcesContent":["export * from './components/AreaChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,+BAA+B"}
+{"version":3,"sources":["../src/AreaChart.ts"],"sourcesContent":["export * from './components/AreaChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,+BAA+B"}

package/lib/CartesianChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CartesianChart.ts"],"sourcesContent":["export * from './components/CommonComponents/index';\n"],"names":[],"mappings":"AAAA,cAAc,sCAAsC"}
+{"version":3,"sources":["../src/CartesianChart.ts"],"sourcesContent":["export * from './components/CommonComponents/index';\n"],"names":[],"mappings":"AAAA,cAAc,sCAAsC"}

package/lib/DeclarativeChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DeclarativeChart.ts"],"sourcesContent":["export * from './components/DeclarativeChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,sCAAsC"}
+{"version":3,"sources":["../src/DeclarativeChart.ts"],"sourcesContent":["export * from './components/DeclarativeChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,sCAAsC"}

package/lib/DonutChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DonutChart.ts"],"sourcesContent":["export * from './components/DonutChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,gCAAgC"}
+{"version":3,"sources":["../src/DonutChart.ts"],"sourcesContent":["export * from './components/DonutChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,gCAAgC"}

package/lib/FunnelChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["FunnelChart.ts"],"sourcesContent":["export * from './components/FunnelChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,iCAAiC"}
+{"version":3,"sources":["../src/FunnelChart.ts"],"sourcesContent":["export * from './components/FunnelChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,iCAAiC"}

package/lib/GanttChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["GanttChart.ts"],"sourcesContent":["export * from './components/GanttChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,gCAAgC"}
+{"version":3,"sources":["../src/GanttChart.ts"],"sourcesContent":["export * from './components/GanttChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,gCAAgC"}

package/lib/GaugeChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["GaugeChart.ts"],"sourcesContent":["export * from './components/GaugeChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,gCAAgC"}
+{"version":3,"sources":["../src/GaugeChart.ts"],"sourcesContent":["export * from './components/GaugeChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,gCAAgC"}

package/lib/GroupedVerticalBarChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["GroupedVerticalBarChart.ts"],"sourcesContent":["export * from './components/GroupedVerticalBarChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,6CAA6C"}
+{"version":3,"sources":["../src/GroupedVerticalBarChart.ts"],"sourcesContent":["export * from './components/GroupedVerticalBarChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,6CAA6C"}

package/lib/HeatMapChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["HeatMapChart.ts"],"sourcesContent":["export * from './components/HeatMapChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,kCAAkC"}
+{"version":3,"sources":["../src/HeatMapChart.ts"],"sourcesContent":["export * from './components/HeatMapChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,kCAAkC"}

package/lib/HorizontalBarChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["HorizontalBarChart.ts"],"sourcesContent":["export * from './components/HorizontalBarChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,wCAAwC"}
+{"version":3,"sources":["../src/HorizontalBarChart.ts"],"sourcesContent":["export * from './components/HorizontalBarChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,wCAAwC"}

package/lib/HorizontalBarChartWithAxis.js.map

@@ -1 +1 @@
-{"version":3,"sources":["HorizontalBarChartWithAxis.ts"],"sourcesContent":["export * from './components/HorizontalBarChartWithAxis/index';\n"],"names":[],"mappings":"AAAA,cAAc,gDAAgD"}
+{"version":3,"sources":["../src/HorizontalBarChartWithAxis.ts"],"sourcesContent":["export * from './components/HorizontalBarChartWithAxis/index';\n"],"names":[],"mappings":"AAAA,cAAc,gDAAgD"}

package/lib/Legends.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Legends.ts"],"sourcesContent":["export * from './components/Legends/index';\n"],"names":[],"mappings":"AAAA,cAAc,6BAA6B"}
+{"version":3,"sources":["../src/Legends.ts"],"sourcesContent":["export * from './components/Legends/index';\n"],"names":[],"mappings":"AAAA,cAAc,6BAA6B"}

package/lib/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["LineChart.ts"],"sourcesContent":["export * from './components/LineChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,+BAA+B"}
+{"version":3,"sources":["../src/LineChart.ts"],"sourcesContent":["export * from './components/LineChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,+BAA+B"}

package/lib/Popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Popover.ts"],"sourcesContent":["export * from './components/CommonComponents/index';\n"],"names":[],"mappings":"AAAA,cAAc,sCAAsC"}
+{"version":3,"sources":["../src/Popover.ts"],"sourcesContent":["export * from './components/CommonComponents/index';\n"],"names":[],"mappings":"AAAA,cAAc,sCAAsC"}

package/lib/ResponsiveContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ResponsiveContainer.ts"],"sourcesContent":["export * from './components/ResponsiveContainer/index';\n"],"names":[],"mappings":"AAAA,cAAc,yCAAyC"}
+{"version":3,"sources":["../src/ResponsiveContainer.ts"],"sourcesContent":["export * from './components/ResponsiveContainer/index';\n"],"names":[],"mappings":"AAAA,cAAc,yCAAyC"}

package/lib/SankeyChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SankeyChart.ts"],"sourcesContent":["export * from './components/SankeyChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,iCAAiC"}
+{"version":3,"sources":["../src/SankeyChart.ts"],"sourcesContent":["export * from './components/SankeyChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,iCAAiC"}

package/lib/ScatterChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ScatterChart.ts"],"sourcesContent":["export * from './components/ScatterChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,kCAAkC"}
+{"version":3,"sources":["../src/ScatterChart.ts"],"sourcesContent":["export * from './components/ScatterChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,kCAAkC"}

package/lib/Sparkline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Sparkline.ts"],"sourcesContent":["export * from './components/Sparkline/index';\n"],"names":[],"mappings":"AAAA,cAAc,+BAA+B"}
+{"version":3,"sources":["../src/Sparkline.ts"],"sourcesContent":["export * from './components/Sparkline/index';\n"],"names":[],"mappings":"AAAA,cAAc,+BAA+B"}

package/lib/VerticalBarChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["VerticalBarChart.ts"],"sourcesContent":["export * from './components/VerticalBarChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,sCAAsC"}
+{"version":3,"sources":["../src/VerticalBarChart.ts"],"sourcesContent":["export * from './components/VerticalBarChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,sCAAsC"}

package/lib/VerticalStackedBarChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["VerticalStackedBarChart.ts"],"sourcesContent":["export * from './components/VerticalStackedBarChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,6CAA6C"}
+{"version":3,"sources":["../src/VerticalStackedBarChart.ts"],"sourcesContent":["export * from './components/VerticalStackedBarChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,6CAA6C"}

package/lib/components/AreaChart/AreaChart.js

@@ -6,9 +6,10 @@ import { select as d3Select } from 'd3-selection';
 import { tokens } from '@fluentui/react-theme';
 import { area as d3Area, stack as d3Stack, curveMonotoneX as d3CurveBasis, line as d3Line } from 'd3-shape';
 import { CartesianChart } from '../../index';
-import { calloutData, getXAxisType, ChartTypes, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, getNextColor, getColorFromToken, formatDate, getSecureProps, areArraysEqual, getCurveFactory, find, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfNumericForAreaChart, domainRangeOfDateForAreaLineVerticalBarChart, createStringYAxis } from '../../utilities/index';
+import { calloutData, getXAxisType, ChartTypes, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, getNextColor, getColorFromToken, formatDate, getSecureProps, areArraysEqual, getCurveFactory, find, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfNumericForAreaChart, domainRangeOfDateForAreaLineVerticalBarChart, createStringYAxis, useRtl } from '../../utilities/index';
 import { useId } from '@fluentui/react-utilities';
 import { Legends } from '../Legends/index';
+import { toImage } from '../../utilities/image-export-utils';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const bisect = bisector((d)=>d.x).left;
 var InterceptVisibility = /*#__PURE__*/ function(InterceptVisibility) {
@@ -44,6 +45,8 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     // determines if the given area chart has multiple stacked bar charts
     let _isMultiStackChart;
     const cartesianChartRef = React.useRef(null);
+    const _legendsRef = React.useRef(null);
+    const _isRTL = useRtl();
     const [selectedLegends, setSelectedLegends] = React.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
     const [activeLegend, setActiveLegend] = React.useState(undefined);
     const [hoverXValue, setHoverXValue] = React.useState('');
@@ -80,7 +83,11 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         var _cartesianChartRef_current;
         var _cartesianChartRef_current_chartContainer;
         return {
-            chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null
+            chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null,
+            toImage: (opts)=>{
+                var _cartesianChartRef_current, _legendsRef_current;
+                return toImage((_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, _isRTL, opts);
+            }
         };
     }, []);
     const classes = useAreaChartStyles(props);
@@ -393,7 +400,8 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
             legends: actions,
             enabledWrapLines: props.enabledLegendsWrapLines,
             ...props.legendProps,
-            onChange: _onLegendSelectionChange
+            onChange: _onLegendSelectionChange,
+            legendRef: _legendsRef
         });
     }
     function _onLegendSelectionChange(// eslint-disable-next-line @typescript-eslint/no-shadow