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.
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
| Property | Type | Required | Description |
|---|---|---|---|
| type | string | required | Value must be "liquid". |
| percent | number | required | Fill percentage, range 0~1. |
| shape | 'rect' | 'circle' | 'pin' | 'triangle' | optional | Chart shape, default is "circle". |
| title | string | optional | Chart title. |
| theme | 'default' | 'dark' | 'academy' | optional | Chart theme, default is "default". |
| style | Object | optional | Chart style. |
| style.backgroundColor | string | optional | Must be a valid color value. |
| style.palette | string[] | optional | Must be an array of valid color values. |
