Billing Chart
A stacked bar chart for visualizing cost breakdowns and billing trends over time.
Preview
Import
import { BillingChart } from "@sigil-ui/components";Usage
<BillingChart
currency="$"
periods={[
{
label: "Jan",
segments: [
{ label: "Compute", value: 120 },
{ label: "Storage", value: 45 },
{ label: "Network", value: 20 },
],
},
]}
showLegend
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
periods | BillingPeriod[] | — | Billing periods with stacked segments |
width | number | 500 | SVG width |
height | number | 260 | SVG height |
currency | string | "$" | Currency symbol for labels |
showLegend | boolean | true | Show color legend |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | First segment color |
--s-success | Second segment color |
--s-warning | Third segment color |
--s-border | Grid lines |
--s-text | Total value labels |
--s-text-muted | Axis and legend text |
--s-font-mono | Value font family |