From 7d41aef50287a7abfe64ef77cf73710fecc5f2e1 Mon Sep 17 00:00:00 2001 From: Yush Singla Date: Wed, 21 Jan 2026 16:29:57 +0530 Subject: [PATCH 1/2] changes for the scatter and line chart to reduce marker size --- .../library/src/components/LineChart/LineChart.tsx | 4 +++- .../library/src/components/ScatterChart/ScatterChart.tsx | 5 ++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/charts/react-charts/library/src/components/LineChart/LineChart.tsx b/packages/charts/react-charts/library/src/components/LineChart/LineChart.tsx index e7139a619fb2cb..9cdbe4e1a8dbb2 100644 --- a/packages/charts/react-charts/library/src/components/LineChart/LineChart.tsx +++ b/packages/charts/react-charts/library/src/components/LineChart/LineChart.tsx @@ -68,6 +68,8 @@ const bisect = bisector((d: any) => d.x).left; const DEFAULT_LINE_STROKE_SIZE = 4; // The given shape of a icon must be 2.5 times bigger than line width (known as stroke width) const PATH_MULTIPLY_SIZE = 2.5; +// Scale factor to reduce marker sizes (0.6 = 60% of calculated size) +const MARKER_SIZE_SCALE_FACTOR = 0.6; /** * @@ -549,7 +551,7 @@ export const LineChart: React.FunctionComponent = React.forwardR xScaleType: props.xScaleType, yScaleType: props.yScaleType, secondaryYScaleType: props.secondaryYScaleType, - }) + }) * MARKER_SIZE_SCALE_FACTOR : 0; if (_points[i].data.length === 1) { const { diff --git a/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.tsx b/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.tsx index 41f9dc4ac3561d..bec764ea4368a6 100644 --- a/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.tsx +++ b/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.tsx @@ -54,6 +54,9 @@ import { useImageExport } from '../../utilities/hooks'; type NumericAxis = D3Axis; +// Scale factor to reduce marker sizes (0.6 = 60% of calculated size) +const MARKER_SIZE_SCALE_FACTOR = 0.6; + type ScatterChartDataWithIndex = ScatterChartPoints & { index: number }; // Create a ScatterChart variant which uses these default styles and this styled subcomponent. @@ -421,7 +424,7 @@ export const ScatterChart: React.FunctionComponent = React.fo if (pointMarkerSize) { if (isContinuousXY && maxMarkerSize !== 0) { - circleRadius = (pointMarkerSize * extraMaxPixels) / maxMarkerSize; + circleRadius = (pointMarkerSize * extraMaxPixels * MARKER_SIZE_SCALE_FACTOR) / maxMarkerSize; } else if (!isContinuousXY && maxMarkerSize !== minMarkerSize) { circleRadius = minPixel + ((pointMarkerSize - minMarkerSize) / (maxMarkerSize - minMarkerSize)) * (maxPixel - minPixel); From 567a039aaff6dca0520f8314836102f6af3c9b3c Mon Sep 17 00:00:00 2001 From: Yush Singla Date: Tue, 27 Jan 2026 16:31:30 +0530 Subject: [PATCH 2/2] changelog for marker bug fix --- ...-react-charts-f07461ee-762b-4537-be4e-14c40f6113f8.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charts-f07461ee-762b-4537-be4e-14c40f6113f8.json diff --git a/change/@fluentui-react-charts-f07461ee-762b-4537-be4e-14c40f6113f8.json b/change/@fluentui-react-charts-f07461ee-762b-4537-be4e-14c40f6113f8.json new file mode 100644 index 00000000000000..1b6dcfd1c6c897 --- /dev/null +++ b/change/@fluentui-react-charts-f07461ee-762b-4537-be4e-14c40f6113f8.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Marker size issue in scatter chart and line chart", + "packageName": "@fluentui/react-charts", + "email": "yushsingla@microsoft.com", + "dependentChangeType": "patch" +}