# Statistic

Source: https://lumeo.nativ.sh/components/statistic

# Statistic

Displays a metric value with optional title, prefix, suffix, and trend indicator.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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

Preview Code

Basic Statistics

Total Users

12,847

Revenue

$48,250.00

Growth

23.6%

12%

Bounce Rate

4.2%

0.8%

Preview Code

With Trend

Sales

1,234

+12.5%

Returns

42

\-3.2%

Preview Code

Size (interactive)

Switch size to see how the metric scales.

Small Medium Large

Monthly Revenue

$48,290

+12%

Preview Code

Variant (interactive)

Switch variant to compare Default, Minimal, and Bordered styling.

Default Minimal Bordered

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.

## Related Components

-   [Card](/components/card) — Wrap statistics in cards for dashboard layouts
-   [Progress](/components/progress) — Visualize a metric as a progress bar instead of a number
-   [Badge](/components/badge) — Small inline indicators for counts or status