IBarChart ​

Bars, in plain SVG with no charting dependency. It inherits the theme like everything else, so it follows light and dark for free.

<script setup lang="ts">
const monthly = [
  { label: 'Jan', value: 18200 },
  { label: 'Feb', value: 22400 },
  { label: 'Mar', value: 19800 },
]
</script>

<template>
  <IBarChart
    :data="monthly"
    :format="{ style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }"
    label="Revenue by month"
  />
</template>

The width fills the container and height (240px by default) is the only dimension you set. The value axis always includes zero and lands on round numbers, so ticks is a target count rather than an exact one.

Hovering a category raises a tooltip with the value formatted exactly as the ticks are: locale and format feed one Intl.NumberFormat used everywhere in the chart.

Horizontal ​

Turn the chart when the category names are long or numerous — a horizontal chart gives every name a full row.

<IBarChart
  :data="channels"
  orientation="horizontal"
  :format="{ style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }"
  label="Revenue by channel"
/>

Several series ​

Pass series to read more than one measure out of each datum. Each series names the key it reads and, optionally, how it should be labelled.

<script setup lang="ts">
const byRegion = [
  { label: 'Q1', north: 18200, south: 12400, east: 9100 },
  { label: 'Q2', north: 22600, south: 15100, east: 11800 },
]

const regions = [
  { key: 'north', name: 'North' },
  { key: 'south', name: 'South' },
  { key: 'east', name: 'East' },
]
</script>

<template>
  <IBarChart
    :data="byRegion"
    :series="regions"
    :format="{ style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }"
    label="Revenue by quarter and region"
  />
</template>

A legend appears automatically from two series up; legend is honoured only for a single series. When you filter series in and out, give each one a slot so its colour stays with the entity rather than with its position in the list.

Stacked ​

<IBarChart
  :data="byRegion"
  :series="regions"
  stacked
  :format="{ style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }"
  label="Total revenue by quarter, split by region"
/>

Stacking answers "what makes up the total"; grouping answers "how do these compare". The stacked tooltip adds a sum row, labelled by totalLabel.

Negative values ​

<IBarChart
  :data="netChange"
  :format="{ style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }"
  label="Net change by month"
/>

Bars below zero hang from the zero line rather than from the axis floor.

Bare bars ​

Drop the axis and gridlines for a chart that sits inside a tile, where the shape is the whole message.

<IBarChart :data="monthly" :axis="false" :height="120" label="Revenue by month" />

Gaps ​

null is a missing reading, not a zero — no bar is drawn at all, which is not the same as a bar of no height.

Props ​

Slots ​

Data shapes ​

interface BarChartDatum {
  label: string
  value?: number | null
  [key: string]: unknown
}

interface ChartSeries {
  key: string
  name?: string
  slot?: number
}

The bars are hidden from assistive technology and the same data is exposed as a table, named by label.