# Radial Gauge

A 270° gauge for load, scores and quotas. The value arc sweeps up from the minimum with rounded ends while the readout counts up, and threshold bands recolor the arc as the value crosses them.

<demo-radial-gauge>



</demo-radial-gauge>

## Usage

```vue
<script setup lang="ts">
  import RadialGauge from '~/components/ui/radial-gauge/RadialGauge.vue';
  import type { RadialGaugeThreshold } from '~/components/ui/radial-gauge/types';

  const thresholds: RadialGaugeThreshold[] = [
    { from: 0, color: 'var(--chart-2)' },
    { from: 70, color: 'var(--chart-4)' },
    { from: 90, color: 'var(--chart-5)' },
  ];
</script>

<template>
  <RadialGauge :value="68" unit="%" label="CPU load" :thresholds="thresholds" />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        value
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Current value, clamped to <code>
        min
      </code>
      
      …<code>
        max
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        min
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Lower bound
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        max
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        100
      </code>
    </td>
    
    <td>
      Upper bound
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Caption under the value
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        unit
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Appended to the readout
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        220
      </code>
    </td>
    
    <td>
      Diameter in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        thickness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        16
      </code>
    </td>
    
    <td>
      Arc thickness in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        sweep
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        270
      </code>
    </td>
    
    <td>
      Arc sweep in degrees, centered on 12 o'clock
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'var(--chart-2)'
      </code>
    </td>
    
    <td>
      Arc color when no threshold matches
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        thresholds
      </code>
    </td>
    
    <td>
      <code>
        { from: number; color: string }[]
      </code>
    </td>
    
    <td>
      <code>
        []
      </code>
    </td>
    
    <td>
      Colors the arc by the highest band reached
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        aria-label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      derived
    </td>
    
    <td>
      Defaults to the label and value
    </td>
  </tr>
</tbody>
</table>

Motion respects `prefers-reduced-motion`: the chart jumps to its final state instead of animating.

## Use TanStack Charts instead

Every chart imports its engine from one file, `components/ui/chart/chart-backend.ts`. The default engine is a small, dependency-free SVG renderer whose API matches [TanStack Charts](https://tanstack.com/charts) 1.x exactly, so chart definitions are valid TanStack definitions.

To switch, install TanStack Charts and replace the exports in that file:

```bash
pnpm add @tanstack/charts@^1.1.0 @tanstack/vue-charts@^1.1.0
```

```ts
// components/ui/chart/chart-backend.ts
export { Chart } from '@tanstack/vue-charts';
export { areaY, defineChart, lineY } from '@tanstack/charts';
export { pie, polar, radialArc } from '@tanstack/charts/polar';
export { scaleLinear } from '@tanstack/charts/scales/linear';
export { scalePoint } from '@tanstack/charts/scales/point';
```

No component code changes. Verified against TanStack Charts 1.1.0, the first stable line with a compatibility promise for its public API.