liquid_chart: Create a liquid fill gauge chart.

In ddplot: Create D3 Based SVG Graphics

Create a liquid fill gauge chart.

Description

A liquid fill gauge represents a single value as a circle filled with an animated liquid up to the corresponding level. The fill rises smoothly on load, two wave layers give the water a natural depth, and the label text changes color at the water surface — appearing in textColor above the water and in waveTextColor below it.

Usage

liquid_chart(
  value,
  label = NULL,
  fillColor = "steelblue",
  circleColor = NULL,
  circleThickness = 0.05,
  textColor = NULL,
  waveTextColor = "white",
  textSize = 0.38,
  waveAmplitude = 0.09,
  waveCount = 2,
  waveSpeed = 1,
  title = NULL,
  titleFontSize = 14,
  font = "Verdana, Geneva, Tahoma, sans-serif",
  bgcol = "white",
  width = NULL,
  height = NULL
)

Arguments

value	Numeric. The fill level, between 0 and 1 (0 = empty, 1 = full).
label	Character. Text displayed in the center of the gauge. Defaults to value formatted as a percentage (e.g. "55%").
fillColor	The color of the liquid. Defaults to "steelblue".
circleColor	The color of the outer ring. Defaults to fillColor.
circleThickness	Thickness of the outer ring as a fraction of the circle radius. Defaults to 0.05.
textColor	Color of the label text above the water surface. Defaults to fillColor.
waveTextColor	Color of the label text below (inside) the water surface. Defaults to "white".
textSize	Font size of the label as a fraction of the circle radius. Defaults to 0.38.
waveAmplitude	Height of the wave as a fraction of the circle radius. Defaults to 0.09.
waveCount	Number of full wave cycles visible across the circle. Defaults to 2.
waveSpeed	Speed of the horizontal wave animation. Higher values are faster. Defaults to 1.
title	Optional. A label displayed below the circle.
titleFontSize	Font size of the title in pixels. Defaults to 14.
font	The font family used for all text. Defaults to "Verdana, Geneva, Tahoma, sans-serif".
bgcol	Background color of the SVG. Defaults to "white".
width	Optional. The width of the SVG output.
height	Optional. The height of the SVG output.

Value

An animated SVG liquid fill gauge.

Examples

# Basic usage — 55% fill
liquid_chart(value = 0.55)

# Custom color and label
liquid_chart(
  value     = 0.72,
  label     = "72%",
  fillColor = "#e67e22",
  title     = "Disk usage"
)

# Low fill with a raw value label
liquid_chart(
  value         = 0.28,
  label         = "28%",
  fillColor     = "tomato",
  circleColor   = "tomato",
  textColor     = "tomato",
  waveTextColor = "white"
)

ddplot documentation built on Aug. 25, 2026, 5:10 p.m.