[Fix]: Markers are too big in LineChart and ScatterChart

[singlayush]

Fix marker sizing in LineChart and ScatterChart

Problem

Markers in LineChart and ScatterChart were rendering too large compared to expected behavior (e.g., Plotly). The previous formula (markerSize * extraMaxPixels) / maxMarkerSize would essentially result in scaling markers based on the extraMaxPixels. But we would only want to scale down and not scale up. The scaling down is needed to ensure there is no overflow out of the chart, while scaling up serves no purpose and results in too big markers.

Solution

Updated the marker radius calculation to use conditional logic:

extraMaxPixels > maxMarkerSize 
  ? markerSize 
  : (markerSize * extraMaxPixels) / maxMarkerSize

Logic:

• If extraMaxPixels > maxMarkerSize: Use the actual markerSize directly (enough space available)
• Otherwise: Scale down proportionally to fit within available space

Test Run: https://github.com/microsoft/fluentui-charting-contrib/actions/runs/21618414015

Examples

markerSize	extraMaxPixels	maxMarkerSize	Result
100	10	100	10 (extra < max, scaled down significantly: 100 × 10 / 100)
2	100	2	2 (extra > max, use markerSize directly no scaling needed)
20	25	30	16.67 (extra < max, scaled down slightly: 20 × 25 / 30)

Changes

• LineChart.tsx: Updated all 4 marker radius calculations to use consistent formula
• ScatterChart.tsx: Updated marker radius calculation with same formula
• Z-order fix: Markers now render on top of lines (LineChart)

Screenshots

Before

### Plotly ### After ### Before ### Plotly ### After

Before

### Plotly

Plotly

### After

Before

### Plotly ### After

Testing

• Verified with single data point
• Verified with multiple data points (similar marker sizes)
• Verified with varying marker sizes
• Verified markers appear above lines

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-charts DeclarativeChart	762.108 kB 220.192 kB	762.928 kB 220.39 kB	820 B 198 B
react-charts LineChart	422.844 kB 128.284 kB	423.621 kB 128.472 kB	777 B 188 B
react-charts ScatterChart	402.671 kB 122.473 kB	402.996 kB 122.603 kB	325 B 130 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-charts AreaChart	412.28 kB 126.425 kB
react-charts DonutChart	322.715 kB 96.946 kB
react-charts FunnelChart	314.268 kB 93.991 kB
react-charts GanttChart	395.399 kB 119.927 kB
react-charts GaugeChart	322.146 kB 96.373 kB
react-charts GroupedVerticalBarChart	403.269 kB 122.494 kB
react-charts HeatMapChart	397.47 kB 121.788 kB
react-charts HorizontalBarChart	302.442 kB 89.116 kB
react-charts HorizontalBarChartWithAxis	63 B 83 B
react-charts Legends	242.388 kB 71.585 kB
react-charts PolarChart	351.333 kB 107.364 kB
react-charts SankeyChart	220.381 kB 67.866 kB
react-charts Sparkline	91.393 kB 28.708 kB
react-charts VerticalBarChart	439.74 kB 128.215 kB
react-charts VerticalStackedBarChart	409.183 kB 123.955 kB

_{🤖 This report was generated against d33ac4d486d36f4298889dc7ca11330c7268eb5e}

[github-actions]

Pull request demo site: URL

[AtishayMsft]

[singlayush]

@microsoft-github-policy-service agree [company="Microsoft"]

[singlayush]

@microsoft-github-policy-service agree