feat(react-charts): vega lite schema support #35546

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

Previous Behavior

New Behavior

Related Issue(s)

Fixes #

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

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-charts` DeclarativeChart	`756.617 kB` `217.631 kB`	`756.621 kB` `217.634 kB`	`4 B` `3 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-charts` AreaChart	`406.783 kB` `124.495 kB`
`react-charts` DonutChart	`317.224 kB` `94.361 kB`
`react-charts` FunnelChart	`308.774 kB` `91.361 kB`
`react-charts` GanttChart	`389.926 kB` `118.05 kB`
`react-charts` GaugeChart	`316.655 kB` `93.799 kB`
`react-charts` GroupedVerticalBarChart	`397.772 kB` `120.667 kB`
`react-charts` HeatMapChart	`391.973 kB` `119.859 kB`
`react-charts` HorizontalBarChart	`296.951 kB` `86.138 kB`
`react-charts` HorizontalBarChartWithAxis	`63 B` `83 B`
`react-charts` Legends	`235.905 kB` `69.363 kB`
`react-charts` LineChart	`417.347 kB` `126.389 kB`
`react-charts` PolarChart	`345.84 kB` `105.418 kB`
`react-charts` SankeyChart	`213.881 kB` `65.62 kB`
`react-charts` ScatterChart	`397.174 kB` `120.59 kB`
`react-charts` Sparkline	`91.393 kB` `28.708 kB`
`react-charts` VerticalBarChart	`434.249 kB` `126.27 kB`
`react-charts` VerticalStackedBarChart	`403.686 kB` `121.535 kB`

_{🤖 This report was generated against f17bb7ecaae51c2c01401a7d37e09a7fde13a373}

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.default.chromium_1.png 676 Changed

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

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

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

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

Image Name Diff(in Pixels) Image Type

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

vr-tests-react-components/Positioning 2 screenshots

Image Name Diff(in Pixels) Image Type

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

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

vr-tests-react-components/TagPicker 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png 658 Changed

vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png 635 Changed

There were 3 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 <[email protected]>

…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

Cleanup

5f01e0f

AtishayMsft marked this pull request as draft February 9, 2026 03:16

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png	676	Changed
vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png	2200	Changed
vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png	2279	Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium.png	675	Changed

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

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png	658	Changed
vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png	635	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",

feat(react-charts): vega lite schema support #35546

Are you sure you want to change the base?

feat(react-charts): vega lite schema support #35546

Uh oh!

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