Plugins 〉D3 Gauge


Developer
Brian Gann (bkgann@gmail.com)


Sign up to receive occasional product news and updates:



Panel
community

D3 Gauge

  • Overview
  • Installation
  • Change log
  • Related content

Grafana Gauge Panel

Marketplace Downloads License

Twitter Follow Release Known Vulnerabilities Maintainability Test Coverage

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

Screenshots

Example gauges

Default Gauge Default Gauge With Threshold

Custom Gauge Custom Gauge With Limits

Options

Options

With Limits

Options with Limits

Limits Shown

Options With Limits

Radial Metrics

Radial Metrics

Thresholding

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:

Installing D3 Gauge on Grafana Cloud:

For more information, visit the docs on plugin installation.

Change Log

All changes noted here.

v0.0.9 - 2021-04-21

  • Add option to display needle arrow
  • Update packages

v0.0.8 - 2020-10-26

  • Signed Plugin!
  • Updated build process

v0.0.7 - 2020-04-18

  • Fixes
    • Update to typescript and using standardized build process.
    • Simplified value display

v0.0.1

  • Initial commit