# Cloud Spend Bars

> bklit's bar chart breaking monthly cloud spend into compute, storage and network against a budget line, with a switch that regroups the stack side by side and a tooltip that totals each month.

- Page: https://devl.dev/components/bklit-bar-chart
- Kind: component · Charts
- Install: `npx shadcn@latest add https://ui.bklit.com/r/bar-chart.json`
- coss ui: segmented-control
- By bklit (MIT): https://ui.bklit.com

## Usage

```tsx
import { CloudSpendBarCard, type SpendMonth } from "@/components/bklit-bar-chart";

const months: SpendMonth[] = [
  { month: "May", compute: 4120, storage: 1380, network: 640 },
  { month: "Jun", compute: 4480, storage: 1420, network: 710 },
  { month: "Jul", compute: 4310, storage: 1510, network: 690 },
  { month: "Aug", compute: 5260, storage: 1560, network: 820 },
  { month: "Sep", compute: 5840, storage: 1640, network: 910 },
  { month: "Oct", compute: 5410, storage: 1720, network: 880 },
];

export default function BklitBarChartDemo() {
  return <CloudSpendBarCard budget={9000} months={months} />;
}
```