Charts

BarChart

Vertical, horizontal, stacked and grouped bars.

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

<BarChart series={[{ name: "Revenue", data: [38400, 54200, 71600, 89800] }]} categories={["Q1", "Q2", "Q3", "Q4"]} />

Multiple series render grouped by default. Set stacked to stack them into one column per category.

#193

Vertical bars

Reference #193 · Pick in the gallery

Code

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

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

<Card material="glass" full>
  <BarChart series={[{ name: 'Revenue', data: [38400, 54200, 71600, 89800] }]} categories={['Q1', 'Q2', 'Q3', 'Q4']} valueFormatter={fmt} height="300px" />
</Card>

#190

Horizontal bars

Good for long category names and rankings.

Reference #190 · Pick in the gallery

Code

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

  const products = ['Atlas Pro', 'Nova Suite', 'Relay SDK', 'Mesh API', 'Drift UI', 'Pulse DB', 'Forge CI', 'Orbit ML'];
</script>

<Card material="glass" full>
  <BarChart
    series={[{ name: 'Sales', data: [9840, 8720, 7650, 6430, 5980, 4810, 3920, 3140] }]}
    categories={products}
    valueFormatter={(v) => `${(v / 1000).toFixed(1)}k`}
    horizontal
    height="300px"
  />
</Card>

#191

Stacked bars

Reference #191 · Pick in the gallery

Code

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

  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
  const fmt = (v: number) => `$${(v / 1000).toFixed(0)}k`;
</script>

<Card material="glass" full>
  <BarChart
    series={[
      { name: 'Organic', data: [12400, 14800, 18200, 16600, 21200, 24800] },
      { name: 'Paid', data: [8200, 9600, 11800, 10400, 13600, 15200] },
      { name: 'Referral', data: [4800, 5600, 7200, 6400, 8800, 10400] },
      { name: 'Direct', data: [3200, 4000, 5200, 4600, 6200, 7600] },
    ]}
    categories={months}
    valueFormatter={fmt}
    stacked
    height="300px"
  />
</Card>

#192

Grouped and stacked

Toggling stacked animates between both layouts.

Reference #192 · Pick in the gallery

Code

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

  const fmt = (v: number) => `$${(v / 1000).toFixed(0)}k`;
  let mode = $state<'grouped' | 'stacked'>('grouped');
</script>

<div class="wrap">
  <Flex gap="2">
    <Button variant={mode === 'grouped' ? 'filled' : 'glass'} size="sm" onclick={() => (mode = 'grouped')}>Grouped</Button>
    <Button variant={mode === 'stacked' ? 'filled' : 'glass'} size="sm" onclick={() => (mode = 'stacked')}>Stacked</Button>
  </Flex>
  <Card material="glass" full>
    <BarChart
      series={[
        { name: '2025', data: [44200, 58600, 67400, 81200] },
        { name: '2026', data: [52800, 71400, 84600, 98800] },
      ]}
      categories={['Q1', 'Q2', 'Q3', 'Q4']}
      valueFormatter={fmt}
      stacked={mode === 'stacked'}
      height="300px"
    />
  </Card>
</div>

<style>
  .wrap { width: 100%; display: flex; flex-direction: column; gap: var(--ca-space-3); }
</style>

Props

Prop	Type	Default	Description
`series`	`ChartSeries[]`	–	Named series sharing one category axis. Each is { name, data: number[], color? }.
`categories`	`string[]`	–	Category labels, one per bar group.
`valueFormatter`	`(value: number) => string`	–	Formats value-axis ticks and tooltip values.
`horizontal`	`boolean`	`false`	Renders bars horizontally.
`stacked`	`boolean`	`false`	Stacks all series into one column per category.
`height`	`string`	`'320px'`	CSS height of the chart.
`class`	`string`	`''`	Extra class names.