GPT-Vis1.3
Skip to examples
Browse chart types
Chart library26 ways to visualize
Start with your own data.SDK quickstart Install the Agent Skill

STATISTICS / CHART GUIDE

Liquid Chart

A liquid chart is a visualization that uses a liquid fill effect to represent a numerical proportion.

01 / EXPLORE

See it in action.

Switch to Code to copy an example.

Server CPU Usage at 72%, Circle Liquid Chart

Project Completion Progress 88%, Pin Shape, Custom Colors

System Availability 99.9%, Rectangle Liquid Chart, Custom Palette

About Liquid Chart

A liquid chart is a visualization that uses a liquid fill effect to represent a numerical proportion. Typically using a circular container as the carrier, it intuitively displays the current progress or proportion of a metric through the liquid level height and wave animation. The liquid height represents the percentage value, and the wave effect enhances visual appeal. It is well-suited for displaying the completion or status of a single metric.

02 / CONFIGURE

Make it yours.

The properties available for this chart.

Configuration Options

PropertyTypeRequiredDescription
typestringrequiredValue must be "liquid".
percentnumberrequiredFill percentage, range 0~1.
shape'rect' | 'circle' | 'pin' | 'triangle'optionalChart shape, default is "circle".
titlestringoptionalChart title.
themeBuiltinThemeName | ThemeSpecoptionalBuilt-in theme name or custom theme object; default is "default". See Documentation → Custom Themes.
styleObjectoptionalChart style.
style.backgroundColorstringoptionalMust be a valid color value.
style.palettestring[]optionalMust be an array of valid color values.
GPT-Vis · An AntV project · MIT licensed