Bar Chart
A grouped bar chart with vertical or horizontal layout, gridlines, and value labels.
Preview
Import
import { BarChart } from "@sigil-ui/components";Usage
<BarChart
direction="vertical"
groups={[
{
label: "Q1",
bars: [
{ label: "Revenue", value: 120 },
{ label: "Cost", value: 80 },
],
},
{
label: "Q2",
bars: [
{ label: "Revenue", value: 150, color: "var(--s-success)" },
{ label: "Cost", value: 90, color: "var(--s-error)" },
],
},
]}
showValues
showGrid
maxBarSize={200}
/>Horizontal variant
<BarChart direction="horizontal" groups={groups} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
groups | BarChartGroup[] | — | Array of bar groups, each with a label and bars |
direction | "vertical" | "horizontal" | "vertical" | Bar orientation |
showValues | boolean | true | Show numeric value labels on each bar |
showGrid | boolean | true | Show background gridlines |
maxBarSize | number | 200 | Maximum bar height (vertical) or width (horizontal) in px |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Default first bar color |
--s-success | Default second bar color |
--s-warning | Default third bar color |
--s-border | Gridline stroke |
--s-surface-elevated | Horizontal bar track background |
--s-text | Value labels |
--s-text-muted | Group labels and axis text |
--s-primary-contrast | Text on horizontal bars |
--s-font-mono | Label and value font |
--s-radius-sm | Bar corner radius |
--s-duration-normal | Bar transition animation |