Liquid Chart

[Configuration Manual]

Introduction

liquid chart usually display data by filling a circle with dynamic water waves, and are often used to show real-time progress.

Chart composition

A liquid chart consists of liquid mark（liquid），liquidBackground mark（liquidBackground）and liquidOutline mark(liquidOutline).

The data fields and data maps of the liquid chart are configured as follows:

• liquidChart.type: Chart type, the type of liquid chart

• liquidChart.data: Data source for graphing

• liquidChart.valueField The attribute is declared as a value field configuration, used to represent the height of the water wave

• For more component configurations, seeVChart liquid configuration

Get started quickly

Key Options

• The valueField attribute is declared as a value field configuration
• The maskShape property is declared as an outline shape
• The outlineMargin attribute is declared as the padding between the outer outline and the region boundary
• The outlinePadding attribute is declared as the padding between the inner outline and the outer outline
• The indicatorSmartInvert attribute declares whether to enable smart inversion of indicator values.

Liquid Chart

Data

• A value field, such as: value, maps the height of the water wave primitive.

A set of progress data is defined as follows:

data: [
  {
    values: [{ value: 0.5 }]
  }
];