# Liquid Fill Chart

Source: https://lumeo.nativ.sh/components/charts/liquid-fill

# Liquid Fill Chart

Display a percentage value as an animated liquid fill inside a shape. Great for showing completion rates, capacity levels, or KPI progress with a visual wave animation.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo.Charts

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

## Usage

@using Lumeo

<LiquidFillChart />

Preview Code

Completion Rate

Preview Code

Diamond Shape

Preview Code

Loading state

Simulate loading

Hold skeleton open

Duration: 2s 

Cycle: 1400 ms 

Shape-aware skeleton with reserved space for legend and axes — no layout shift when real data arrives.

## API Reference

### LiquidFillChart

Property

Type

Default

Description

Value

double

0.5

Fill level as a decimal (0 to 1).

Title

string?

null

Title text displayed above the chart.

Shape

string

"circle"

Container shape: "circle", "rect", "roundRect", "triangle", "diamond".

Color

string?

null

Fill color for the liquid.

BackgroundColor

string?

null

Background color of the container.

WaveAnimation

bool

true

Enables the wave animation effect.

IsLoading

bool

false

When true, renders a shape-matched loading skeleton in place of the chart. Bind to your async fetch state.

ShowLoadingSkeleton

bool

true

Set to false to opt out of the skeleton (chart area stays empty while IsLoading is true).

SkeletonKind

ChartSkeletonKind

(chart default)

Override the skeleton silhouette (Bars, Line, Area, Pie, Scatter, Grid, Generic).

SkeletonStyle

ChartSkeletonStyle

Phantom

Phantom renders the real chart with placeholder data and morphs to real data via ECharts animation. Silhouette falls back to the legacy SVG skeleton overlay.

ShowLoadingLabel

bool

true

Shows a small "Loading…" pill in the top-right corner whenever `IsLoading` is true. Layered on top of any `SkeletonStyle`. Set to false for bare visuals. **(rc.18)**

LoadingText

string?

"Loading…"

Label rendered next to the spinner inside the loading pill. Set to empty to show the spinner alone. **(rc.18)**

AnimationDuration

int?

null

Entry animation duration in milliseconds for the liquid fill.

AnimationEasing

string?

null

ECharts easing function name used during the fill animation.

ColorPalette

List<string>?

null

Multi-stop color palette for layered liquid waves.

EChartsSource

string?

null

Override URL for the echarts-liquidfill plugin script.

Height

string

"350px"

CSS height of the liquid fill chart container.

LabelFormat

string?

null

ECharts label format template for the center value label.

LabelPosition

string

"center"

Position of the value label inside the container.

PhantomCycleMs

int

1400

Phantom-mode refresh interval in milliseconds while loading.

ShowDataLabels

bool

false

Shows the numeric value label inside the liquid fill.

Theme

string?

null

ECharts theme name applied to this chart instance.

Toolbox

bool

false

Shows the ECharts toolbox with save-as-image controls.

Width

string

"100%"

CSS width of the liquid fill chart container.