Gauge Chart

Charts

Animated circular SVG gauge. Ideal for displaying a KPI, a progress indicator, or a bounded metric.

Playground

72Score72%

0100

Controls

Value

Min

Max

Label

Size (px)

Show Value

Show Min/Max

Thickness

Color

Prop	Type	Default	Description
`value`*	`number`	—	Current value.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`label`	`string`	—	Label displayed below the value.
`unit`	`string`	—	Suffix (e.g. %, °C).
`size`	`number`	`180`	SVG size in px.
`color`	`string`	—	Gauge color (default: violet).
`showValue`	`boolean`	`true`	Display the value in the center.
`showMinMax`	`boolean`	`true`	Display min/max values.
`thickness`	`number`	`14`	Arc thickness.

CPU Usage

45%CPU45%

0100

vue

<DsGaugeChart
  :value="45"
  label="CPU"
  unit="%"
  :size="160"
/>

High value

93Performance93%

0100

vue

<DsGaugeChart
  :value="93"
  label="Performance"
  color="#22c55e"
  :size="160"
/>

Warning

81Memory81%

0100

vue

<DsGaugeChart
  :value="81"
  label="Memory"
  color="#f97316"
  :size="160"
/>

Custom range

1,400RPM70%

02000

vue

<DsGaugeChart
  :value="1400"
  :min="0"
  :max="2000"
  label="RPM"
  :size="160"
/>

Use DsGaugeChartSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsGaugeChartSkeleton />

DonutChart

LineChart