Skip to content

Gauge Chart

The Gauge Chart block displays a single value on a circular gauge scale. It is built on the amCharts library and is useful for showing KPIs, progress indicators, or any value within a defined range.

Add a Gauge Chart Block

Add a new block to a page and select Gauge Chart from the block type list.

Configuration (Simple Mode)

  • X Axis Min / Max - Set the minimum and maximum values for the gauge scale.
  • Strict Min / Max - Enforce exact min/max boundaries on the scale.
  • Start Angle / End Angle - Set the rotation angles for the gauge arc.
  • Inner Radius - Percentage size of the inner circle (0-100%).
  • Ranges - Add colored ranges to the gauge. Each range has:
    • Label - Display text for the range.
    • Start / End - Numeric boundaries of the range.
    • Fill Color - Color of the range segment.
  • Hands - Add pointer hands to the gauge. Each hand has:
    • Value - The data column to display as the pointer value.
    • Inner Radius / Outer Radius - Size of the pointer.

Advanced Mode

Switch to advanced mode to edit the full amCharts JSON configuration directly in the code editor.

Query

The Gauge Chart uses a data source query to supply the values displayed by the gauge hands. Learn more about block queries.