D3 Gauge

Panel

D3-based Gauge panel for Grafana
  • Showcase
    Showcase
  • Options
    Options
  • Radial Metrics
    Radial Metrics
  • Thresholding
    Thresholding

Grafana Gauge Panel

Twitter Follow Release David Dependency Status David Dev Dependency Status 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:

Sign up Now

Version

Dependencies:
  • Grafana 6.x.x