Charts

LineChart

Temporal trends, multi-series comparisons, gradient area fills and live data.

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

<LineChart
  series={[{ name: "Revenue", data: revenue }]}
  categories={months}
  valueFormatter={(v) => `$${v / 1000}k`}
/>

Simple line

Code

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

  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'];
  const revenue = [42000, 51000, 58000, 63000, 72000, 80000, 88000, 95000, 112000];
  const fmt = (v: number) => `$${(v / 1000).toFixed(0)}k`;
</script>

<GlassCard full>
  <LineChart series={[{ name: 'Revenue', data: revenue }]} categories={months} valueFormatter={fmt} height="300px" />
</GlassCard>

Multi-line comparison

Each series gets its own palette color.

Code

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

  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'];
  const revenue = [42000, 51000, 58000, 63000, 72000, 80000, 88000, 95000, 112000];
  const expenses = [38000, 41000, 44000, 47000, 52000, 55000, 58000, 61000, 67000];
  const profit = revenue.map((r, i) => r - expenses[i]);
  const fmt = (v: number) => `$${(v / 1000).toFixed(0)}k`;
</script>

<GlassCard full>
  <LineChart
    series={[
      { name: 'Revenue', data: revenue },
      { name: 'Expenses', data: expenses },
      { name: 'Profit', data: profit },
    ]}
    categories={months}
    valueFormatter={fmt}
    height="300px"
  />
</GlassCard>

Area with gradient fill

area fills under each line with a gradient that fades to transparent.

Code

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

  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'];
  const revenue = [42000, 51000, 58000, 63000, 72000, 80000, 88000, 95000, 112000];
  const fmt = (v: number) => `$${(v / 1000).toFixed(0)}k`;
</script>

<GlassCard full>
  <LineChart series={[{ name: 'Revenue', data: revenue }]} categories={months} valueFormatter={fmt} area height="360px" />
</GlassCard>

Real-time stream

Replace the data array and the chart updates in place.

Code

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

  const fmt = (v: number) => `$${(v / 1000).toFixed(0)}k`;

  let streamData = $state<number[]>([
    68000, 71000, 65000, 73000, 79000, 76000, 82000, 85000, 78000, 88000,
    91000, 86000, 94000, 98000, 103000, 99000, 107000, 112000, 108000, 115000,
  ]);

  onMount(() => {
    const id = setInterval(() => {
      const last = streamData[streamData.length - 1];
      const next = Math.min(125000, Math.max(42000, last + (Math.random() - 0.45) * 8000));
      streamData = [...streamData.slice(1), next];
    }, 800);
    return () => clearInterval(id);
  });
</script>

<GlassCard full>
  <LineChart
    series={[{ name: 'Live revenue', data: streamData }]}
    categories={streamData.map((_, i) => String(i))}
    valueFormatter={fmt}
    height="300px"
  />
</GlassCard>

Props

Prop	Type	Default	Description
`series`	`ChartSeries[]`	–	Named series sharing one category axis. Each is { name, data: number[], color? }.
`categories`	`string[]`	–	X-axis labels, one per data point.
`valueFormatter`	`(value: number) => string`	–	Formats y-axis ticks and tooltip values.
`area`	`boolean`	`false`	Fills the area under each line with a gradient.
`height`	`string`	`'320px'`	CSS height of the chart.
`class`	`string`	`''`	Extra class names.