Lily Design System™

ColumnChart

A categorical visualization with bars running vertically, used to compare a measured value across a set of named categories. Vertical orientation reads naturally for time-ordered categories (months, quarters, releases) and works well when category labels are short.

The component is a headless wrapper around an inline <svg>: it renders a <figure role="img"> containing the columns, names the figure via aria-label (from label), and references an extended description and an optional dataTable slot via aria-describedby. The data table is the canonical accessible alternative — screen readers and exports both benefit from a real <table> rendering of the same numbers, and Lily encourages always providing it.

For the same comparison with horizontal bars (better for long labels) use BarChart. For trends over continuous data use LineChart or AreaChart. For tiny inline summaries use Sparkline.

Example

ColumnChart
Show demo markup 
<div class="column-chart" aria-label="a vertical column chart visualization for displaying data">ColumnChart</div>
Usage example 
<ColumnChart label="Monthly revenue" categories={monthlyRevenue} description="Revenue per month for the last year" />
Show Svelte source 
// In your Svelte component:
import ColumnChart from "lily-design-system-svelte-headless/components/ColumnChart/ColumnChart.svelte";

<ColumnChart>
  <!-- content -->
</ColumnChart>

Usage

<ColumnChart label="Monthly revenue" categories={monthlyRevenue} description="Revenue per month for the last year" />

Props

PropTypeDefaultDescription
labelstring (required)—Accessible name
descriptionstring—Extended description
categoriesarray of { label: string; value: number }[]Categories to plot
dataTableslot—Optional fallback <table>
...restPropsHTML attributes—Spread onto the root <figure>

Keyboard Interactions

  • No keyboard interactions on the rendered columns
  • Data table (when rendered) follows native table keyboard behaviour

ARIA

  • role="img" exposes the chart as a single image
  • aria-label and aria-describedby provide the accessible name and description

When to Use

  • Comparing categorical values where the categories have short labels (months, quarters)
  • Time series at low resolution

When Not to Use

  • Use BarChart (horizontal) when category labels are long
  • Use LineChart or AreaChart for high-resolution time series

Headless

This headless component renders semantic HTML with appropriate ARIA wiring. The consumer provides all visual styling — no CSS, animations, or layout assumptions are baked in.

Styles

The component renders with .column-chart as the root class. No default styles are included.

Related components

  • bar-chart — horizontal bar equivalent
  • line-chart / area-chart — continuous-data alternatives
  • graphic-block — chart wrapper with title/notes

References

Implementation Notes

  • Renders a <figure role="img"> containing an inline <svg> rendering of vertical columns
  • Data is supplied as categories (each with a label and value)
  • Columns run vertically; values are read along the y-axis
  • An optional accessible data table is rendered via the dataTable slot
  • Spreads restProps onto the root <figure>

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: column-chart
  • PascalCase: ColumnChart
  • Description: a vertical column chart visualization for displaying data
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <figure>
  • CSS class: .column-chart
  • Interactive: no

ARIA

  • role="img" exposes the chart as a single image
  • aria-label and aria-describedby provide the accessible name and description

Keyboard

  • No keyboard interactions on the rendered columns
  • Data table (when rendered) follows native table keyboard behaviour

Props

  • label: string (required) (default: —) — Accessible name
  • description: string (default: —) — Extended description
  • categories: array of { label: string; value: number } (default: []) — Categories to plot
  • dataTable: slot (default: —) — Optional fallback <table>
  • ...restProps: HTML attributes (default: —) — Spread onto the root <figure>