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 Maintainability Test Coverage

All Contributors

This panel plugin provides a D3-based gauge panel for Grafana 8.4.10+/9.x/10.x

Screenshots

Example gauges

Default Gauge

Default Gauge With Threshold

Default Gauge With All Thresholds

Custom Gauge

Custom Gauge With Limits

Configuration Options

The React port has separated the configuration options into multiple searchable sections and added new features.

Standard Options

Standard Options

OptionDescription
StatThe statistic to be displayed on the gauge
UnitA unit for the value displayed. This will be used to abbreviate as needed
DecimalsMaximum number of decimals to display if any are required

Font Settings

Font Settings

OptionDescription
Value FontFont to be used on the value displayed
Value Font SizeFont Size for the value displayed
Tick Label FontFont to be used on the tick labels
Tick Label Font SizeFont size to be used on for the tick labels

Needle Options

Needle Options

OptionDescription
Animate Needle TransitionEnables needle animation between values
Transition Speed (MS)When animation is enabled, set how fast the transition occurs
Allow Crossing LimitsEnable this to allow the needle to go below and above the limit
Needle Cross Limit DegreesWhen crossing limits is enabled, this sets the degrees that can be exceeded
Needle WidthSpecifies the width of the needle
Show End MarkerThis will create a marker at the end of the needle of the specified shape
Show Start MarkerThis will create a marker at the start of the needle of the specified shape

When the options Allow Crossing Limits is enabled, the needle can exceed the maximum or minimum limit by the specified degrees. The example below shows a gauge with a limit of 100, and allows the needle to cross the limit (burying the needle).

Needle Cross Enabled

Limits

Limits

OptionDescription
Minimum ValueMinimum Value allowed on the face
Maximum ValueMaximum Value allowed on the face

Coloring

Coloring

OptionDescription
Outer EdgeColor of the outer edge of the gauge
Inner (Face)Color used on the face of the gauge (background of dial)
PivotColor of the pivot (center)
NeedleColor of the needle
Units LabelColor for label units when displayed
Tick LabelColor of values displayed near the tick major sections
Tick MajorColor of the major ticks (longer lines)
Tick MinorColor of the minitor ticks (shorter lines)

Radial Customization

Note that many of these settings are very sensitive to the visualization since they are percentages of the radius. Adjust in small increments to see how they affect the gauge.

Radial Customization

OptionDescription
RadiusSpecifies size of gauge by radius. Value 0 (zero) will auto-scale to fit panel
Tickness Gauge BasisScaling for tick, a lower value will autoscale poorly
Pivot RadiusSize of the center pivot, as a percentage of radius
Value Y-OffsetSets a vertical offset to better place the displayed metric
PaddingAdds space between the ticks and outer edge
Edge WidthThickness of the circle around the edge of the gauge, as a percentage of the gauge radius
Tick Edge GapSpacing between ticks and the outer circle, as a percentage of the gauge radius
Tick Length MajorLength of the major ticks, as a percentage of the gauge radius
Tick Width MajorWidth of the major ticks in pixels
Tick Length MinorLength of the minor ticks, as a percentage of the gauge radius
Tick Width MinorWidth of the minor ticks in pixels
Needle Tick GapSpacing between ticks the needle end, as a percentage of the gauge radius
Needle Length StemLength of the needle section extending beyond the centre of the gauge, as a percentage of the gauge radius

Gauge Degrees

This is the main section that is used to modify the displayed range on the gauge.

Gauge Degrees

OptionDescription
Zero Tick AngleAngle where the tick value (0) starts (default 60)
Max Tick AngleAngle where the tick value ends (default 300)
Zero Needle AngleAngle where needle is at minimum value (default 40)
Max Needle AngleAngle where needle is at maximum value (default 320)

Gauge Readings

Gauge Readings

OptionDescription
Tick Spacing MajorThe numeric spacing of the minor increment ticks
Tick Spacing MinorThe numeric spacing of the major increment ticks

Tick Maps

Tick Maps

Use the Add Tick Map button to create a tick map.

A tick map allows you to substitute text for a given value. Using this option a compass style gauge can be constructed.

OptionDescription
LabelSets the name of the Tick Map
ValueTick value where the text will be placed
TextText to be displayed

Thresholds

Thresholds operate in the same manner as other Grafana plugins.

There are additional display options detailed below.

Thresholds

OptionDescription
Show Threshold Band On GaugeThresholds are displayed as a band on face of gauge along the needle arc
Show Lower RangeLower threshold is displayed on band
Show Middle RangeMiddle thresholds are displayed on band
Show Upper RangeUpper threshold is displayed on band
Show Threshold State on BackgroundGauge face color changes to state of threshold
Show Threshold State on ValueDisplayed value color changes to state of threshold

When the middle and upper threshold option are selected, the gauge will look similar to this:

Thresholds Middle Upper

The state of the threshold can be displayed as the background color of the gauge.

Threshold on Face

The state of the threshold can be displayed on the value of the gauge.

Threshold on Value

Value Mappings

Value Mappings works the same as other Grafana plugins. This allows displaying alternative text instead of the value based on ranges or regular expressions.

Primarily this is used for N/A for null data, but can be used to indicate a state.

Ex: For a temperature gauge, a value below 0 could be harmful, or a value above 100 could be harmful to a device. A value mapping could be used to display this as an urgent message, or simply indicate a "nominal" reading.

Value Mappings


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)

  • Threshold colors displayed on gauge

  • Threshold can modify displayed value and background

  • Needle animation speed is configurable

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

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

Contributing

All contributions are welcome! See the CONTRIBUTING.md doc for more information.

Acknowledgements

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

Contributors

Installing D3 Gauge on Grafana Cloud:

For more information, visit the docs on plugin installation.

Change Log

All changes noted here.

v2.0.1 - 2023-11-13

  • Fix font sizing during migrations
  • Autoscales font according to gauge size

v2.0.0 - 2023-10-20

  • Rewritten from Angular to React
  • NEW: Needle Width can now be specified
  • NEW: Thresholds now use the standard Grafana threshold mechanics
  • NEW: Needle can optionally exceed the tick mark (min and max) to show values that are outside of limits
  • NEW: Needle Center can use all marker types, with arrow-inverse added to options
  • Switched to pnpm

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