Charts

RadarChart

Multi-dimensional profiles from single skill sets to interactive comparisons.

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

<RadarChart
  indicators={[{ name: "Speed", max: 100 }, { name: "Quality", max: 100 }, { name: "Support", max: 100 }]}
  series={[{ name: "Team A", values: [88, 92, 94] }]}
/>

values must follow the order of indicators. A legend appears automatically when there is more than one series.

#212

Simple radar

Reference #212 · Pick in the gallery

Code

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

  const indicators = ['Speed', 'Quality', 'Reliability', 'Innovation', 'Support', 'Coverage'].map((name) => ({ name, max: 100 }));
</script>

<Card material="glass" full>
  <RadarChart {indicators} series={[{ name: 'Team Alpha', values: [88, 92, 76, 85, 94, 79] }]} height="340px" />
</Card>

#210

Comparison

Two series with a legend and focus on hover.

Reference #210 · Pick in the gallery

Code

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

  const indicators = ['Speed', 'Quality', 'Reliability', 'Innovation', 'Support', 'Coverage'].map((name) => ({ name, max: 100 }));
</script>

<Card material="glass" full>
  <RadarChart
    {indicators}
    series={[
      { name: 'Team A', values: [88, 92, 76, 85, 94, 79] },
      { name: 'Team B', values: [74, 68, 90, 72, 81, 83] },
    ]}
    height="340px"
  />
</Card>

#211

Interactive team builder

Drag the sliders and the radar updates live.

Speed 88

Quality 92

Reliability 76

Innovation 85

Support 94

Coverage 79

Reference #211 · Pick in the gallery

Code

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

  const DIMS = ['Speed', 'Quality', 'Reliability', 'Innovation', 'Support', 'Coverage'];
  const indicators = DIMS.map((name) => ({ name, max: 100 }));

  let dims = $state([88, 92, 76, 85, 94, 79]);
  const series = $derived([{ name: 'My team', values: [...dims] }]);
</script>

<Card material="glass" full>
  <div class="builder">
    <RadarChart {indicators} {series} height="320px" />
    <Stack gap="3">
      {#each DIMS as dim, i}
        <Stack gap="1">
          <Flex justify="between">
            <span class="dim-name">{dim}</span>
            <span class="dim-value">{dims[i]}</span>
          </Flex>
          <Slider value={dims[i]} min={0} max={100} step={1} onchange={(v) => { dims[i] = v[0]; }} />
        </Stack>
      {/each}
    </Stack>
  </div>
</Card>

<style>
  .builder { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--ca-space-6); align-items: start; }
  .dim-name { font-size: var(--ca-font-size-body2); }
  .dim-value { color: var(--ca-brand-text); font-weight: 600; font-size: var(--ca-font-size-body2); }
  @media (max-width: 899.98px) { .builder { grid-template-columns: minmax(0, 1fr); } }
</style>

Props

Prop	Type	Default	Description
`indicators`	`RadarIndicator[]`	–	Axes as { name, max }.
`series`	`RadarSeries[]`	–	Named series as { name, values: number[], color? }, aligned to indicators.
`height`	`string`	`'340px'`	CSS height of the chart.
`class`	`string`	`''`	Extra class names.