modern-gauge

An animated half-circle SVG gauge component for React. Zero runtime dependencies beyond React itself.

Features

• Smooth animated arc fill that interpolates from the previous value on each update
• Gradient color progression across the arc and tick marks
• Automatically generated minor tick marks between major labels
• Responsive — fills its container via SVG viewBox

Installation

npm install modern-gauge

Usage

import { HalfGauge } from 'modern-gauge';

function Dashboard() {
  return (
    <HalfGauge
      value={72}
      minMax={[0, 20, 40, 60, 80, 100]}
      colors={['#f44336', '#ffeb3b', '#4caf50']}
      title="CPU (%)"
    />
  );
}

Props

| Prop | Type | Default | Description | |---|---|---|---| | value | number | — | Current value to display | | minMax | number[] | [0, 5, 10, 15, 20] | Ordered scale values. First = min, last = max. Labels are rendered at each value; minor ticks are inserted automatically between them. | | colors | string[] | ['#f44336', '#9c27b0'] | Two or more CSS colors forming the gradient from min to max. | | title | string | — | Optional label displayed below the value |

Examples

Minimal

<HalfGauge value={12} />

Custom scale and colors

<HalfGauge
  value={3500}
  minMax={[0, 1000, 2000, 3000, 4000, 5000, 6000]}
  colors={['#4caf50', '#ffeb3b', '#f44336']}
  title="RPM"
/>

Tick behaviour

The minMax array defines where major labels appear. Minor ticks are inserted automatically:

• ≤ 5 major ticks → 4 minor ticks per gap
• 6–16 major ticks → 2 minor ticks per gap
• > 16 major ticks → no minor ticks; every other label is hidden to avoid crowding

Peer Dependencies

{
  "react": ">=17.0.0",
  "react-dom": ">=17.0.0"
}

License

MIT