feat(react-charting): Support marker shapes for scatter chart #34656

srmukher · 2025-06-16T15:14:30Z

In Fluent chart:

In Plotly:

github-actions · 2025-06-16T15:16:59Z

📊 Bundle size report

✅ No changes found

packages/charts/react-charting/src/utilities/utilities.ts

packages/charts/react-charting/src/components/ScatterChart/ScatterChart.base.tsx

change/@fluentui-react-charting-27a887a9-dd1e-400c-b696-da3e3c231c33.json

...ages/charts/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap

packages/charts/react-charting/src/components/ScatterChart/ScatterChart.base.tsx

packages/charts/react-charting/src/utilities/utilities.ts

packages/charts/react-charting/src/components/Legends/shape.tsx

AtishayMsft · 2025-06-17T11:59:32Z

packages/charts/react-charting/src/components/Legends/shape.tsx

-      height={14}
-      viewBox={'-1 -1 14 14'}
-      {...getSecureProps(svgProps)}
-      transform={`rotate(${shape === Points[Points.diamond] ? 45 : shape === Points[Points.pyramid] ? 180 : 0}, 0, 0)`}


rotate(${shape === Points[Points.diamond] ? 45 : shape === Points[Points.pyramid] ? 180 : 0}, 0, 0)

this is not needed anymore?

no, since we have the exact shapes this transform was changing the legend shape

AtishayMsft · 2025-06-17T11:59:59Z

packages/charts/react-charting/src/components/Legends/shape.tsx

+    return '-1 -1 14 14';
+  }
+  // For plotly-based shapes, use centered viewBox
+  return '-7 -7 14 14';


'-7 -7 14 14';

why are you changing viewBox for existing shapes

because the plotly shape paths are centrally aligned and thus the view box had to be changed. otherwise the legend container was showing incomplete shapes.

Is the margin and alignment for both old shapres and new shapes same. Other than dottedLine and pyramid, all are plotly provided shapes? What happened to the existing 8 shapes

yes I have updated all others as they were existing in plotly shapes.

packages/charts/react-charting/src/utilities/utilities.ts

packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.json

packages/charts/react-charting/src/types/IDataPoint.ts

AtishayMsft · 2025-06-17T14:12:38Z

Legend shapes have a special behavior of showing only the border on deselection and filling the entire shape on selection. Do your new shapes have this functionality.

srmukher · 2025-06-17T14:14:56Z

Legend shapes have a special behavior of showing only the border on deselection and filling the entire shape on selection. Do your new shapes have this functionality.

yes

AtishayMsft · 2025-06-18T09:43:42Z

what is the size bump for this PR

srmukher · 2025-06-18T09:47:33Z

what is the size bump for this PR

< 1 kB

github-actions · 2025-06-18T10:30:37Z

Pull request demo site: URL

AtishayMsft · 2025-06-19T13:40:10Z

packages/charts/react-charting/etc/react-charting.api.md

