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" +} 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);