[dev-v5] Add Charts package (Donut, Funnel, Horizontal bar and Horizontal bar with Axis)#4691
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds Blazor wrappers, models, and demo documentation/examples for Fluent UI chart web components (DonutChart and HorizontalBarChart), including script-side registration and JSON source-generation helpers.
Changes:
- Introduces new chart components (
FluentDonutChart,FluentHorizontalBarChart) and their data models/serializer contexts. - Registers
@fluentui/chart-web-componentsand defines chart web components in the scripts package. - Adds demo documentation pages and multiple usage examples for both charts.
Reviewed changes
Copilot reviewed 24 out of 25 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj | Minor MSBuild formatting change for temporary .esproj asset fix target. |
| src/Core/Enums/HorizontalBarChartVariant.cs | Adds an enum to control HorizontalBarChart rendering variants. |
| src/Core/Components/Charts/Models/HorizontalBarChartModels.cs | Adds HorizontalBarChart payload models for JSON serialization. |
| src/Core/Components/Charts/Models/HorizontalBarChartDataJsonSerializerContext.cs | Adds source-generated JSON serialization context for HorizontalBarChart models. |
| src/Core/Components/Charts/Models/DonutChartModels.cs | Adds DonutChart payload models for JSON serialization. |
| src/Core/Components/Charts/Models/DonutChartDataJsonSerializerContext.cs | Adds source-generated JSON serialization context for DonutChart models. |
| src/Core/Components/Charts/FluentHorizontalBarChart.razor.cs | Adds Blazor wrapper logic/parameters for HorizontalBarChart. |
| src/Core/Components/Charts/FluentHorizontalBarChart.razor | Adds the Razor markup to render the horizontal bar chart web component. |
| src/Core/Components/Charts/FluentDonutChart.razor.cs | Adds Blazor wrapper logic/parameters for DonutChart. |
| src/Core/Components/Charts/FluentDonutChart.razor | Adds the Razor markup to render the donut chart web component. |
| src/Core/Components/Charts/ChartJson.cs | Adds shared JSON serialization helper methods for chart payloads. |
| src/Core.Scripts/src/FluentUIWebComponents.ts | Registers chart web components in the custom element registry. |
| src/Core.Scripts/package.json | Adds @fluentui/chart-web-components dependency. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Pages/FluentHorizontalBarChartPage.md | Adds docs page for HorizontalBarChart with examples and API sections. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Pages/FluentDonutChartPage.md | Adds docs page for DonutChart with examples and API sections. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/FluentUIChartsPage.md | Adds a Charts landing page listing available chart types. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartSingleDataPoint.razor | Adds demo example for single data point HorizontalBarChart. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartSingleBarNMVariant.razor | Adds demo example for SingleBar “n/M” style scenario. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartSingleBar.razor | Adds demo example for AbsoluteScale SingleBar HorizontalBarChart. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartDefaultRTL.razor | Adds RTL HorizontalBarChart demo example. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartDefault.razor | Adds default HorizontalBarChart demo example. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartBenchmark.razor | Adds benchmark HorizontalBarChart demo example. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/DonutChartDefaultRTL.razor | Adds RTL DonutChart demo example. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/DonutChartDefault.razor | Adds default DonutChart demo example. |
Files not reviewed (1)
- src/Core.Scripts/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…kage so there isno chart related code in the core scripts anymore.
…b-component package but finished source is copied here. This because we cannot publisch/update the npm package
…os and docs pages
- Organize examples
- Ignore playwright screenshots and chart-comments files
5 tasks
- Fix HBCWA color handling - Fix HBCWA Blazor example
- Update docs
vnbaaij
changed the title
vnbaaij
changed the title
Collaborator
Author
There were some issues with the |
Collaborator
|
Great work @vnbaaij ! Looks very promising! I only got one question regarding the examples. Why are you doing |
Collaborator
Author
|
I'm converting the charts to be block level elements (they were inline-block). Samples will be updated too. |
- Add DataVizPalette enum for colors used in charts (needs to be implemented for the other chart types still
- Add arrow key navigation to legend
- Introduced `selected` observable for persistent legend selection. - Updated legend styles for improved visibility with adjusted opacity. - Enhanced event handling for legend focus to differentiate between mouse and keyboard interactions. - Adjusted chart layout and styles for better user experience.
vnbaaij
changed the title
- Add GanttChart TS code (no Blazor mapping yet) - Refactored ChartBase TS to have a CartesianChartBase (not processed in Blazor yet)
Introduce a new Gantt chart with support for both numeric and date/time x-axes, using flexible `ChartAxisValue` serialization. Add `GanttChartDataPoint` and `GanttChartXRange` models, and source-generated JSON contexts. Replace `HorizontalBarChartWithAxisCategoryOrder` with unified `ChartCategoryOrder` for y-axis sorting. Enhance Blazor and web components with explicit tick values, tick formatting, stroke width, x-axis label tooltips, and date localization options. Refactor axis ordering and tick logic across charts. Add extensive documentation and new demo examples for all features. Update project guidelines and API docs accordingly. Add more parameters (+ examples) FluentCartesianhartBase Sync files with web component work done in chart web components project
- Add d3-time-format package - Use D3 time format
…ents can render custom tooltips
dvoituron
requested changes
May 25, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR adds the Charts package. The charts are built as web components which integrate tightly with the Design System and the other Fluent UI Web Components. The basis is formed by the
fluent-donut-chartand andfluent-horizontal-bar-chartcomponents that were created by the Fluent UI team about a year ago. These 2 components have been altered and extended by us to make them work perfectly with ourFluentDonutChartandFluentHorizontalBarChartwrapper components. For now we've extendd the set with thefluent-horizontal-bar-chart-with-axisweb component and it's correspondingFluentHorizontalBarChartWithAxisBlazor wrapper.In the future we intend to add more web components and wrappers based on the Fluent UI React charts v9 set.
The Fluent UI Blazor Charts NuGet package needs to be installed separately from the Core components package. All charts are in the
Microsoft.FluentUI.AspNetCore.Components.Chartsnamespace. Configuration, referencing scripts, etc, is all done automatically. The core library will detect the charts being there.DonutChart
HorizontalBarChart
HorizontalBarChartWithAxis
FunnelChart
There are no separate unit tests for the charts. All tests and storybook stories are part of the charts web component project (source will be made available)