Skip to content

[dev-v5][Charts] Add DonutChart and HorizontalBarChart #4691

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
vnbaaij wants to merge 10 commits into
base: dev-v5
Choose a base branch
from
Draft

[dev-v5][Charts] Add DonutChart and HorizontalBarChart #4691

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0f3f1fb
Add DonutChart and HorizontalBarChart Web Component wrappers, docs an…
vnbaaij Apr 13, 2026
ac10e6a
Merge branch 'dev-v5' into charts
vnbaaij Apr 13, 2026
7d5edce
Process review comments
vnbaaij Apr 14, 2026
8cf21ba
More review comments processed
vnbaaij Apr 14, 2026
4aadb4c
Merge branch 'dev-v5' into charts
vnbaaij Apr 14, 2026
d4cb02c
Introduce separate Charts package. This uses a new Charts.Scripts pac…
vnbaaij Apr 16, 2026
5ae31d5
Add project reference to esproj, remove wrong using statement
vnbaaij Apr 16, 2026
4d1e401
Use .editorconfig instead of surpression file
vnbaaij Apr 16, 2026
e83fba7
Internalize the chart code. Devlopement is STILL done in the chart-we…
vnbaaij Apr 19, 2026
2f5bc1e
Improve and finalize(?) donut chart, improve bar charts. Add more dem…
vnbaaij Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions ...emo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/DonutChartDefault.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
@using Microsoft.FluentUI.AspNetCore.Components.Charts

<FluentDonutChart ChartData="data"
ValueInsideDonut="39000"
InnerRadius="45" />


@code {
DonutChartData data = new DonutChartData
{
ChartTitle = "Donut chart basic example",
ChartData = new List<DonutChartDataPoint>
{
new DonutChartDataPoint { Legend = "first", Data = 20000 },
new DonutChartDataPoint { Legend = "second", Data = 39000 }
}
};
}
19 changes: 19 additions & 0 deletions .../FluentUI.Demo.Client/Documentation/Components/Charts/Examples/DonutChartDefaultRTL.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
@using Microsoft.FluentUI.AspNetCore.Components.Charts

<div dir="rtl">
<FluentDonutChart ChartData="data"
ValueInsideDonut="20000"
InnerRadius="45" />
</div>

@code {
DonutChartData data = new DonutChartData
{
ChartTitle = "Donut chart basic example",
ChartData = new List<DonutChartDataPoint>
{
new DonutChartDataPoint { Legend = "first", Data = 20000 },
new DonutChartDataPoint { Legend = "second", Data = 39000 }
}
};
}
40 changes: 40 additions & 0 deletions ...UI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartBenchmark.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
@using Microsoft.FluentUI.AspNetCore.Components.Charts
@using Microsoft.FluentUI.AspNetCore.Components.Enums

<FluentHorizontalBarChart Style="width: 100%;"
Variant="@HorizontalBarChartVariant.SingleBar"
ChartData="@ChartData">
</FluentHorizontalBarChart>

@code {
IReadOnlyList<HorizontalBarChartSeries> ChartData = new List<HorizontalBarChartSeries>
{
new HorizontalBarChartSeries
{
ChartSeriesTitle = "one",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "one", Data = 10, Total = 100, Color = "#637cef" }
},
BenchmarkData = 50
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "two",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "two", Data = 30, Total = 200, Color = "#e3008c" }
},
BenchmarkData = 30
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "three",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "three", Data = 15, Total = 50, Color = "#2aa0a4" }
},
BenchmarkData = 5
}
};
}
44 changes: 44 additions & 0 deletions ...ntUI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartDefault.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
@using Microsoft.FluentUI.AspNetCore.Components.Charts

<FluentHorizontalBarChart style="width: 100%"
ChartData="@ChartData">
</FluentHorizontalBarChart>

