Gauge Chart displays last series value on a gauge with colored threshold ranges. If the gauge widget contains multiple series, it will display the sum of the series values.



Chart Lab: View

Default Style

gauge chart 1

Chart Lab: View

Sleek Style

gauge chart 2

Chart Lab: View

Half Style

gauge chart 3

Chart Lab: View

Advanced Sum

gauge chart 4

Chart Lab: View

Build your own Gauge in our ChartLab or download Axibase Time Series Database to visualize your own data.

[widget] Settings

Inherited settings from Generic Widget: type, title, tooltip, left-units, top-units, width-units, height-units, timespan, path, url, alert-style, alert-expression, style, class, format, last, min-range, max-range.

NameExampleDescriptionChart Lab
modemode = sleekGauge layout mode.
Possible values: sleek, half.
thresholdsthresholds = 0, 50, 90, 100Comma-separated threshold values or expressions to split the gauge axis into multiple ranges.
Each range is assigned a color with the colors or color-range setting.
colorscolors = green, yellow, redDetermines colors of threshold ranges.
The number of colors should be equal to the number of thresholds minus 1.
0 – 50 (green), 50-90 (yellow), 90-100 (red).
color-rangecolor-range = blackColor pallette automatically assigned to threshold ranges.
Possible values: blue, red, black.
gradient-intensitygradient-intensity = -25% / 75%Color intensity of the first and the last sector in each range.
Possible values: -.2/.7 (or -20%/70%).
gradient-countgradient-count = 5, 2, 1

5 gradients in first range.
2 – in 2nd range.
1 – in 3rd range.

Number of gradients in each range. View
captioncaption = KPIText displayed on top of the gauge. Caption can be split into multiple lines. HTML markup is supported.View
caption-stylecaption-style = color: silvercss style applied to caption.View
ticksticks = 4Number of major ticks on gauge axis.View
minor-ticksminor-ticks = 4Number of minor ticks between major ticks.View
display-ticksdisplay-ticks = trueDisplay ticks (values) on the axis (defaut: true).View
counter-positioncounter-position = noneCounter position.
Possible values: top, bottom, none.
display-tipdisplay-tip = trueDisplay last value marker.
Possible values: true, false.
format-tipformat-tip = d3.format("0.1f")
format-tip = kilobytes
Last value format.View
format-axisformat-axis = Math.round(value * 10)/10 + "%"Value axis format.View
format-counterformat-counter = d3.format("0.3f")Counter format.View
ring-widthring-width = 0.2Width of the colored ring area, measured as % of radius.
Possible values: between 0 and 1.
border-widthborder-width = 0.3Offset between gauge ring and parent container,
measured as % of radius.
Possible values: between 0 and 1.
pin-radiuspin-radius = 0.2Radius of the inner circle holding the arrow, measured as % of radius.
Possible values: between 0 and 1.
arrow-lengtharrow-length = 0.3Length of the gauge arrow, measured as % of radius.
Possible values: between 0 and 1.
[series] Settings

Inherited settings from Generic Widget [series]: entity, metric, type, interval, style, color, label, tooltip, format, display, hidden, refresh-interval, retry-refresh-interval, error-refresh-interval.

Configuration Example

Chart Lab: View

  type = gauge
  thresholds = 0, 75, 90, 100
  colors = green, yellow, red
    entity = nurswgvml007
    metric = cpu_busy