G2

Overview

The liquid mark can be used to draw various types of liquid charts (ripple charts or wave charts), conveying information or enhancing user experience through the visual fluctuation that simulates the dynamic process of ripples spreading on water surfaces. It is commonly used in UI design, data visualization, or animation effects.

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  height: 300,
  type: 'liquid',
  data: 0.3, // [0, 1]
  // Configure styles
  style: {
    outlineBorder: 4, // Outline border width
    outlineDistance: 8, // Wave motion time
    waveLength: 128, // Wave length
  },
  // Configure coordinate system
  coordinate: {},
});

chart.render();

For more examples, you can visit the Chart Examples - Liquid page.

Configuration

Property	Description	Type	Default	Required
style	Configure the graphic style of `liquid` mark	style	-

style

Configure the style of the liquid mark.

Property	Description	Type	Default
shape	Shape	number	`circle`
stroke	Border color	string	-
fill	Wave color	string	-
outlineBorder	Border width	number	`2`
outlineDistance	Inner spacing	number	`0`
waveLength	Wave length	number	`192`
waveCount	Wave count	number	`3`
backgroundFill	Background color	string	-
contentText	Text content	string	-
contentFill	Text color	string	-
contentFontSize	Text size	string	-

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'liquid',
  data: 0.75,
  style: {
    fill: 'pink', // Wave color
    stroke: 'red', // Stroke color
    backgroundFill: '#f5f5f5', // Background color
    // outline for stroke style
    outlineBorder: 10, // Outline border width
    outlineDistance: 10, // Wave motion time
    // wave configuration
    waveLength: 188, // Wave length
    waveCount: 6, // Wave count, automatically assigns opacity from 1 to 0.2
    // content for center text configuration
    contentText: 'center text',
    contentFill: '#000',
    contentStroke: '#fff',
    contentFontSize: 32,
    contentLineWidth: 3,
  },
  // Configure coordinate system
  coordinate: {},
});

chart.render();

shape

The built-in shapes supported by the liquid mark are as follows:

Shape	Description	Example
rect	Rectangle
circle	Circle
pin	Water drop
triangle	Triangle

If you need to customize shapes, you can provide implementation through custom shape. The callback (x, y, r, w, h) => string receives parameters x, y (center coordinates), r (maximum radius for drawing circles), w, h (chart drawable width and height), to draw the desired shape. This requires some understanding of SVG or Canvas.

Try drawing your own: