Charts

GaugeChart

KPI gauges, progress rings and animated counters.

<script>
  import { GaugeChart } from "@codeatlasdev/ui/charts";
</script>

<GaugeChart value={78} label="Score" />
<GaugeChart value={65} variant="ring" />

The default gauge colors its arc in three zones (error, warning, success). Override them with zones, where until is a fraction of min to max.

Simple gauge

Code

<script lang="ts">
  import { GlassCard } from '@codeatlasdev/ui';
  import { GaugeChart } from '@codeatlasdev/ui/charts';
</script>

<GlassCard full><GaugeChart value={78} label="Score" height="280px" /></GlassCard>

Progress ring

variant ring draws a single brand-colored arc with the value in the center.

Code

<script lang="ts">
  import { GlassCard, Stack, Slider } from '@codeatlasdev/ui';
  import { GaugeChart } from '@codeatlasdev/ui/charts';

  let value = $state(65);
</script>

<GlassCard full>
  <Stack gap={20}>
    <GaugeChart {value} variant="ring" height="260px" />
    <div class="slider"><Slider bind:value min={0} max={100} step={1} /></div>
  </Stack>
</GlassCard>

<style>
  .slider { padding: 0 var(--ca-space-3); }
</style>

Custom zones

Reverse the default zones when a high value is bad, such as CPU load.

CPU

Memory

Disk

Code

<script lang="ts">
  import { GlassCard, Grid } from '@codeatlasdev/ui';
  import { GaugeChart, type GaugeZone } from '@codeatlasdev/ui/charts';

  // `until` is a fraction of min..max; `color` is a semantic name or any CSS color.
  const zones: GaugeZone[] = [
    { until: 0.5, color: 'success' },
    { until: 0.8, color: 'warning' },
    { until: 1, color: 'error' },
  ];
  const metrics = [
    { label: 'CPU', value: 67 },
    { label: 'Memory', value: 82 },
    { label: 'Disk', value: 45 },
  ];
</script>

<Grid cols="repeat(auto-fit,minmax(200px,1fr))" gap={16}>
  {#each metrics as m}
    <GlassCard>
      <p class="label">{m.label}</p>
      <GaugeChart value={m.value} {zones} height="200px" />
    </GlassCard>
  {/each}
</Grid>

<style>
  .label {
    text-align: center;
    font-size: var(--ca-font-size-caption);
    color: var(--ca-text-secondary);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 var(--ca-space-1);
  }
</style>

Animated counter

Updating value animates the ring and the number.

Needs work

Code

<script lang="ts">
  import { GlassCard, Stack } from '@codeatlasdev/ui';
  import { GaugeChart } from '@codeatlasdev/ui/charts';
  import { onMount } from 'svelte';

  let value = $state(0);
  const label = $derived(value < 40 ? 'Needs work' : value <= 70 ? 'Good' : 'Excellent');

  onMount(() => {
    const id = setInterval(() => {
      value = Math.min(value + 2, 94);
      if (value >= 94) clearInterval(id);
    }, 40);
    return () => clearInterval(id);
  });
</script>

<GlassCard full>
  <Stack gap={12}>
    <GaugeChart {value} variant="ring" formatter={(v) => String(Math.round(v))} height="260px" />
    <p class="label">{label}</p>
  </Stack>
</GlassCard>

<style>
  .label { text-align: center; font-size: var(--ca-font-size-h6); font-weight: 700; color: var(--ca-semantic-success); margin: 0; }
</style>

Props

Prop	Type	Default	Description
`value`	`number`	–	Current value.
`min`	`number`	`0`	Lower bound of the scale.
`max`	`number`	`100`	Upper bound of the scale.
`variant`	`'default' \| 'ring'`	`'default'`	'default' is a speedometer arc with a pointer. 'ring' is a full progress ring.
`zones`	`GaugeZone[]`	`error to 0.3, warning to 0.7, success to 1`	Colored arc zones as { until, color }. until is a fraction of min to max; color is success, warning, error, info, brand or any CSS color.
`label`	`string`	–	Caption shown above the value in the default variant.
`formatter`	`(value: number) => string`	v => `${v}%`	Formats the displayed value.
`animated`	`boolean`	`true`	Animates the displayed value between updates.
`height`	`string`	`'280px'`	CSS height of the chart.
`class`	`string`	`''`	Extra class names.