@fluentui/react-charts 9.3.1 → 9.3.3

package/CHANGELOG.md

@@ -1,12 +1,52 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Mon, 06 Oct 2025 15:01:29 GMT and should not be manually modified.
+This log was last generated on Tue, 21 Oct 2025 14:13:08 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.3)
+
+Tue, 21 Oct 2025 14:13:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.2..@fluentui/react-charts_v9.3.3)
+
+### Patches
+
+- fix: callout not appearing on scatter chart ([PR #35310](https://github.com/microsoft/fluentui/pull/35310) by kumarkshitij@microsoft.com)
+- fix place value formatting bug in donut chart ([PR #35315](https://github.com/microsoft/fluentui/pull/35315) by anushgupta@microsoft.com)
+- add missing code in v9 ([PR #35318](https://github.com/microsoft/fluentui/pull/35318) by anushgupta@microsoft.com)
+- fix: resolve data points based on axis type + replace invalid values with 0 for valid coordinates ([PR #35323](https://github.com/microsoft/fluentui/pull/35323) by kumarkshitij@microsoft.com)
+- support reference lines in line chart and VBC ([PR #35330](https://github.com/microsoft/fluentui/pull/35330) by anushgupta@microsoft.com)
+- fix legend shape bug ([PR #35335](https://github.com/microsoft/fluentui/pull/35335) by anushgupta@microsoft.com)
+- feat: add support for lines in GVBC ([PR #35321](https://github.com/microsoft/fluentui/pull/35321) by kumarkshitij@microsoft.com)
+- fix donut colors and segment orders ([PR #35316](https://github.com/microsoft/fluentui/pull/35316) by anushgupta@microsoft.com)
+- add fill for scatter polar chart ([PR #35317](https://github.com/microsoft/fluentui/pull/35317) by anushgupta@microsoft.com)
+- fix(react-charts): Show markers only when mode has markers for large data ([PR #35311](https://github.com/microsoft/fluentui/pull/35311) by 120183316+srmukher@users.noreply.github.com)
+- fix popover positioning issue ([PR #35289](https://github.com/microsoft/fluentui/pull/35289) by anushgupta@microsoft.com)
+- fix chart exception issue ([PR #35342](https://github.com/microsoft/fluentui/pull/35342) by anushgupta@microsoft.com)
+- Bump @fluentui/react-button to v9.6.9 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.0 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
+- Bump @fluentui/react-overflow to v9.6.2 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
+- Bump @fluentui/react-popover to v9.12.9 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
+- Bump @fluentui/react-tooltip to v9.8.8 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
+
+## [9.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.2)
+
+Wed, 08 Oct 2025 12:04:53 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.1..@fluentui/react-charts_v9.3.2)
+
+### Patches
+
+- Bump @fluentui/react-button to v9.6.8 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.2 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-overflow to v9.6.1 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-popover to v9.12.8 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-tabster to v9.26.7 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-tooltip to v9.8.7 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-utilities to v9.25.1 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+
 ## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.1)
 
-Mon, 06 Oct 2025 15:01:29 GMT 
+Mon, 06 Oct 2025 15:01:58 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.0..@fluentui/react-charts_v9.3.1)
 
 ### Patches

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { CurveFactory } from 'd3-shape';
 import type { JSXElement } from '@fluentui/react-utilities';
+import { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import { RefObject } from 'react';
 import { SankeyGraph } from 'd3-sankey';
@@ -173,6 +174,24 @@ export declare type AxisProps = {
  */
 export declare type AxisScaleType = 'default' | 'log';
 
+/**
+ * Represents a bar series.
+ */
+export declare interface BarSeries<X extends string | number | Date, Y extends string | number | Date> extends DataSeries {
+    /**
+     * Type discriminator: always 'bar' for this series.
+     */
+    type: 'bar';
+    /**
+     * Array of data points for the series.
+     */
+    data: DataPointV2<X, Y>[];
+    /**
+     * Optional group identifier for the series.
+     */
+    key?: string;
+}
+
 /**
  * {@docCategory ChartData}
  */
@@ -736,6 +755,7 @@ export declare interface ChartPopoverProps {
     ratio?: [number, number];
     isCartesian?: boolean;
     styles?: Partial<PopoverComponentStyles>;
+    positioning?: PositioningShorthand;
 }
 
 /**
@@ -927,6 +947,82 @@ export declare interface DataPoint {
     onClick?: VoidFunction;
 }
 
+/**
+ * Represents a single data point in a series.
+ */
+export declare interface DataPointV2<X extends string | number | Date, Y extends string | number | Date> {
+    /**
+     * X-axis value of the data point.
+     */
+    x: X;
+    /**
+     * Y-axis value of the data point.
+     */
+    y: Y;
+    /**
+     * Optional click handler for the data point.
+     */
+    onClick?: () => void;
+    /**
+     * Custom text to show in the callout in place of the x-axis value.
+     */
+    xAxisCalloutData?: string;
+    /**
+     * Custom text to show in the callout in place of the y-axis value.
+     */
+    yAxisCalloutData?: string;
+    /**
+     * Accessibility properties for the data point.
+     */
+    callOutAccessibilityData?: AccessibilityProps;
+    /**
+     * Custom marker size for the data point.
+     */
+    markerSize?: number;
+    /**
+     * Optional text to annotate or label the data point.
+     */
+    text?: string;
+    /**
+     * Color of the data point. If not provided, it will inherit the series color.
+     */
+    color?: string;
+}
+
+/**
+ * Base interface for a series.
+ */
+export declare interface DataSeries {
+    /**
+     * Name of the series to be displayed in the legend.
+     */
+    legend: string;
+    /**
+     * Shape used in the legend (e.g., circle, square).
+     */
+    legendShape?: LegendShape;
+    /**
+     * Color of the series.
+     */
+    color?: string;
+    /**
+     * Opacity of the series.
+     */
+    opacity?: number;
+    /**
+     * Gradient fill for the series (start and end colors).
+     */
+    gradient?: [string, string];
+    /**
+     * Whether this series should be plotted against a secondary Y-axis.
+     */
+    useSecondaryYScale?: boolean;
+    /**
+     * Callback invoked when the legend item is clicked.
+     */
+    onLegendClick?: (selectedLegend: string | null | string[]) => void;
+}
+
 export declare const DataVizPalette: {
     color1: string;
     color2: string;
@@ -1109,6 +1205,13 @@ export declare interface DonutChartProps extends CartesianChartProps {
      * @default false
      */
     roundCorners?: boolean;
+    /**
+     * Rendering order of the legend
+     * @default 'default'
+     * 'default' - as per data provided
+     * 'sorted' - in descending order of value
+     */
+    order?: 'default' | 'sorted';
 }
 
 /**
@@ -1760,6 +1863,11 @@ export declare interface GroupedVerticalBarChartProps extends CartesianChartProp
      * The prop used to enable rounded corners for the chart.
      */
     roundCorners?: boolean;
+    /**
+     * New flexible data prop - supports both bar and line series.
+     * Use `dataV2` instead of `data` when line series are included.
+     */
+    dataV2?: (BarSeries<string, number> | LineSeries<string, number>)[];
 }
 
 /**
@@ -1800,7 +1908,7 @@ export declare interface GVBarChartSeriesPoint {
     /**
      * Color for the legend in the chart
      */
-    color: string;
+    color?: string;
     /**
      * Legend text in the chart
      */
@@ -2716,6 +2824,10 @@ export declare interface LineChartDataPoint extends BaseDataPoint {
      * text labels of marker points
      */
     text?: string;
+    /**
+     * Per-point marker color (overrides series color when present)
+     */
+    markerColor?: string;
 }
 
 /**
@@ -2956,6 +3068,36 @@ export declare interface LineDataInVerticalStackedBarChart {
     lineOptions?: LineChartLineOptions;
 }
 
+/**
+ * Represents a line series.
+ */
+export declare interface LineSeries<X extends string | number | Date, Y extends string | number | Date> extends DataSeries {
+    /**
+     * Type discriminator: always 'line' for this series.
+     */
+    type: 'line';
+    /**
+     * Array of data points for the series.
+     */
+    data: DataPointV2<X, Y>[];
+    /**
+     * Optional gaps to render in the line.
+     */
+    gaps?: LineChartGap[];
+    /**
+     * Additional line rendering options (e.g., stroke width, curve type).
+     */
+    lineOptions?: LineChartLineOptions;
+    /**
+     * If true, hides dots for inactive (unfocused/unhovered) data points.
+     */
+    hideInactiveDots?: boolean;
+    /**
+     * Callback invoked when the line itself is clicked.
+     */
+    onLineClick?: () => void;
+}
+
 export declare interface MapXToDataSet {
     [key: string]: LineChartDataPoint[];
     [key: number]: LineChartDataPoint[];
@@ -3440,6 +3582,10 @@ export declare interface ScatterChartDataPoint extends BaseDataPoint {
      * text labels of marker points
      */
     text?: string;
+    /**
+     * Per-point marker color (overrides series color when present)
+     */
+    markerColor?: string;
 }
 
 /**

package/lib/components/AreaChart/AreaChart.js

@@ -7,7 +7,7 @@ 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, getSecureProps, areArraysEqual, getCurveFactory, find, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfNumericForAreaLineScatterCharts, domainRangeOfDateForAreaLineScatterVerticalBarCharts, createStringYAxis, useRtl } from '../../utilities/index';
+import { calloutData, getXAxisType, ChartTypes, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, getNextColor, getColorFromToken, getSecureProps, areArraysEqual, getCurveFactory, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfNumericForAreaLineScatterCharts, domainRangeOfDateForAreaLineScatterVerticalBarCharts, createStringYAxis, useRtl, findCalloutPoints } from '../../utilities/index';
 import { useId } from '@fluentui/react-utilities';
 import { Legends } from '../Legends/index';
 import { toImage } from '../../utilities/image-export-utils';
@@ -161,11 +161,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         // eslint-disable-next-line @typescript-eslint/no-shadow
         const { xAxisCalloutData, xAxisCalloutAccessibilityData } = lineChartData[0].data[index];
         const formattedDate = pointToHighlight instanceof Date ? formatDateToLocaleString(pointToHighlight, props.culture, props.useUTC) : pointToHighlight;
-        const modifiedXVal = pointToHighlight instanceof Date ? pointToHighlight.getTime() : pointToHighlight;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const found = find(_calloutPoints, (element)=>{
-            return element.x === modifiedXVal;
-        });
+        const found = findCalloutPoints(_calloutPoints, pointToHighlight);
         // eslint-disable-next-line @typescript-eslint/no-shadow
         const _nearestCircleToHighlight = axisType === XAxisTypes.DateAxis ? pointToHighlight.getTime() : pointToHighlight;
         // if no points need to be called out then don't show vertical line and callout card
@@ -695,24 +691,24 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         _updatePosition(cx, cy);
         const { x, y, xAxisCalloutData } = props.data.lineChartData[lineIndex].data[pointIndex];
         const formattedDate = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
-        const modifiedXVal = x instanceof Date ? x.getTime() : x;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const found = _calloutPoints.find((e)=>e.x === modifiedXVal);
-        // Show details in the callout for the focused point only
-        found.values = found.values.filter((e)=>e.y === y);
-        const filteredValues = _getFilteredLegendValues(found.values);
-        setPopoverOpen(true);
-        setHoverXValue(xAxisCalloutData ? xAxisCalloutData : formattedDate);
-        setYValueHover(filteredValues);
-        setStackCalloutProps({
-            ...found,
-            values: filteredValues
-        });
-        setDataPointCalloutProps({
-            ...found,
-            values: filteredValues
-        });
-        setActivePoint(circleId);
+        const found = findCalloutPoints(_calloutPoints, x);
+        if (found) {
+            // Show details in the callout for the focused point only
+            found.values = found.values.filter((e)=>e.y === y);
+            const filteredValues = _getFilteredLegendValues(found.values);
+            setPopoverOpen(true);
+            setHoverXValue(xAxisCalloutData ? xAxisCalloutData : formattedDate);
+            setYValueHover(filteredValues);
+            setStackCalloutProps({
+                ...found,
+                values: filteredValues
+            });
+            setDataPointCalloutProps({
+                ...found,
+                values: filteredValues
+            });
+            setActivePoint(circleId);
+        }
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function _getFilteredLegendValues(values) {