feat(react-charts): vega lite schema support by AtishayMsft · Pull Request #35546 · microsoft/fluentui

AtishayMsft · 2025-12-06T10:01:08Z

Previous Behavior

New Behavior

Related Issue(s)

Fixes #

github-actions · 2025-12-06T10:04:48Z

📊 Bundle size report

✅ No changes found

github-actions · 2025-12-06T10:07:52Z

Pull request demo site: URL

github-actions · 2025-12-06T10:21:24Z

packages/charts/react-charts/VEGA_SCHEMA_INTEGRATION.md

@@ -0,0 +1,247 @@
+# Vega-Lite Schema Integration Summary


🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/CalendarCompat 4 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png 675 Changed

vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png 551 Changed

vr-tests-react-components/CalendarCompat.multiDayView - RTL.default.chromium.png 390 Changed

vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png 478 Changed

vr-tests-react-components/Charts-DonutChart 1 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png 5570 Changed

vr-tests-react-components/Positioning 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Positioning.Positioning end.chromium.png 722 Changed

vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 29 Changed

There were 1 duplicate changes discarded. Check the build logs for more information.

- Use resetIdsForTests() from @fluentui/react-utilities (same as Plotly tests) - Update snapshots with deterministic IDs - Update schema count test from >100 to 25 (after schema reduction) - All VegaDeclarativeChart tests now pass Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

…ayMsft/fluentui into usr/atisjai/vegaLiteFluent

…eFluent

krkshitij · 2026-02-03T04:20:22Z

packages/charts/react-charts/VEGA_SCHEMA_INTEGRATION.md

Are these change summary reports needed?

krkshitij · 2026-02-03T04:33:42Z

packages/charts/react-charts/library/src/components/DeclarativeChart/VegaLiteColorAdapter.ts

