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';
</script>

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.
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.

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
Name Type Default Required Bindable Description
label unknown req
description unknown req
data BarChartDatum[] req Rows containing the category and value-key fields used by each series.
categoryKey text req Datum key used for the category axis. Runtime validation requires string, number, or Date values.
series BarChartSeries[] req 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 unknown 280
xAxis unknown req
yAxis unknown req
legendPosition unknown 'top'
hiddenSeriesIds unknown [] bind
loading unknown false
dataTableCaption unknown req
dataTableVisibility unknown 'screen-reader-only'
maximumInteractivePoints unknown 500
empty unknown req
loadingContent unknown req
id unknown req