@@ -950,7 +959,7 @@ export interface ILegend {
    nativeButtonProps?: React_2.ButtonHTMLAttributes<HTMLButtonElement>;
    onMouseOutAction?: (isLegendFocused?: boolean) => void;
    opacity?: number;
-    shape?: LegendShape;
+    shape?: DataPointShape;


DataPointShape

we cannot change existing interface. It needs to be backward compatible. It can be LegendShape | DataPointShape

AtishayMsft · 2025-06-19T13:41:38Z

packages/charts/react-charting/src/utilities/shape-utilities.ts

+    '2.26l-2.26,2.26l2.26,2.26Z',
+  // Additional shapes
+  star: 'M1.26,-1.73H5.33L2.03,0.66L3.29,4.53L0,2.14L-3.29,4.53L-2.03,0.66L-5.33,-1.73H-1.26L0,-5.6Z',
+  hexagram:


are all shapes now starting from viewpoint 0,0 to 14,14

no its '-7 -7 14 14'; means the SVG's coordinate system goes from -7 to +7 on both axes, with (0,0) at the center. The previous shapes were not centrally aligned thats why on hover, the line indicating the position was also distorted, starting from left. Now all shapes are centrally aligned.

Shapes Before:

Shapes now:

…ers/srmukher/scatter_marker_shapes

AtishayMsft · 2025-06-20T12:01:45Z

packages/charts/react-charting/etc/react-charting.api.md

-// Warning: (ae-forgotten-export) The symbol "CustomPoints" needs to be exported by the entry point index.d.ts
-//
-// @public
-export type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints;


LegendShape

where did the type definition of LegendShape go

The type definition was still there in legends.types but the export was overriden in index.ts. Fixed.

AtishayMsft · 2025-06-20T12:02:12Z

packages/charts/react-charting/src/index.ts

@@ -15,9 +15,9 @@ export type {
  ILegendsProps,
  ILegendsStyles,
  IShapeProps,
-  LegendShape,


why stopped exporting LegendShape

It was overriden, fixed.

AtishayMsft · 2025-06-21T01:23:11Z

packages/react-examples/src/react-charting/ScatterChart/ScatterChart.Shapes.Example.tsx

+  height: number;
+}
+
+export class ScatterChartShapesExample extends React.Component<{}, IScatterChartShapesState> {


Could you add few new shapes to the existing Legends shape example. Want to see how old and new shapes come side by side

AtishayMsft · 2025-06-21T01:24:28Z

packages/charts/react-charting/src/components/Legends/Legends.base.tsx

-        shape={legend.shape as LegendShape}
+        shape={
+          String(legend.shape)?.includes('open')
+            ? (String(legend.shape).replace('open', '') as DataPointShape)


This open tolowercase logic should be internal to shape. Not part of legends class.

AtishayMsft · 2025-06-21T09:47:29Z

There are failures in the playwright report https://github.com/microsoft/fluentui-charting-contrib/actions/runs/15779003024

srmukher added 2 commits June 16, 2025 15:11

feat(react-charting): Support marker shapes for scatter chart

843b776

Adding change file

0ec3f4a

srmukher requested a review from a team as a code owner June 16, 2025 15:14

srmukher changed the title ~~Users/srmukher/scatter marker shapes~~ feat(react-charting): Support marker shapes for scatter chart Jun 16, 2025

AtishayMsft reviewed Jun 16, 2025

View reviewed changes

packages/charts/react-charting/src/utilities/utilities.ts Outdated Show resolved Hide resolved

AtishayMsft reviewed Jun 16, 2025

View reviewed changes

packages/charts/react-charting/src/components/ScatterChart/ScatterChart.base.tsx Outdated Show resolved Hide resolved

github-actions bot reviewed Jun 16, 2025

View reviewed changes

change/@fluentui-react-charting-27a887a9-dd1e-400c-b696-da3e3c231c33.json Show resolved Hide resolved

AtishayMsft reviewed Jun 17, 2025

View reviewed changes

...ages/charts/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap Outdated Show resolved Hide resolved

krkshitij reviewed Jun 17, 2025

View reviewed changes

packages/charts/react-charting/src/components/ScatterChart/ScatterChart.base.tsx Outdated Show resolved Hide resolved

srmukher added 3 commits June 17, 2025 10:25

Make shapes symmetric

4bffcec

Refactoring code

dbbc124

Updating checks

5b8bd74

AtishayMsft reviewed Jun 17, 2025

View reviewed changes

packages/charts/react-charting/src/utilities/utilities.ts Outdated Show resolved Hide resolved

AtishayMsft reviewed Jun 17, 2025

View reviewed changes

packages/charts/react-charting/src/components/Legends/shape.tsx Outdated Show resolved Hide resolved

AtishayMsft reviewed Jun 17, 2025

View reviewed changes

packages/charts/react-charting/src/utilities/utilities.ts Outdated Show resolved Hide resolved

AtishayMsft reviewed Jun 17, 2025

View reviewed changes

packages/charts/react-charting/src/utilities/utilities.ts Outdated Show resolved Hide resolved

AtishayMsft reviewed Jun 17, 2025

View reviewed changes

packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.json Outdated Show resolved Hide resolved

AtishayMsft reviewed Jun 17, 2025

View reviewed changes

packages/charts/react-charting/src/types/IDataPoint.ts Outdated Show resolved Hide resolved

Resolving PR comments

81a8169

srmukher force-pushed the users/srmukher/scatter_marker_shapes branch from af6119e to 81a8169 Compare June 17, 2025 14:13

Resolving build error

55d24dc

srmukher force-pushed the users/srmukher/scatter_marker_shapes branch from c588762 to 55d24dc Compare June 18, 2025 08:39

Updating test example

134e4fd

Updating types

6016492

srmukher force-pushed the users/srmukher/scatter_marker_shapes branch from 3760311 to 6016492 Compare June 18, 2025 09:45

AtishayMsft reviewed Jun 19, 2025

View reviewed changes

srmukher added 2 commits June 19, 2025 22:24

Resolving PR comments

bca2c4f

Merge branch 'master' of https://github.com/srmukher/fluentui into us…

b717b0b

…ers/srmukher/scatter_marker_shapes

AtishayMsft reviewed Jun 20, 2025

View reviewed changes

Add missing exports

eea8421

AtishayMsft reviewed Jun 21, 2025

View reviewed changes

feat(react-charting): Support marker shapes for scatter chart #34656

Are you sure you want to change the base?

feat(react-charting): Support marker shapes for scatter chart #34656

Conversation

srmukher commented Jun 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jun 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

AtishayMsft commented Jun 17, 2025

Uh oh!

srmukher commented Jun 17, 2025

Uh oh!

AtishayMsft commented Jun 18, 2025

Uh oh!

srmukher commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jun 18, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

srmukher Jun 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AtishayMsft commented Jun 21, 2025

Uh oh!

Uh oh!

srmukher commented Jun 16, 2025 •

edited

Loading

github-actions bot commented Jun 16, 2025 •

edited

Loading

srmukher commented Jun 18, 2025 •

edited

Loading

srmukher Jun 19, 2025 •

edited

Loading