Gauge with Gradient Fill

A gauge shows one value as a needle on a dial. Here the dial is one arc fading from green to red, so you see at once how close the value is to its maximum.

  • Try it:
  • Watch: a new value every 2 seconds
Get the code JavaScript JSON
About this chart

When a gradient gauge works

A gradient scale suits values that get gradually better or worse, like load, temperature or risk, where there is no sharp line between good and bad. The eye reads the color under the needle before the number. When fixed thresholds matter, use separate bands instead.

Good for

  • Load, temperature or risk levels
  • Status at a glance on a dashboard tile
  • Scales with no sharp cut-off points

Think twice when

  • Thresholds people act on: clear bands show them better
  • Readers who can’t tell green from red: add a number
  • Several values: a bar chart fits more in less space
For developers

Get the code.

Built with amCharts 5, a JavaScript library. The JavaScript includes your theme and renderer (canvas or SVG); the JSON also follows the changes you make with the controls.

Docs:Gauge chartsGradientsClock hands
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");

// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root),
  am5themes_Responsive.new(root)
]);

// Create chart
// https://www.amcharts.com/docs/v5/charts/radar-chart/
var chart = root.container.children.push(
  am5radar.RadarChart.new(root, {
    panX: false, // no dragging
    panY: false,
    // a half circle, open at the bottom
    startAngle: 180,
    endAngle: 360
  })
);

// A color on the theme's scale from its color for negative values (red, 0) through its warning color (yellow, 0.5) to
// its positive one (green, 1), so the arc follows the theme and dark mode
function scaleColor(position) {
  return am5.Color.interpolateColors(position, [
    root.interfaceColors.get("negative"),
    root.interfaceColors.get("warning"),
    root.interfaceColors.get("positive")
  ]);
}

// Create axis and its renderer
// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Axes
var axisRenderer = am5radar.AxisRendererCircular.new(root, {
  innerRadius: -10,
  // the axis line itself, 15px wide with a gradient, is the colored arc
  strokeOpacity: 1,
  strokeWidth: 15,
  strokeGradient: am5.LinearGradient.new(root, {
    rotation: 0, // left to right: green to red
    stops: [
      { color: scaleColor(1) },
      { color: scaleColor(0.67) },
      { color: scaleColor(0.33) },
      { color: scaleColor(0) }
    ]
  })
});

var xAxis = chart.xAxes.push(
  am5xy.ValueAxis.new(root, {
    maxDeviation: 0,
    min: 0,             // the scale runs from 0...
    max: 100,           // ...to 100...
    strictMinMax: true, // ...exactly, not rounded out
    renderer: axisRenderer
  })
);

// Add clock hand
// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Clock_hands
var axisDataItem = xAxis.makeDataItem({});
axisDataItem.set("value", 0); // the hand starts at 0

var bullet = axisDataItem.set("bullet", am5xy.AxisBullet.new(root, {
  sprite: am5radar.ClockHand.new(root, {
    radius: am5.percent(99) // the hand reaches almost to the outer edge
  })
}));

xAxis.createAxisRange(axisDataItem);

// the hand's axis range would also draw a grid line at its value; hide it
axisDataItem.get("grid").set("visible", false);

// every two seconds, the hand moves to a random value from 0 to 100
setInterval(() => {
  axisDataItem.animate({
    key: "value",
    to: Math.round(Math.random() * 100),
    duration: 800,
    easing: am5.ease.out(am5.ease.cubic) // fast start, slow finish
  });
}, 2000);

// Make stuff animate on load
chart.appear(1000, 100);

More Gauges demos.

All Gauges demosAll demos
Angular Gauge Gauge with Bands Animated Gauge Yes and No Gauge