Data Display

BarChart

Responsive SVG bar chart for grouped or stacked category comparisons.

import { BarChart } from '@lostgradient/cinder/bar-chart';
chartbaranalytics
01

Overview

Responsive SVG bar chart for grouped or stacked category comparisons.

Usage

svelte 
<script lang="ts">
  import BarChart from '@lostgradient/cinder/bar-chart';

  const data = [
    { week: 'Week 1', open: 34, resolved: 70 },
    { week: 'Week 2', open: 29, resolved: 84 },
    { week: 'Week 3', open: 41, resolved: 78 },
  ];
  const series = [
    { id: 'open', label: 'Open', valueKey: 'open' },
    { id: 'resolved', label: 'Resolved', valueKey: 'resolved' },
  ];
</script>

<BarChart label="Support ticket volume" {data} categoryKey="week" {series} mode="stacked" />

Guidance

Use When

  • Comparing discrete category totals or grouped category breakdowns.
  • Showing stacked contribution across known categories.

Avoid When

  • Showing a continuous ordered trend — use line-chart instead.
  • Showing magnitude under a trend — use area-chart instead.

Rendering and customization

BarChart uses SVG, with guide margins derived from the rendered category labels, tick labels, rotation, and axis titles. Its default theme inherits currentColor, keeps the chart background transparent, and resolves series colors from --cinder-chart-series-*; pass theme to override only the fields you need.

Set tooltip={true} for the default focus-aware visual tooltip, or pass a Snippet<[ChartTarget]> for custom content. Pass mark to replace each series' bars while retaining the chart's scales, guides, focus targets, and semantic data table. Use maximumInteractivePoints to bound keyboard focus targets for large category sets.

Live preview
02

When to use

Use when
  • Comparing discrete category totals or grouped category breakdowns.
  • Showing stacked contribution across known categories.
Avoid when
  • Showing a continuous ordered trend — use line-chart instead.
  • Showing magnitude under a trend — use area-chart instead.
03

Examples

Horizontal incidents

A horizontal grouped bar chart for incident counts by severity.

Loading state

A bar chart with reserved layout while data loads.

Grouped plan usage

A vertical grouped bar chart comparing usage by plan.

Stacked ticket volume

A vertical stacked bar chart showing open and resolved support tickets.

04

Props

Props for bar-chart
NameTypeDefaultDescription
label required text Accessible label for the chart. Required for screen readers.
description text Optional description rendered below the label.
data required BarChartDatum[] Rows containing the category and value-key fields used by each series.
categoryKey required text Datum key used for the category axis. Runtime validation requires string, number, or Date values.
series required BarChartSeries[] Series descriptors. Each valueKey must resolve to number, null, or undefined on every datum.
orientation 'vertical' | 'horizontal' 'vertical' Bar orientation. Default vertical.
mode 'grouped' | 'stacked' 'grouped' Grouped or stacked bar layout. Default grouped.
height number 280 Pixel height of the chart viewport. Default 280.
xAxis ChartAxisConfiguration & { /** Tick-label rotation in degrees. Default `0`. */ tickLabelRotation?: number; } Configuration for the x-axis label and tick formatting.
yAxis { label?: string; tickCount?: number; format?: ChartTickFormatter; } Configuration for the y-axis label and tick formatting.
legendPosition 'top' | 'bottom' | 'none' 'top' Where to render the series legend relative to the chart. Default top.
hiddenSeriesIds bindable string[] [] IDs of series currently hidden from the chart. Can be two-way bound with bind:hiddenSeriesIds.
loading boolean false Whether the chart is in a loading state. Default false.
dataTableCaption text Custom data table caption; falls back to label.
dataTableVisibility 'screen-reader-only' | 'visible' | 'hidden' 'screen-reader-only' Controls data table visibility. Default screen-reader-only.
maximumInteractivePoints number 500 Maximum number of interactive focus targets before keyboard navigation is disabled. Default 500.
theme { foreground?: string; muted?: string; grid?: string; background?: string; palette?: string[]; } Partial visual theme override. Omitted fields inherit the surrounding application.
tooltip boolean false Opt-in visual tooltip. Pass a snippet to replace the default visual content.
mark snippet Per-series renderer override. The chart retains scales, guides, focus, and data-table semantics.
empty snippet
loadingContent snippet
id text