Create a liquid fill gauge chart. — liquid

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.

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"
)