GaugeChart

Semicircular gauge charts for displaying single metrics with optional color ranges and target markers.

Playground

Experiment with different settings:

Props

Midnight

value

size

220

strokeWidth

showTicks

OffOn

showTickLabels

OffOn

Code

<GaugeChart
  data={data}
  theme="midnight"
  value={72}
  size={220}
  strokeWidth={16}
  showTicks
  showTickLabels
/>

Basic Usage

72

Performance

tsx

<GaugeChart
  value={72}
  theme="midnight"
  label="Performance"
/>

Color Ranges

Define color ranges for different value thresholds:

25

Low

55

Medium

85

High

tsx

<GaugeChart
  value={85}
  theme="midnight"
  ranges={[
    { min: 0, max: 30, color: '#ef4444' },
    { min: 30, max: 70, color: '#f59e0b' },
    { min: 70, max: 100, color: '#22c55e' },
  ]}
  label="Score"
/>

With Target Marker

Add a target prop to show a goal marker on the gauge:

68

Progress to Goal

tsx

<GaugeChart
  value={68}
  target={80}
  theme="midnight"
  ranges={[
    { min: 0, max: 50, color: '#ef4444' },
    { min: 50, max: 80, color: '#f59e0b' },
    { min: 80, max: 100, color: '#22c55e' },
  ]}
  label="Progress to Goal"
/>

Custom Value Range

Use min and max for non-percentage values:

42mph

Wind Speed

78°F

Temperature

Different Sizes

Adjust the size prop for different visual footprints:

75

75

75

Performance

Props

Prop	Type	Default	Description
`value*`	`number`	-	Current value
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`size`	`number`	`200`	Chart diameter in pixels
`strokeWidth`	`number`	`16`	Arc stroke width
`theme*`	`ThemeName`	-	Theme name
`startAngle`	`number`	`-135`	Arc start angle (0 = top)
`endAngle`	`number`	`135`	Arc end angle
`ranges`	`{ min: number; max: number; color: string }[]`	-	Color ranges for different values
`target`	`number`	-	Target value to show marker
`showTicks`	`boolean`	`true`	Show tick marks
`tickCount`	`number`	`5`	Number of tick marks
`showTickLabels`	`boolean`	`true`	Show value labels on ticks
`format`	`(value: number) => string`	-	Value formatter
`label`	`string`	-	Label below the value
`children`	`ReactNode`	-	Custom center content