Overview

gauge is used to create gauge charts, which are common visualization charts used to display data progress, proportions, or comparisons.

Typical use cases:

• Business metrics: sales achievement rate, user growth progress;
• System monitoring: CPU/memory usage, disk capacity warnings;
• Device gauges: vehicle speedometer, temperature gauge simulation.

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

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

chart.options({
  type: 'gauge', // Set the chart type to gauge
  data: {
    value: {
      target: 120, // Target value of the gauge
      total: 400, // Total value of the gauge
      name: 'score', // Name of the gauge data
    },
  },
});

chart.render();

Options

data

data defines the gauge values, target values and category information, driving pointer position, color mapping and multi-gauge facet display through data binding.

For more data configuration, you can check the data introduction page.

encode

Configure visual channels for gauge marks, which define the mapping relationship between data fields and visual properties. This is an important configuration that determines how data is transformed into visual representation.

For more encode configuration, you can check the encode introduction page.

scale

scale is used to define how data maps to visual properties (such as color, size, shape, etc.).

color

The color distribution is related to the data in data. Colors here can be set as gradients for configuring gradient gauge charts.

• With only target or percent, the color parameter range can consist of two color parameters. On the gauge scale, these two colors will divide the gauge scale into two segments

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

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

chart.options({
  type: 'gauge',
  data: {
    value: {
      target: 120,
      total: 400,
      name: 'score',
    },
  },
  scale: {
    color: { range: ['#FAAD14', 'green'] },
  },
});

chart.render();

• When thresholds is set, the colors in the color parameter range should match the length of thresholds. The gauge scale will be segmented by the values in thresholds and filled with colors from the corresponding positions in the scale parameter color

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

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

chart.options({
  type: 'gauge',
  data: {
    value: {
      target: 120,
      total: 400,
      name: 'score',
      thresholds: [100, 200, 400],
    },
  },
  scale: {
    color: { range: ['#F4664A', '#FAAD14', 'green'] },
  },
});

chart.render();

For more scale configuration, you can check the scale introduction page.

style

style is used to set the appearance of chart elements, including fill colors, border styles, shadow effects, etc.

Composite graphic marks need to be distinguished by different prefixes to configure graphics.

arc

Configure gauge arc styles through the arc prefix.

pin

Configure gauge pointer axis styles through the pin prefix.

pointer

Configure gauge pointer styles through the pointer prefix.

text

Configure gauge indicator text styles through the text prefix.

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

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

chart.options({
  type: 'gauge',
  data: {
    value: {
      target: 159,
      total: 400,
      name: 'score',
      // thresholds: [200, 400],
    },
  },
  scale: {
    color: {
      range: ['l(0):0:#62CFF4 1:#2C67F2', 'l(0):0:#2C67F2 1:#00008B'],
    },
    y: {
      range: [1, -0.5],
    },
  },
  style: {
    // Configure gauge indicator text style
    textContent: (target, total) => `Ratio: ${(target / total) * 100}%`,
    textFill: '#000',
    textFontSize: 24,
    textfontWeight: 300,
    textX: '35%',
    textY: '75%',
    // Configure gauge pointer style
    pointerStroke: '#c5c5c5',
    pointershadowColor: '#333333',
    pointershadowBlur: 10,
    pointershadowOffsetX: 5,
    pointershadowOffsetY: 5,
    // Configure gauge pointer axis style
    pinStroke: '#d5d5d5',
    pinFill: '#d5d5d5',
    pinlinewidth: 6,
    pinshadowColor: '#333333',
    pinshadowBlur: 30,
    pinshadowOffsetX: 5,
    pinshadowOffsetY: 5,
    // Configure gauge arc style
    arcLineWidth: 2,
    arcStroke: '#fff',
    arcshadowColor: '#333333',
    arcshadowBlur: 30,
    arcshadowOffsetX: 5,
    arcshadowOffsetY: 5,
  },
  legend: false,
});

chart.render();

For more style configuration, you can check the style introduction page.

Try it out:

Examples

Custom Gauge Pointer Shape