@code {
private IReadOnlyList<HorizontalBarChartSeries> ChartData =
[
new HorizontalBarChartSeries
{
ChartSeriesTitle = "Monitored First",
ChartData =
[
new HorizontalBarChartDataPoint { Legend = "Debit card numbers (EU and USA)", Data = 40, Color = "#0099BC" },
new HorizontalBarChartDataPoint { Legend = "Passport numbers (USA)", Data = 23, Color = "#77004D" },
new HorizontalBarChartDataPoint { Legend = "Social security numbers", Data = 35, Color = "#4F68ED" },
new HorizontalBarChartDataPoint { Legend = "Credit card Numbers", Data = 87, Color = "#AE8C00" },
new HorizontalBarChartDataPoint { Legend = "Tax identification numbers (USA)", Data = 87, Color = "#004E8C" }
]
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "Monitored Second",
ChartData =
[
new HorizontalBarChartDataPoint { Legend = "Debit card numbers (EU and USA)", Data = 40, Color = "#0099BC" },
new HorizontalBarChartDataPoint { Legend = "Passport numbers (USA)", Data = 56, Color = "#77004D" },
new HorizontalBarChartDataPoint { Legend = "Social security numbers", Data = 35, Color = "#4F68ED" },
new HorizontalBarChartDataPoint { Legend = "Credit card Numbers", Data = 92, Color = "#AE8C00" },
new HorizontalBarChartDataPoint { Legend = "Tax identification numbers (USA)", Data = 87, Color = "#004E8C" }
]
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "Unmonitored",
ChartData =
[
new HorizontalBarChartDataPoint { Legend = "Phone Numbers", Data = 40, Color = "#881798" },
new HorizontalBarChartDataPoint { Legend = "Credit card Numbers", Data = 23, Color = "#AE8C00" }
]
}
];
}
46 changes: 46 additions & 0 deletions ...I.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartDefaultRTL.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
@using Microsoft.FluentUI.AspNetCore.Components.Charts

<div dir="rtl">
<FluentHorizontalBarChart style="width: 100%"
ChartData="@ChartData">
</FluentHorizontalBarChart>
</div>

@code {
private IReadOnlyList<HorizontalBarChartSeries> ChartData =
[
new HorizontalBarChartSeries
{
ChartSeriesTitle = "Monitored First",
ChartData =
[
new HorizontalBarChartDataPoint { Legend = "Debit card numbers (EU and USA)", Data = 40, Color = "#0099BC" },
new HorizontalBarChartDataPoint { Legend = "Passport numbers (USA)", Data = 23, Color = "#77004D" },
new HorizontalBarChartDataPoint { Legend = "Social security numbers", Data = 35, Color = "#4F68ED" },
new HorizontalBarChartDataPoint { Legend = "Credit card Numbers", Data = 87, Color = "#AE8C00" },
new HorizontalBarChartDataPoint { Legend = "Tax identification numbers (USA)", Data = 87, Color = "#004E8C" }
]
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "Monitored Second",
ChartData =
[
new HorizontalBarChartDataPoint { Legend = "Debit card numbers (EU and USA)", Data = 40, Color = "#0099BC" },
new HorizontalBarChartDataPoint { Legend = "Passport numbers (USA)", Data = 56, Color = "#77004D" },
new HorizontalBarChartDataPoint { Legend = "Social security numbers", Data = 35, Color = "#4F68ED" },
new HorizontalBarChartDataPoint { Legend = "Credit card Numbers", Data = 92, Color = "#AE8C00" },
new HorizontalBarChartDataPoint { Legend = "Tax identification numbers (USA)", Data = 87, Color = "#004E8C" }
]
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "Unmonitored",
ChartData =
[
new HorizontalBarChartDataPoint { Legend = "Phone Numbers", Data = 40, Color = "#881798" },
new HorizontalBarChartDataPoint { Legend = "Credit card Numbers", Data = 23, Color = "#AE8C00" }
]
}
];
}
78 changes: 78 additions & 0 deletions ...UI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartSingleBar.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
@using Microsoft.FluentUI.AspNetCore.Components.Charts
@using Microsoft.FluentUI.AspNetCore.Components.Enums