+/**
+ * Helper to compare two arrays for equality
+ */
+function arraysEqual(a: string[], b: string[]): boolean {


This function can be imported from the utilities:

fluentui/packages/charts/react-charts/library/src/utilities/utilities.ts

Lines 1978 to 1991 in 72fa991

export function areArraysEqual(arr1?: string[], arr2?: string[]): boolean {

if (arr1 === arr2 || (!arr1 && !arr2)) {

return true;

}

if (!arr1 || !arr2 || arr1.length !== arr2.length) {

return false;

}

for (let i = 0; i < arr1.length; i++) {

if (arr1[i] !== arr2[i]) {

return false;

}

}

return true;

}

krkshitij · 2026-02-03T04:56:52Z

packages/charts/react-charts/library/src/components/DeclarativeChart/VegaLiteSchemaAdapter.ts

Would it be better to keep these adapters inside the VegaDeclarativeChart folder?

krkshitij · 2026-02-03T07:29:05Z

...charts/react-charts/stories/src/VegaDeclarativeChart/VegaDeclarativeChartDefault.stories.tsx

+// Inline schemas (25 total covering various chart types)
+// These are the default schemas shown in "show few" mode
+const ALL_SCHEMAS: Record<string, any> = {
+  adCtrScatter: {


These schemas can be stringified to reduce LOC.

krkshitij · 2026-02-03T07:32:51Z

...charts/react-charts/stories/src/VegaDeclarativeChart/VegaDeclarativeChartDefault.stories.tsx

+// These are the default schemas shown in "show few" mode
+const ALL_SCHEMAS: Record<string, any> = {
+  adCtrScatter: {
+    $schema: 'https://vega.github.io/schema/vega-lite/v5.json',


Would it be helpful to include the recommended Vega schema version in the JSDoc comments and the example docs?

krkshitij · 2026-02-03T07:39:54Z

...charts/react-charts/stories/src/VegaDeclarativeChart/VegaDeclarativeChartDefault.stories.tsx

+ALL_OPTIONS.sort((a, b) => {
+  if (a.category !== b.category) {
+    // Priority order for categories
+    const categoryOrder = [


Can be extracted for reuse

krkshitij · 2026-02-03T07:41:52Z

...charts/react-charts/stories/src/VegaDeclarativeChart/VegaDeclarativeChartDefault.stories.tsx

+      name.includes('expense') ||
+      name.includes('roi') ||
+      name.includes('financial') ||
+      name.includes('dividend')


Can be simplified to:

['stock', 'portfolio', 'profit', 'revenue', 'cashflow', 'budget', 'expense', 'roi', 'financial', 'dividend'].some(keyword => name.includes(keyword))

krkshitij · 2026-02-03T07:48:11Z

...rts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.ScatterHeatmap.test.tsx

Would it be better to combine these 3 test files into 1 since they all contain component tests?

krkshitij · 2026-02-03T07:53:04Z

...ges/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.tsx

+/**
+ * Hook to determine if dark theme is active
+ */
+function useIsDarkTheme(): boolean {


useIsDarkTheme and useColorMapping hooks can be extracted for reuse.

krkshitij · 2026-02-03T11:06:45Z

...ges/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.tsx

+    | 'donut'
+    | 'heatmap'
+    | 'histogram'
+    | 'polar';


Can’t we use the same mapping as DeclarativeChart?

krkshitij · 2026-02-03T11:42:21Z

...ges/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.tsx

+  const chartProps = transformer(spec, colorMap, isDarkTheme) as any;
+
+  // Special handling for charts with different prop patterns
+  if (chartType.type === 'donut') {


These conditions may not be needed since legendProps and componentRef are available on all charts.

krkshitij · 2026-02-03T12:03:34Z

packages/charts/react-charts/library/src/components/DeclarativeChart/VegaLiteSchemaAdapter.ts

+ * @param encoding - Vega-Lite encoding with polar axis settings
+ * @returns Object with projected x, y arrays and metadata
+ */
+function projectPolarToCartesian(


projectPolarToCartesian, transformVegaLiteToPolarLineChartProps and transformVegaLiteToPolarScatterChartProps functions can be removed.

AtishayMsft · 2026-02-07T17:06:31Z

...rts/library/docs/examples/declarative/vegalite/validation-tests/test-bar-no-categorical.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",


Are these json files being used. Remove if not.

AtishayMsft · 2026-02-07T17:07:02Z

...s/react-charts/library/docs/examples/declarative/vegalite/color-schemes/category10-line.json

+  "description": "Multi-series line chart with category10 color scheme",
+  "mark": "line",
+  "data": {
+    "values": [


Are these json files being used. Remove if not

AtishayMsft · 2026-02-07T17:08:21Z

packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx

+  /**
+   * Selected legends (used for multi-select legend interaction)
+   */
+  selectedLegends?: string[];


revert this change. Looks to be a merge conflict

atisjai added 3 commits November 26, 2025 20:57

Limit d3 color to the utility needed

a09edc1

Add support for vega lite for fluent charts

575ee59

Improvements and bug fixes

567feea

github-actions bot reviewed Dec 6, 2025

View reviewed changes

atisjai added 8 commits December 6, 2025 17:14

Fix formatting

2d7a086

Fix formatting

1c61cdf

Fix lint errors

3386c5c

Fix lint errors

d095f0a

Fix tests

ed21fa2

Merge branch 'master' into usr/atisjai/vegaLiteFluent

cdd710e

Fix formatting

eb9b320

Merge branch 'master' into usr/atisjai/vegaLiteFluent

c8e285f

microsoft-github-policy-service bot added the PR: API Modified label Jan 7, 2026

atisjai and others added 15 commits January 7, 2026 07:41

Fix color fix bars issue

6bae230

Fix test lint

e3dd838

Fix issue

1b91e49

Fix issues

3fb4e69

Fix tests

9eb6319

Fix bugs

24eacdf

Merge branch 'master' into usr/atisjai/vegaLiteFluent

e03162f

Fix formatting issues

1dbdd1c

Update snapshots

db2e585

Merge branch 'master' into usr/atisjai/vegaLiteFluent

23cce90

Update snapshots

d6050b0

Update snapshots

2501a04

Fix type check errors

c64fecf

Fix formatting errors

9f82062

atisjai and others added 17 commits January 18, 2026 16:25

Merge branch 'usr/atisjai/vegaLiteFluent' of https://github.com/Atish…

63a96f3

…ayMsft/fluentui into usr/atisjai/vegaLiteFluent

Fix tests

fa663c2

Fix issues

00e2779

Fix type check issues

acc0033

Fix lint errors

8a61a3f

Update storybook to load contrib repo schemas

595efe6

Fix issue

e5ff246

Fix issues

4c72c6f

Fix issues

c2abb79

Fix formatting

37c3428

Fix test snapshots

fabbd23

Merge remote-tracking branch 'origin/master' into usr/atisjai/vegaLit…

05c97a8

…eFluent

Fix test snapshots

59271f0

Update snapshots and restricted TZ to UTC

e644a44

Fix imports

4df7f14

Add change file

d9ffe65

AtishayMsft marked this pull request as ready for review January 30, 2026 08:30

AtishayMsft requested review from a team as code owners January 30, 2026 08:30

Remove unnecessary files

89d2070

krkshitij reviewed Feb 3, 2026

View reviewed changes

krkshitij approved these changes Feb 3, 2026

View reviewed changes

AtishayMsft commented Feb 7, 2026

View reviewed changes

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png	675	Changed
vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png	551	Changed
vr-tests-react-components/CalendarCompat.multiDayView - RTL.default.chromium.png	390	Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png	478	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png	722	Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	29	Changed

	export function areArraysEqual(arr1?: string[], arr2?: string[]): boolean {
	if (arr1 === arr2 \|\| (!arr1 && !arr2)) {
	return true;
	}
	if (!arr1 \|\| !arr2 \|\| arr1.length !== arr2.length) {
	return false;
	}
	for (let i = 0; i < arr1.length; i++) {
	if (arr1[i] !== arr2[i]) {
	return false;
	}
	}
	return true;
	}

		@@ -0,0 +1,27 @@
		{
		"$schema": "https://vega.github.io/schema/vega-lite/v5.json",

Conversation

AtishayMsft commented Dec 6, 2025

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

github-actions bot commented Dec 6, 2025

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

🕵🏾‍♀️ visual changes to review in the Visual Change Report

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!

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!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Dec 6, 2025 •

edited

Loading

github-actions bot Dec 6, 2025 •

edited

Loading