Bar Chart
Compare values across categories with labeled bars.
Preview
Import
import { BarChart } from "@sigil-ui/components";Usage
<BarChart
groups={[
{ label: "Jan", bars: [{ label: "Revenue", value: 42 }, { label: "Cost", value: 28 }] },
{ label: "Feb", bars: [{ label: "Revenue", value: 58 }, { label: "Cost", value: 31 }] },
{ label: "Mar", bars: [{ label: "Revenue", value: 75 }, { label: "Cost", value: 35 }] },
{ label: "Apr", bars: [{ label: "Revenue", value: 63 }, { label: "Cost", value: 29 }] },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
groups | BarChartGroup[] | — | — |
direction | "vertical" | "horizontal" | — | — |
showValues | boolean | true | Show value labels on bars. |
showGrid | boolean | true | Show gridlines. |
maxBarSize | number | 200 | Maximum bar height/width in px. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Primary |
--s-success | Success |
--s-warning | Warning |
--s-error | Error |
--s-info | Info |
--s-font-mono | Font mono |
--s-text-muted | Text muted |
--s-border | Border |
--s-radius-sm | Radius sm |
--s-duration-normal | Duration normal |
--s-surface-elevated | Surface elevated |
--s-primary-contrast | Primary contrast |