Statistic
Displays a metric value with optional title, prefix, suffix, and trend indicator.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Statistic />
When to Use
- KPI dashboards displaying key business metrics at a glance
- Data summaries with numeric values and optional trend indicators
- Metric displays showing counts, percentages, or currency values
- Overview panels where numbers need prefix/suffix formatting
Total Users
12,847
Revenue
$48,250.00
Growth
23.6%
12%
Bounce Rate
4.2%
0.8%
Sales
1,234
+12.5%
Returns
42
-3.2%
Switch size to see how the metric scales.
Monthly Revenue
$48,290
+12%
Switch variant to compare Default, Minimal, and Bordered styling.
Users
12,847
Revenue
$48,290
+8%
Churn
2.1%
-0.3%
API Reference
| Property | Type | Default | Description |
|---|---|---|---|
| Title | string? | null | Metric label displayed above the value. |
| Value | string? | null | The displayed value. |
| Prefix | RenderFragment? | null | Content shown before the value (e.g., currency symbol). |
| Suffix | RenderFragment? | null | Content shown after the value (e.g., unit). |
| Precision | int? | null | Decimal precision for numeric formatting. |
| ShowTrend | bool | false | Show the trend indicator. |
| TrendValue | string? | null | Text displayed next to the trend arrow. |
| TrendDirection | TrendType | Up | Trend direction. Values: Up, Down. |
| Size | StatisticSize | Medium | Overall scale of the statistic. Values: Small, Medium, Large. |
| Variant | StatisticVariant | Default | Visual style. Default = plain, Minimal = no background, Bordered = outlined card. Values: Default, Minimal, Bordered. |
| Culture | CultureInfo? | null | Culture used to format the numeric value. |