Gauge Chart

Display single metrics with threshold context using gauge charts. Semicircle and full-circle layouts, color-coded zones, animated needles, and configurable ranges. Perfect for dashboards, health metrics, and KPI displays.

$npm install @chartts/core
example.tsx
import { gauge } from "@chartts/core"

const svg = gauge({
  value: 78,
  min: 0,
  max: 100,
  zones: [
    { max: 30, color: "#ef4444" },
    { max: 60, color: "#f59e0b" },
    { max: 100, color: "#22c55e" },
  ],
  label: "CPU Usage",
  suffix: "%",
})

Features

Semicircle and full-circle layouts
Color zones for threshold indicators
Animated needle transitions
Custom min/max ranges and suffixes
Center value display
SVG rendering for any resolution
Under 3kb tree-shaken
Read the DocsSee DemosExamples