Interactive gauge

Current bounded readings where range context and status matter more than history.

Purpose: Show one or more current readings against an explicit bounded range.
Use when: A small number of status-like readings need range context.
Avoid when: Trend, history, or precise comparison is central; use a line or table instead.
Equivalent data: State the exact reading, range, and status in nearby text; do not rely on color or fill level.

Default Rendered example

Current rollout completion percentage.

Readings: 0.3, 0.4, and 0.5 in range 0 to 1.

Exact bounded readings

basic liquid example. Range: 0 to 1.

Reading	Value
Wave 1	0.3
Wave 2	0.4
Wave 3	0.5

Readings: 0.3, 0.4, and 0.5 in range 0 to 1.

Exact bounded readings

show label. Range: 0 to 1.

Reading	Value
Wave 1	0.3
Wave 2	0.4
Wave 3	0.5

Readings: 0.3, 0.4, and 0.5 in range 0 to 1.

Exact bounded readings

show outline. Range: 0 to 1.

Reading	Value
Wave 1	0.3
Wave 2	0.4
Wave 3	0.5

Readings: 0.3, 0.4, and 0.5 in range 0 to 1.

Exact bounded readings

disable wave animation. Range: 0 to 1.

Reading	Value
Wave 1	0.3
Wave 2	0.4
Wave 3	0.5

Readings: 0.3, 0.4, and 0.5 in range 0 to 1.

Exact bounded readings

shape(Diamond). Range: 0 to 1.

Reading	Value
Wave 1	0.3
Wave 2	0.4
Wave 3	0.5

Readings: 0.3, 0.4, and 0.5 in range 0 to 1.

Exact bounded readings

shape(Pin). Range: 0 to 1.

Reading	Value
Wave 1	0.3
Wave 2	0.4
Wave 3	0.5

Readings: 0.3, 0.4, and 0.5 in range 0 to 1.

Exact bounded readings

shape(Arrow). Range: 0 to 1.

Reading	Value
Wave 1	0.3
Wave 2	0.4
Wave 3	0.5

Readings: 0.3, 0.4, and 0.5 in range 0 to 1.

Exact bounded readings

shape(Triangle). Range: 0 to 1.

Reading	Value
Wave 1	0.3
Wave 2	0.4
Wave 3	0.5

Usage Example

@interactivegauge.Gauge(interactivegauge.Config{
  Label: "Deployment completion",
  Variant: interactivegauge.VariantProgress,
  Scale: interactivegauge.Scale{}, // Theme-aware cold-to-warm default.
  Series: []interactivegauge.Series{{
    Name: "Rollout",
    Data: []interactivegauge.Data{{Name: "Complete", Value: 73}},
  }},
})

Gauge treatments

Progress and liquid treatments change presentation only. Keep each reading's numeric value and range visible.

Liquid Gauge usage

@interactivegauge.Gauge(interactivegauge.Config{
  Label: "Bounded fill",
  Variant: interactivegauge.VariantLiquid,
  Min: 0,
  Max: 1,
  Series: []interactivegauge.Series{{
    Name: "liquid",
    Data: []interactivegauge.Data{
      {Name: "Wave 1", Value: .3},
      {Name: "Wave 2", Value: .4},
      {Name: "Wave 3", Value: .5},
    },
  }},
  Liquid: interactivegauge.LiquidTreatment{
    Shape:   interactivegauge.LiquidShapeDiamond,
    Animate: chart.Bool(true),
    Label:   &interactivegauge.LiquidLabel{Show: chart.Bool(true)},
  },
})

Go API

v0.0.1

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso-charts/components/interactive/gauge

Enabled, disabled, hidden, and omitted wrapper behavior, controls, export, and client transitions are shared by every chart. Review chart controls, then compare static/vector and interactive capabilities.

Open v0.0.1 API