<div>
<FluentHorizontalBarChart Style="width: 100%;"
ChartData="@ChartData"
Variant="@HorizontalBarChartVariant.AbsoluteScale" />
</div>

@code {
IReadOnlyList<HorizontalBarChartSeries> ChartData = new List<HorizontalBarChartSeries>
{
new HorizontalBarChartSeries
{
ChartSeriesTitle = "one",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "one", Data = 1543, Total = 15000, Color = "#637cef" }
}
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "two",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "two", Data = 800, Total = 15000, Color = "#e3008c" }
}
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "three",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "three", Data = 8888, Total = 15000, Color = "#2aa0a4" }
}
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "four",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "four", Data = 15888, Total = 15000, Color = "#9373c0" }
}
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "five",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "five", Data = 11444, Total = 15000, Color = "#13a10e" }
}
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "six",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "six", Data = 14000, Total = 15000, Color = "#3a96dd" }
}
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "seven",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "seven", Data = 9855, Total = 15000, Color = "#ca5010" }
}
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "eight",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "eight", Data = 4250, Total = 15000, Color = "#57811b" }
}
}
};
}
78 changes: 78 additions & 0 deletions ...lient/Documentation/Components/Charts/Examples/HorizontalBarChartSingleBarNMVariant.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
@using Microsoft.FluentUI.AspNetCore.Components.Charts
@using Microsoft.FluentUI.AspNetCore.Components.Enums

<div>
<FluentHorizontalBarChart Style="width: 100%;"
ChartData="@ChartData"
Variant="@HorizontalBarChartVariant.SingleBar" />
</div>

@code {
IReadOnlyList<HorizontalBarChartSeries> ChartData = new List<HorizontalBarChartSeries>
{
new HorizontalBarChartSeries
{
ChartSeriesTitle = "one",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "one", Data = 1543, Total = 15000, Color = "#637cef" }
}
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "two",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "two", Data = 800, Total = 15000, Color = "#e3008c" }
}
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "three",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "three", Data = 8888, Total = 15000, Color = "#2aa0a4" }
}
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "four",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "four", Data = 15888, Total = 15000, Color = "#9373c0" }
}
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "five",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "five", Data = 11444, Total = 15000, Color = "#13a10e" }
}
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "six",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "six", Data = 14000, Total = 15000, Color = "#3a96dd" }
}
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "seven",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "seven", Data = 9855, Total = 15000, Color = "#ca5010" }
}
},
new HorizontalBarChartSeries
{
ChartSeriesTitle = "eight",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "eight", Data = 4250, Total = 15000, Color = "#57811b" }
}
}
};
}
21 changes: 21 additions & 0 deletions ...o.Client/Documentation/Components/Charts/Examples/HorizontalBarChartSingleDataPoint.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
@using Microsoft.FluentUI.AspNetCore.Components.Charts
@using Microsoft.FluentUI.AspNetCore.Components.Enums

<FluentHorizontalBarChart Style="width: 100%"
Variant="HorizontalBarChartVariant.SingleBar"
ChartData="@ChartData">
</FluentHorizontalBarChart>

@code {
IReadOnlyList<HorizontalBarChartSeries> ChartData = new List<HorizontalBarChartSeries>
{
new HorizontalBarChartSeries
{
ChartSeriesTitle = "one",
ChartData = new List<HorizontalBarChartDataPoint>
{
new HorizontalBarChartDataPoint { Legend = "one", Data = 1543, Total = 15000, Color = "#637cef", Gradient = new[] { "#637cef", "#e3008c" } }
}
}
};
}
18 changes: 18 additions & 0 deletions ...Demo/FluentUI.Demo.Client/Documentation/Components/Charts/FluentUIChartsPage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
title: Charts
route: /Charts/[Default]
icon: ChartMultiple
---

# Charts

The Fluent UI Charts are a set of components that allow you to easily create charts in your Blazor applications.

Currently, the following chart types are available:

- Donut Chart
- Horizontal Bar Chart

## Examples

{{ DonutChartDefault }}
Loading
Loading