React Gauge Chart

Display KPIs and metrics with a React gauge chart. Semicircle and full-circle layouts, color zones for thresholds, animated needles, and Tailwind CSS on every element.

$npm install @chartts/react
example.tsx
import { GaugeChart } from "@chartts/react"

export function PerformanceGauge() {
  return (
    <GaugeChart
      value={73}
      min={0}
      max={100}
      zones={[
        { max: 40, className: "fill-red-500" },
        { max: 70, className: "fill-amber-500" },
        { max: 100, className: "fill-emerald-500" },
      ]}
      className="h-48"
      label="Performance Score"
    />
  )
}

Features

Semicircle and full-circle layouts
Color zones for threshold indicators
Animated needle transitions
Custom min/max ranges
SVG rendering for crisp display
Tailwind className on arcs, needle, labels
Under 3kb tree-shaken
Read the DocsSee DemosExamples