• Open in:

Gauge with Gradient Fill

It is very common for physical gauges to have a scale from safe to dangerous values, for example. This scale is usually accompanied with a gradient color band going from green to red. You can easily achieve the same with amCharts Gauge Chart.

Key implementation details

We create the gradient fill by configuring the axis renderer for our value axis. We use a circular axis renderer (AxisRendererCircular) for that and set its strokeGradient to a LinearGradient. Stroke width of 15 creates the feeling of a “fill”.

Related tutorials

Demo source