Docs › Chart types

Gauge

A single value against a range, such as progress to a target.

type: 'gauge' draws one value, data.series[0].data[0]. Set the range with gauge: { min, max } (default 0–100); with bands the arc takes the color of the band the value falls in.

Live example

Code for this example

const chart = createChart('#chart', {
  type: 'gauge',
  title: 'Progress to target',
  unit: '%',
  gauge: {
    min: 0,
    max: 100,
    label: 'Target $500k',
    bands: [{ to: 50, color: '#e34948' }, { to: 80, color: '#eda100' }, { to: 100, color: '#1baf7a' }],
  },
  data: { series: [{ name: 'Progress', data: [72.4] }] },
});
setTimeout(() => chart.update({ series: [{ name: 'Progress', data: [86.1] }] }), 2500);

gauge property	What it does
`min` / `max`	Range (default 0 / 100)
`bands`	`[{ to, color }]`: the first band whose `to` is at or above the value
`label`	Small text under the number