@fluentui/react-charts 9.2.1 → 9.2.3

package/CHANGELOG.md

@@ -1,12 +1,67 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Wed, 30 Jul 2025 16:53:06 GMT and should not be manually modified.
+This log was last generated on Thu, 21 Aug 2025 12:20:32 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.2.3)
+
+Thu, 21 Aug 2025 12:20:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.2..@fluentui/react-charts_v9.2.3)
+
+### Patches
+
+- add labels for text+markers ([PR #35025](https://github.com/microsoft/fluentui/pull/35025) by anushgupta@microsoft.com)
+- fix scatter chart bugs ([PR #35047](https://github.com/microsoft/fluentui/pull/35047) by anushgupta@microsoft.com)
+- update validation to tolerate invalid traces ([PR #34998](https://github.com/microsoft/fluentui/pull/34998) by anushgupta@microsoft.com)
+- support for ordering tick labels ([PR #35053](https://github.com/microsoft/fluentui/pull/35053) by anushgupta@microsoft.com)
+- colorscale support for bar charts ([PR #35026](https://github.com/microsoft/fluentui/pull/35026) by anushgupta@microsoft.com)
+- pie chart fix ([PR #35013](https://github.com/microsoft/fluentui/pull/35013) by anushgupta@microsoft.com)
+- use piecolorway for donut chart ([PR #34999](https://github.com/microsoft/fluentui/pull/34999) by anushgupta@microsoft.com)
+- enable scatter chart in v9 declatative ([PR #35036](https://github.com/microsoft/fluentui/pull/35036) by anushgupta@microsoft.com)
+- support for using opacity provided in plotly schema ([PR #35045](https://github.com/microsoft/fluentui/pull/35045) by anushgupta@microsoft.com)
+- add date axis support in vsbc ([PR #35018](https://github.com/microsoft/fluentui/pull/35018) by anushgupta@microsoft.com)
+- add support for multiplot declarative chart ([PR #35038](https://github.com/microsoft/fluentui/pull/35038) by anushgupta@microsoft.com)
+- add styles to tables ([PR #35012](https://github.com/microsoft/fluentui/pull/35012) by anushgupta@microsoft.com)
+- remove duplicated legends in line chart ([PR #34991](https://github.com/microsoft/fluentui/pull/34991) by anushgupta@microsoft.com)
+- fix color issue in gvbc ([PR #35050](https://github.com/microsoft/fluentui/pull/35050) by anushgupta@microsoft.com)
+- support for lines+markers ([PR #34997](https://github.com/microsoft/fluentui/pull/34997) by anushgupta@microsoft.com)
+- use schema colorscale for gvbc ([PR #35011](https://github.com/microsoft/fluentui/pull/35011) by anushgupta@microsoft.com)
+- add support for string y axis in VSBC ([PR #35016](https://github.com/microsoft/fluentui/pull/35016) by anushgupta@microsoft.com)
+- Bump @fluentui/react-button to v9.6.5 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-overflow to v9.5.5 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-popover to v9.12.5 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-tabster to v9.26.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-tooltip to v9.8.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+
+## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.2.2)
+
+Thu, 07 Aug 2025 10:03:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.1..@fluentui/react-charts_v9.2.2)
+
+### Patches
+
+- support for stacked grouped vertical bar chart+ enable wrapping of string x-axis labels in declarative chart+ hide overlapping labels based on post transform width ([PR #34936](https://github.com/microsoft/fluentui/pull/34936) by anushgupta@microsoft.com)
+- support schema colors ([PR #34967](https://github.com/microsoft/fluentui/pull/34967) by anushgupta@microsoft.com)
+- fix: migrate to R19 compatible JSX.* namespace types ([PR #34923](https://github.com/microsoft/fluentui/pull/34923) by martinhochel@microsoft.com)
+- Add support for plotly generated tables ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by anushgupta@microsoft.com)
+- enable interaction with line points without bars ([PR #34953](https://github.com/microsoft/fluentui/pull/34953) by anushgupta@microsoft.com)
+- enable round corners in declarative charts ([PR #34981](https://github.com/microsoft/fluentui/pull/34981) by anushgupta@microsoft.com)
+- create plotly aligned colorway ([PR #34978](https://github.com/microsoft/fluentui/pull/34978) by anushgupta@microsoft.com)
+- Bump @fluentui/react-button to v9.6.4 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.5 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
+- Bump @fluentui/react-overflow to v9.5.4 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
+- Bump @fluentui/react-popover to v9.12.4 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
+- Bump @fluentui/react-tabster to v9.26.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
+- Bump @fluentui/react-tooltip to v9.8.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
+- Bump @fluentui/react-utilities to v9.23.2 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
+
 ## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.2.1)
 
-Wed, 30 Jul 2025 16:53:06 GMT 
+Wed, 30 Jul 2025 16:55:44 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.0..@fluentui/react-charts_v9.2.1)
 
 ### Patches

package/dist/index.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-
 import { CurveFactory } from 'd3-shape';
+import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import { RefObject } from 'react';
 import { SankeyGraph } from 'd3-sankey';
@@ -156,6 +155,10 @@ declare interface BaseDataPoint {
      * X axis Accessibility data for callout
      */
     xAxisCalloutAccessibilityData?: AccessibilityProps;
+    /**
+     * Marker size of the points
+     */
+    markerSize?: number;
 }
 
 export declare interface Basestate {
@@ -163,14 +166,14 @@ export declare interface Basestate {
     _height?: number;
     activeLegend?: string;
     color?: string;
-    dataForHoverCard?: number;
+    dataForHoverCard?: number | string;
     isCalloutVisible: boolean;
     isLegendSelected?: boolean;
     isLegendHovered?: boolean;
     refSelected?: any;
     YValueHover?: {
         legend?: string;
-        y?: number;
+        y?: number | string;
         color?: string;
     }[];
     hoverYValue?: string | number | null;
@@ -530,9 +533,13 @@ export declare interface CartesianChartStyles {
      */
     tooltip?: string;
     /**
-     * styles for tooltip
+     * styles for axis title
      */
     axisTitle?: string;
+    /**
+     * styles for axis annotation
+     */
+    axisAnnotation?: string;
     /**
      * Style for the chart Title.
      */
@@ -637,7 +644,7 @@ export declare interface ChartPopoverProps {
     color?: string;
     culture?: string;
     customCallout?: {
-        customizedCallout?: JSX.Element;
+        customizedCallout?: JSXElement;
         customCalloutProps?: ChartPopoverProps;
     };
     isCalloutForStack?: boolean;
@@ -677,6 +684,10 @@ export declare interface ChartProps {
      * data for the points in the line chart
      */
     lineChartData?: LineChartPoints[];
+    /**
+     * data for the points in the scatter chart
+     */
+    scatterChartData?: ScatterChartPoints[];
     /**
      * data for the points in the line chart
      */
@@ -691,6 +702,64 @@ export declare interface ChartProps {
     pointLineOptions?: SVGProps<SVGLineElement>;
 }
 
+export declare const ChartTable: React_2.FunctionComponent<ChartTableProps>;
+
+/**
+ * Chart Table properties
+ * {@docCategory ChartTable}
+ */
+export declare interface ChartTableProps {
+    /**
+     * 1d or 2d Array of header values.
+     */
+    headers: {
+        value: string | number | boolean | null;
+        style?: React_2.CSSProperties;
+    }[];
+    /**
+     * Array of rows. Each row corresponds to one data entry under each column.
+     */
+    rows: {
+        value: string | number | boolean | null;
+        style?: React_2.CSSProperties;
+    }[][];
+    /**
+     * Optional width for the table
+     * @default '100%'
+     */
+    width?: string | number;
+    /**
+     * Optional height for the table
+     * @default '650px'
+     */
+    height?: string | number;
+    /**
+     * Additional class name(s) to apply to the table chart
+     */
+    className?: string;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: ChartTableStyles;
+    /**
+     * Optional callback to access the Chart interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: React_2.RefObject<Chart>;
+}
+
+/**
+ * Table Chart styles
+ * {@docCategory ChartTable}
+ */
+export declare interface ChartTableStyles {
+    root?: string | React_2.CSSProperties;
+    table?: string;
+    headerCell?: string;
+    bodyCell?: string;
+    chart?: string;
+}
+
 declare enum ChartTypes {
     AreaChart = 0,
     LineChart = 1,
@@ -731,6 +800,8 @@ export declare interface ColorFillBarsProps {
     onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined;
 }
 
+declare type ColorwayType = 'default' | 'builtin' | 'others' | undefined;
+
 /**
  * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,
  * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.
@@ -852,6 +923,14 @@ export declare interface DeclarativeChartProps extends React_2.RefAttributes<HTM
      * the public methods and properties of the component.
      */
     componentRef?: React_2.RefObject<IDeclarativeChart>;
+    /**
+     * Optional prop to specify the colorway type of the chart.
+     * - 'default': Use Fluent UI color palette aligning with plotly colorway.
+     * - 'builtin': Use Fluent UI colorway.
+     * - 'others': Reserved for future colorways.
+     * @default 'default'
+     */
+    colorwayType?: ColorwayType;
 }
 
 /**
@@ -884,7 +963,7 @@ export declare interface DonutChartProps {
     /**
      * Define a custom callout renderer for a data point
      */
-    onRenderCalloutPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => JSX.Element | undefined;
+    onRenderCalloutPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => JSXElement | undefined;
     /**
      * Define a custom callout props override
      */
@@ -947,6 +1026,11 @@ export declare interface DonutChartProps {
      * the public methods and properties of the component.
      */
     componentRef?: React_2.RefObject<Chart>;
+    /**
+     * Prop to enable the round corners in the chart
+     * @default false
+     */
+    roundCorners?: boolean;
 }
 
 /**
@@ -1485,7 +1569,7 @@ export declare type GaugeChartVariant = 'single-segment' | 'multiple-segments';
  */
 export declare type GaugeValueFormat = 'percentage' | 'fraction';
 
-export declare const getChartValueLabel: (chartValue: number, minValue: number, maxValue: number, chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string) | undefined, forCallout?: boolean) => string;
+export declare const getChartValueLabel: (chartValue: number, minValue: number, maxValue: number, chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string), forCallout?: boolean) => string;
 
 export declare const getColorContrast: (c1: string, c2: string) => number;
 
@@ -1939,7 +2023,7 @@ export declare interface HorizontalBarChartProps extends React_2.RefAttributes<H
     /**
      * prop to render the custom callout
      */
-    onRenderCalloutPerHorizontalBar?: (props: ChartDataPoint) => JSX.Element | undefined;
+    onRenderCalloutPerHorizontalBar?: (props: ChartDataPoint) => JSXElement | undefined;
     /**
      * Define a custom callout props override
      */
@@ -2545,6 +2629,10 @@ export declare interface LineChartDataPoint extends BaseDataPoint {
      * Dependent value of the data point, rendered along the y-axis.
      */
     y: number;
+    /**
+     * text labels of marker points
+     */
+    text?: string;
 }
 
 /**
@@ -2600,6 +2688,10 @@ export declare interface LineChartLineOptions extends SVGProps<SVGPathElement> {
      * @default 'linear'
      */
     curve?: 'linear' | 'natural' | 'step' | 'stepAfter' | 'stepBefore' | CurveFactory;
+    /**
+     * Defines the mode of points to be rendered.
+     */
+    mode?: 'lines' | 'markers' | 'text' | 'lines+markers' | 'text+markers' | 'text+lines' | 'text+lines+markers' | 'none' | 'gauge' | 'number' | 'delta' | 'number+delta' | 'gauge+number' | 'gauge+number+delta' | 'gauge+delta' | 'markers+text' | 'lines+text' | 'lines+markers+text';
 }
 
 /**
@@ -2724,6 +2816,10 @@ export declare interface LineChartStyles extends CartesianChartStyles {
      * styles for line border
      */
     lineBorder?: string;
+    /**
+     * styles for marker label
+     */
+    markerLabel?: string;
 }
 
 /**
@@ -2747,7 +2843,7 @@ export declare interface LineDataInVerticalBarChart {
  * {@docCategory ChartData}
  */
 export declare interface LineDataInVerticalStackedBarChart {
-    y: number;
+    y: number | string;
     color: string;
     legend: string;
     /**
@@ -2758,7 +2854,7 @@ export declare interface LineDataInVerticalStackedBarChart {
     /**
      * Data to show in callout
      */
-    data?: number;
+    data?: number | string;
     yAxisCalloutData?: string;
     /**
      * Whether to use the secondary y scale or not
@@ -2823,7 +2919,7 @@ export declare interface ModifiedCartesianChartProps extends CartesianChartProps
     /**
      * Legends of the chart.
      */
-    legendBars: JSX.Element | null;
+    legendBars: JSXElement | null;
     /**
      * Callout props
      */
@@ -2992,7 +3088,7 @@ export declare interface RefArrayData {
  * @public
  */
 declare interface RenderFunction<P> {
-    (props?: P, defaultRender?: (props?: P) => JSX.Element | null): JSX.Element | null;
+    (props?: P, defaultRender?: (props?: P) => JSXElement | null): JSXElement | null;
 }
 
 /**
@@ -3251,6 +3347,50 @@ export declare interface ScatterChartDataPoint extends BaseDataPoint {
      * Marker size of the points
      */
     markerSize?: number;
+    /**
+     * text labels of marker points
+     */
+    text?: string;
+}
+
+/**
+ * {@docCategory IChartData}
+ */
+export declare interface ScatterChartPoints {
+    /**
+     * Legend text for the datapoint in the chart
+     */
+    legend: string;
+    /**
+     * The shape for the legend
+     * default: show the rect legend
+     */
+    legendShape?: LegendShape;
+    /**
+     * dataPoints for the line chart
+     */
+    data: ScatterChartDataPoint[];
+    /**
+     * color for the legend in the chart
+     */
+    color?: string;
+    /**
+     * opacity for chart fill color
+     */
+    opacity?: number;
+    /**
+     * hide dots for points that are not active
+     */
+    hideNonActiveDots?: boolean;
+    /**
+     * Defines the function that is executed on clicking this legend
+     */
+    onLegendClick?: (selectedLegend: string | null | string[]) => void;
+    /**
+     * Whether to use the secondary y scale or not
+     * False by default.
+     */
+    useSecondaryYScale?: boolean;
 }
 
 /**
@@ -3292,6 +3432,10 @@ export declare interface ScatterChartStyleProps extends CartesianChartStyleProps
  * {@docCategory ScatterChart}
  */
 export declare interface ScatterChartStyles extends CartesianChartStyles {
+    /**
+     * Style for the marker label
+     */
+    markerLabel?: string;
 }
 
 /**
@@ -3720,6 +3864,15 @@ export declare interface VerticalStackedBarChartProps extends CartesianChartProp
      * @default 'default'
      */
     mode?: 'default' | 'plotly';
+    /**
+     *@default false
+     *Used for to elipse y axis labes and show tooltip on x axis labels
+     */
+    showYAxisLablesTooltip?: boolean;
+    /**
+     *@default false
+     *Used for showing complete y axis lables   */
+    showYAxisLables?: boolean;
 }
 
 /**
@@ -3791,7 +3944,7 @@ export declare interface VSChartDataPoint {
     /**
      * data the datapoint in the chart
      */
-    data: number;
+    data: number | string;
     /**
      * Legend text for the datapoint in the chart
      */
@@ -3840,7 +3993,7 @@ declare enum YAxisType {
 
 export declare interface YValueHover {
     legend?: string;
-    y?: number;
+    y?: number | string;
     color?: string;
     data?: string | number;
     shouldDrawBorderBottom?: boolean;

package/lib/ChartTable.js

@@ -0,0 +1 @@
+export * from './components/ChartTable/index';

package/lib/ChartTable.js.map

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

package/lib/components/AreaChart/AreaChart.js

@@ -91,6 +91,9 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         };
     }, []);
     const classes = useAreaChartStyles(props);
+    function _getMinMaxOfYAxis(points, yAxisType, useSecondaryYScale) {
+        return findNumericMinMaxOfY(points, yAxisType, useSecondaryYScale);
+    }
     function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
         let domainNRangeValue;
         if (xAxisType === XAxisTypes.NumericAxis) {
@@ -788,7 +791,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
             createStringYAxis: createStringYAxis,
             getmargins: _getMargins,
             onChartMouseLeave: _handleChartMouseLeave,
-            getMinMaxOfYAxis: findNumericMinMaxOfY,
+            getMinMaxOfYAxis: _getMinMaxOfYAxis,
             enableFirstRenderOptimization: props.enablePerfOptimization && _firstRenderOptimization,
             componentRef: cartesianChartRef,
             /* eslint-disable react/jsx-no-bind */ // eslint-disable-next-line react/no-children-prop, @typescript-eslint/no-shadow