Gauges Use Examples


Canvas Gauges are highly configurable. So you may use your fantasy to draw variety of gauges of different look and feel, displaying different kind of information.

All gauges on this page are interactive. Click the gauge to get it’s code. Mouse over to animate (or touch and wait for animation on mobile devices).

Zero Configuration Gauges

Minimum declaration!

Radial Gauges as Compass

Compass wanted?

animated needle

animated plate

animated needle

animated plate

Other Custom Radial Gauges

A bit more custom views:


half-gauge ticks horizontal

half-gauge ticks vertical (animated plate)

more custom coloring

Other Custom Linear Gauges

More Examples From Source Code

The examples below mainly used to test/observe some selected gauges features. Feel free to learn how to do different things using the examples and their source code.