From 4497de25c78d215a59088d28ad8823dfc73a1ef4 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Tue, 16 Sep 2025 15:04:08 +0530 Subject: [PATCH 01/10] Removed separator for last item in the chartPopover list --- .../library/src/components/CommonComponents/ChartPopover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/charts/react-charts/library/src/components/CommonComponents/ChartPopover.tsx b/packages/charts/react-charts/library/src/components/CommonComponents/ChartPopover.tsx index 42003dd33dde74..700bf5a3d5798e 100644 --- a/packages/charts/react-charts/library/src/components/CommonComponents/ChartPopover.tsx +++ b/packages/charts/react-charts/library/src/components/CommonComponents/ChartPopover.tsx @@ -125,7 +125,7 @@ export const ChartPopover: React.FunctionComponent = React.fo {props!.YValueHover && props!.YValueHover.map((yValue: YValueHover, index: number, yValues: YValueHover[]) => { const isLast: boolean = index + 1 === yValues.length; - const { shouldDrawBorderBottom = false } = yValue; + const shouldDrawBorderBottom = isLast ? false : yValue.shouldDrawBorderBottom ?? false; return (
Date: Mon, 22 Sep 2025 13:32:36 +0530 Subject: [PATCH 02/10] Fixed callout issue for non highlighted part of the donut chart --- .../library/src/components/DonutChart/DonutChart.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx b/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx index c3b2ff59824d5a..f69bad038359f1 100644 --- a/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx +++ b/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx @@ -358,7 +358,9 @@ export const DonutChart: React.FunctionComponent = React.forwar yCalloutValue={yCalloutValue} culture={props.culture ?? 'en-us'} clickPosition={clickPosition} - isPopoverOpen={!props.hideTooltip && isPopoverOpen} + isPopoverOpen={ + !props.hideTooltip && isPopoverOpen && (_noLegendsHighlighted() || _isLegendHighlighted(legend)) + } legend={legend!} YValue={value!} color={color} From c62d37915ceae3d61b79fbc3b7992d90a99b6d64 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Mon, 22 Sep 2025 13:36:22 +0530 Subject: [PATCH 03/10] updated chnage file --- ...-react-charts-74af068e-3941-4d75-803a-365d7adeff22.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charts-74af068e-3941-4d75-803a-365d7adeff22.json diff --git a/change/@fluentui-react-charts-74af068e-3941-4d75-803a-365d7adeff22.json b/change/@fluentui-react-charts-74af068e-3941-4d75-803a-365d7adeff22.json new file mode 100644 index 00000000000000..955ae8eddc1871 --- /dev/null +++ b/change/@fluentui-react-charts-74af068e-3941-4d75-803a-365d7adeff22.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "simple bug fixes", + "packageName": "@fluentui/react-charts", + "email": "132879294+v-baambati@users.noreply.github.com", + "dependentChangeType": "patch" +} From 67cfc24f103cd4de6cc98b184b5cbb9c5c3cafa2 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Thu, 25 Sep 2025 16:30:20 +0530 Subject: [PATCH 04/10] feat(react-charting): enable wrapping of string x-axis labels in scatter chart --- .../src/components/DeclarativeChart/PlotlySchemaAdapter.ts | 1 + .../src/components/DeclarativeChart/PlotlySchemaAdapter.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 4d0f0dd643a530..7815aa0da79f92 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -1198,6 +1198,7 @@ const transformPlotlyJsonToScatterTraceProps = ( hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000, + wrapXAxisLables: typeof input.data[0]?.name === 'string', ...getTitles(input.layout), ...getXAxisTickFormat(input.data[0], input.layout), ...yAxisTickFormat, diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 580537b92d4839..fb46538ed89e45 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -1103,6 +1103,7 @@ const transformPlotlyJsonToScatterTraceProps = ( hideTickOverlap: true, hideLegend, useUTC: false, + wrapXAxisLables: typeof input.data[0]?.name === 'string', optimizeLargeData: numDataPoints > 1000, ...getTitles(input.layout), ...getXAxisTickFormat(input.data[0], input.layout), From 80de546f65a955f71a28d225969881b7f289e28a Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Thu, 25 Sep 2025 16:34:33 +0530 Subject: [PATCH 05/10] added change files --- ...eact-charting-f5b9fba6-92e9-4488-bec4-76dfb97edc8c.json | 6 ++++++ ...-react-charts-29ab0a00-5f28-4754-a2c6-05e177082749.json | 7 +++++++ 2 files changed, 13 insertions(+) create mode 100644 change/@fluentui-react-charting-f5b9fba6-92e9-4488-bec4-76dfb97edc8c.json create mode 100644 change/@fluentui-react-charts-29ab0a00-5f28-4754-a2c6-05e177082749.json diff --git a/change/@fluentui-react-charting-f5b9fba6-92e9-4488-bec4-76dfb97edc8c.json b/change/@fluentui-react-charting-f5b9fba6-92e9-4488-bec4-76dfb97edc8c.json new file mode 100644 index 00000000000000..99a1cf40909a0a --- /dev/null +++ b/change/@fluentui-react-charting-f5b9fba6-92e9-4488-bec4-76dfb97edc8c.json @@ -0,0 +1,6 @@ +{ + "type": "patch", + "packageName": "@fluentui/react-charting", + "email": "132879294+v-baambati@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-charts-29ab0a00-5f28-4754-a2c6-05e177082749.json b/change/@fluentui-react-charts-29ab0a00-5f28-4754-a2c6-05e177082749.json new file mode 100644 index 00000000000000..d0d397ccdd8230 --- /dev/null +++ b/change/@fluentui-react-charts-29ab0a00-5f28-4754-a2c6-05e177082749.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat: enable wrapping of string x-axis labels in scatterchart", + "packageName": "@fluentui/react-charts", + "email": "132879294+v-baambati@users.noreply.github.com", + "dependentChangeType": "patch" +} From 53f1db329a0dc3635895d9fbe7b5447f194c3472 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Fri, 26 Sep 2025 10:15:31 +0530 Subject: [PATCH 06/10] update code --- .../DeclarativeChart/PlotlySchemaAdapter.ts | 11 +++++------ .../DeclarativeChart/PlotlySchemaAdapter.ts | 10 +++++----- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 7815aa0da79f92..08bb1b1be890b4 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -1082,6 +1082,10 @@ const transformPlotlyJsonToScatterTraceProps = ( let mode: string = 'tonexty'; const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot); const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout); + const xValues = (input.data[0] as Partial).x as Datum[]; + const isXString = isStringArray(xValues); + const isXDate = isDateArray(xValues); + const isXNumber = isNumberArray(xValues); const chartData: ILineChartPoints[] = input.data .map((series: Partial, index: number) => { const colors = isScatterMarkers @@ -1097,10 +1101,6 @@ const transformPlotlyJsonToScatterTraceProps = ( colorMap, isDarkTheme, ) as string[] | string | undefined; - const xValues = series.x as Datum[]; - const isXString = isStringArray(xValues); - const isXDate = isDateArray(xValues); - const isXNumber = isNumberArray(xValues); const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis const legend: string = legends[index]; // resolve color for each legend's lines from the extracted colors @@ -1188,7 +1188,6 @@ const transformPlotlyJsonToScatterTraceProps = ( const scatterChartProps: IChartProps = { scatterChartData: chartData, }; - const commonProps = { supportNegativeData: true, ...secondaryYAxisValues, @@ -1198,7 +1197,7 @@ const transformPlotlyJsonToScatterTraceProps = ( hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000, - wrapXAxisLables: typeof input.data[0]?.name === 'string', + wrapXAxisLables: isXString && !isXDate, ...getTitles(input.layout), ...getXAxisTickFormat(input.data[0], input.layout), ...yAxisTickFormat, diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index fb46538ed89e45..0b089b645974d6 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -1003,6 +1003,10 @@ const transformPlotlyJsonToScatterTraceProps = ( let mode: string = 'tonexty'; const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot); const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout); + const xValues = (input.data[0] as Partial).x as Datum[]; + const isXString = isStringArray(xValues); + const isXDate = isDateArray(xValues); + const isXNumber = isNumberArray(xValues); const chartData: LineChartPoints[] = input.data .map((series: Partial, index: number) => { const colors = isScatterMarkers @@ -1018,10 +1022,6 @@ const transformPlotlyJsonToScatterTraceProps = ( colorMap, isDarkTheme, ) as string[] | string | undefined; - const xValues = series.x as Datum[]; - const isXString = isStringArray(xValues); - const isXDate = isDateArray(xValues); - const isXNumber = isNumberArray(xValues); const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis const legend: string = legends[index]; // resolve color for each legend's lines from the extracted colors @@ -1103,7 +1103,7 @@ const transformPlotlyJsonToScatterTraceProps = ( hideTickOverlap: true, hideLegend, useUTC: false, - wrapXAxisLables: typeof input.data[0]?.name === 'string', + wrapXAxisLables: isXString && !isXDate, optimizeLargeData: numDataPoints > 1000, ...getTitles(input.layout), ...getXAxisTickFormat(input.data[0], input.layout), From d8c9ddfc45458784590a8e0460a2e0de66098f2e Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Fri, 26 Sep 2025 10:58:47 +0530 Subject: [PATCH 07/10] update code --- .../DeclarativeChart/PlotlySchemaAdapter.ts | 13 ++++++++----- .../DeclarativeChart/PlotlySchemaAdapter.ts | 13 ++++++++----- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 08bb1b1be890b4..27b342e2153ab0 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -1082,10 +1082,7 @@ const transformPlotlyJsonToScatterTraceProps = ( let mode: string = 'tonexty'; const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot); const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout); - const xValues = (input.data[0] as Partial).x as Datum[]; - const isXString = isStringArray(xValues); - const isXDate = isDateArray(xValues); - const isXNumber = isNumberArray(xValues); + var shouldWrapLabels = false; const chartData: ILineChartPoints[] = input.data .map((series: Partial, index: number) => { const colors = isScatterMarkers @@ -1101,7 +1098,12 @@ const transformPlotlyJsonToScatterTraceProps = ( colorMap, isDarkTheme, ) as string[] | string | undefined; + const xValues = series.x as Datum[]; + const isXString = isStringArray(xValues); + const isXDate = isDateArray(xValues); + const isXNumber = isNumberArray(xValues); const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis + shouldWrapLabels = shouldWrapLabels || (isXString && !isXDate); const legend: string = legends[index]; // resolve color for each legend's lines from the extracted colors const seriesColor = resolveColor( @@ -1188,6 +1190,7 @@ const transformPlotlyJsonToScatterTraceProps = ( const scatterChartProps: IChartProps = { scatterChartData: chartData, }; + const commonProps = { supportNegativeData: true, ...secondaryYAxisValues, @@ -1197,7 +1200,7 @@ const transformPlotlyJsonToScatterTraceProps = ( hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000, - wrapXAxisLables: isXString && !isXDate, + shouldWrapLabels: shouldWrapLabels, ...getTitles(input.layout), ...getXAxisTickFormat(input.data[0], input.layout), ...yAxisTickFormat, diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 0b089b645974d6..7e496dc18af575 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -1003,10 +1003,7 @@ const transformPlotlyJsonToScatterTraceProps = ( let mode: string = 'tonexty'; const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot); const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout); - const xValues = (input.data[0] as Partial).x as Datum[]; - const isXString = isStringArray(xValues); - const isXDate = isDateArray(xValues); - const isXNumber = isNumberArray(xValues); + var shouldWrapLabels = false; const chartData: LineChartPoints[] = input.data .map((series: Partial, index: number) => { const colors = isScatterMarkers @@ -1022,7 +1019,13 @@ const transformPlotlyJsonToScatterTraceProps = ( colorMap, isDarkTheme, ) as string[] | string | undefined; + const xValues = series.x as Datum[]; + // Move these outside the return callback scope for reuse + const isXString = isStringArray(xValues); + const isXDate = isDateArray(xValues); + const isXNumber = isNumberArray(xValues); const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis + shouldWrapLabels = shouldWrapLabels || (isXString && !isXDate); const legend: string = legends[index]; // resolve color for each legend's lines from the extracted colors const seriesColor = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme); @@ -1103,7 +1106,7 @@ const transformPlotlyJsonToScatterTraceProps = ( hideTickOverlap: true, hideLegend, useUTC: false, - wrapXAxisLables: isXString && !isXDate, + wrapXAxisLables: shouldWrapLabels, optimizeLargeData: numDataPoints > 1000, ...getTitles(input.layout), ...getXAxisTickFormat(input.data[0], input.layout), From 2587b27158a8b7d8a69459db0a4746c1df27049a Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Mon, 6 Oct 2025 09:35:04 +0530 Subject: [PATCH 08/10] updated snaps --- .../__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap b/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap index 51520056fa1db2..2516cc73192e68 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap @@ -4658,6 +4658,7 @@ Object { "supportNegativeData": true, "useUTC": false, "width": undefined, + "wrapXAxisLables": false, "xAxisTitle": "", "yAxisTitle": "", "yMaxValue": 16.562957844203055, @@ -5059,6 +5060,7 @@ Object { "supportNegativeData": true, "useUTC": false, "width": undefined, + "wrapXAxisLables": false, "xAxisTitle": "", "yAxisTitle": "", } @@ -5206,6 +5208,7 @@ Object { "supportNegativeData": true, "useUTC": false, "width": undefined, + "wrapXAxisLables": false, "xAxisTitle": "", "yAxisTitle": "", "yMaxValue": 1.0620659379275244, From 6e4d71024d303d113cc898313ea95e78527b27ad Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Mon, 6 Oct 2025 11:53:52 +0530 Subject: [PATCH 09/10] updated snapshots --- .../__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap b/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap index 2297901d89e427..1ae718b103f3d6 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap +++ b/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap @@ -341,6 +341,7 @@ Object { "hideTickOverlap": true, "mode": "tonexty", "optimizeLargeData": false, + "shouldWrapLabels": false, "supportNegativeData": true, "useUTC": false, "width": undefined, @@ -4890,6 +4891,7 @@ Object { "hideTickOverlap": true, "optimizeLargeData": false, "roundedTicks": true, + "shouldWrapLabels": false, "supportNegativeData": true, "useUTC": false, "width": undefined, @@ -6586,6 +6588,7 @@ Object { "hideTickOverlap": true, "optimizeLargeData": false, "roundedTicks": true, + "shouldWrapLabels": false, "showYAxisLablesTooltip": true, "supportNegativeData": true, "useUTC": false, From c2d264adcd8cd2df1b0925dfdf3f08eaae99d8b0 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Mon, 6 Oct 2025 15:10:33 +0530 Subject: [PATCH 10/10] removed unwanted cpmments --- .../src/components/DeclarativeChart/PlotlySchemaAdapter.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 5b63e330b05ab1..cf130bbd0d8bc3 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -1022,7 +1022,6 @@ const transformPlotlyJsonToScatterTraceProps = ( isDarkTheme, ) as string[] | string | undefined; const xValues = series.x as Datum[]; - // Move these outside the return callback scope for reuse const isXString = isStringArray(xValues); const isXDate = isDateArray(xValues); const isXNumber = isNumberArray(xValues);