Refresh
Scheme Violet Ocean Amber
Light / Dark
Charts
Horizontal Bar Chart
Uses FluentHorizontalBarChart from the Microsoft.FluentUI.AspNetCore.Components.Charts package, one bar per region.
Line Chart
Line charts aren't implemented yet by the FluentUI Charts package, so this uses SharedUI's own FluentLineChart primitive instead, which mirrors the package's ChartData/Width/Height/ChartTitle parameter shape.
Monthly Active Users
045090013501800JanFebMarAprMayJunActual: Jan — 1200Actual: Feb — 1350Actual: Mar — 1280Actual: Apr — 1460Actual: May — 1600Actual: Jun — 1750Forecast: Jan — 1150Forecast: Feb — 1300Forecast: Mar — 1400Forecast: Apr — 1500Forecast: May — 1650Forecast: Jun — 1800
Actual Forecast
Usage
<FluentHorizontalBarChart ChartData="@RevenueByRegion"
                           Variant="HorizontalBarChartVariant.AbsoluteScale"
                           ChartTitle="Revenue by Region (in $K)"
                           Width="100%"
                           Height="240px" />

<FluentLineChart ChartData="@MonthlyActiveUsers"
                  ChartTitle="Monthly Active Users"
                  Width="640"
                  Height="320" />