Grafana Gauge Panel

This panel plugin provides a D3-based gauge panel for Grafana 6.x/7.x

Screenshots

Example gauges

Options

With Limits

Limits Shown

Radial Metrics

Thresholding

Features

• Data operator same as SingleStat panel (avg, sum, current, etc)

• Unit formats same as SingleStat

• Customizable Font size and type for value displayed and ticks

• Animated needle transition (elastic or quadin)

• Adjustable Limits

• All possible color options for gauge components

• Customizable gauge component sizes (needle length, width, tick length, etc)

• Thresholding colors displayed on gauge

• Threshold can modify displayed value and background

• Needle animation speed is now configurable

• Arbitrary degree gauges now supported (default is from 60 to 320)

• Value text on gauge can now be moved up/down as needed

Building

This plugin relies on Grunt/NPM/Bower, typical build sequence:

yarn install
yarn build

For development, you can run:

yarn watch

Docker Support

A docker-compose.yml file is include for easy development and testing, just run

docker-compose up

Then browse to http://localhost:3000

External Dependencies

• Grafana 6.x

Build Dependencies

• yarn

Acknowledgements

This panel is based on the "SingleStat" panel by Grafana, along with large portions of these excellent D3 examples:

• https://oliverbinns.com/articles/D3js-gauge/
• http://bl.ocks.org/tomerd/1499279
• http://bl.ocks.org/dustinlarimer/5888271 Markers!