Gauge Chart

Try the live demo

A gauge chart displays a single value against a defined range. It is well suited for KPIs, completion percentages, speedometers, and any scenario where the position of one value within a min/max bracket needs to be communicated at a glance. The gauge chart type is built on the same engine as radialBar but exposes additional configuration for partial arcs, threshold bands, tick marks, and needle indicators.

Chart Configuration

Set the chart type to gauge and pass a single value in series.


chart: {
  type: 'gauge',
  height: 350,
},
series: [72],
labels: ['Progress'],

Data Format

Gauge charts accept a single numeric value in the series array. The value is interpreted against plotOptions.radialBar.min and plotOptions.radialBar.max (default 0 and 100). The corresponding entry in labels is rendered as the metric name beneath the value.

Basic Gauge

The default gauge uses a circular arc with the value rendered in the centre.

Semi-Circle Gauge

Constrain the arc to a half-circle with startAngle and endAngle. The chart auto-centres within the available canvas.


plotOptions: {
  radialBar: {
    startAngle: -90,
    endAngle: 90,
  },
},

Threshold Bands

Use bands to colour-code value ranges along the arc — useful for indicating safe / warning / critical zones.


plotOptions: {
  radialBar: {
    bands: [
      { from: 0,  to: 30,  color: '#FF4560' },
      { from: 30, to: 70,  color: '#FEB019' },
      { from: 70, to: 100, color: '#00E396' },
    ],
  },
},

Tick Marks

Render major and minor ticks along the arc to make the scale readable.


plotOptions: {
  radialBar: {
    ticks: {
      show: true,
      major: { count: 11, length: 12 },
      minor: { count: 4,  length: 6  },
    },
  },
},

Needle Indicator

Switch the gauge to a needle by setting shape: 'needle'. The needle tweens between values on updateSeries calls, which makes it suitable for realtime / dashboard scenarios.


plotOptions: {
  radialBar: {
    shape: 'needle',
    startAngle: -135,
    endAngle: 135,
    needle: {
      showValueArc: true,
      offsetY: 0,
    },
    hollow: {
      stroke: '#e0e0e0',
      strokeWidth: 1,
    },
  },
},

For a live-updating needle, see Live Needle Gauge.

Custom Value Label

Format the value label and add custom prose with dataLabels.name.formatter and dataLabels.value.

RadialBar / Circular Gauge — multi-value radial charts and the underlying engine.
See plotOptions.radialBar for the full set of gauge configuration options.