BarGauge

Bar gauge panel - horizontal/vertical progress bars.

Use for showing progress towards a goal or threshold.

Usage

<BarGauge
  title="Memory Usage"
  unit="percent"
  min={0}
  max={100}
  thresholds={{ 70: 'yellow', 90: 'red' }}
>
  avg(memory_usage_percent)
</BarGauge>

Example 2

// LCD-style display with name placement
<BarGauge
  title="Disk Usage"
  displayMode="lcd"
  orientation="horizontal"
  namePlacement="left"
  showUnfilled
>
  disk_used_percent
</BarGauge>

Props

Prop	Type	Default	Description
unit	Unit	-	Display unit
decimals	number	-	Decimal places
min	number	-	Minimum value
max	number	-	Maximum value
thresholds	ThresholdSpec	-	Threshold configuration
orientation	VizOrientation | 'horizontal' | 'vertical'	-	Bar orientation
displayMode	BarGaugeDisplayMode	-	Display mode (basic, gradient, or lcd)
overrides	OverrideConfig[]	-	Field overrides for series-specific styling
transformations	Transformation[]	-	Data transformations
showUnfilled	boolean	-	Show unfilled portion of bar
minVizWidth	number	-	Minimum visualization width in pixels
minVizHeight	number	-	Minimum visualization height in pixels
sizing	BarGaugeSizing	-	Sizing mode
valueMode	BarGaugeValueMode	-	Value display mode
namePlacement	BarGaugeNamePlacement	-	Name/label placement
reduceOptions	ReduceDataOptions	-	Data reduction options (advanced)
text	TextFormattingOptions	-	Text formatting options

Inherits from BasePanelProps