---
title: "BarChart"
description: "A decorative bar chart with labels and an sr-only table that repeats the data. Each bar's height is proportional to the maximum; color and weight come from tokens."
kind: component
id: C-066
registry: "bar-chart"
docs: "https://koten.codehive.com.co/components/bar-chart"
markdown: "https://koten.codehive.com.co/md/components/bar-chart.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/bar-chart.json"
language: en
---

# BarChart · 棒グラフ

> Component C-066 in the Koten UI catalog.

A decorative bar chart with labels and an sr-only table that repeats the data. Each bar's height is proportional to the maximum; color and weight come from tokens.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/bar-chart.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/bar-chart.json
```

## Files

- `@/components/ui/bar-chart.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Requirements

- **provider** — KotenProvider: useKoten picks the sr-only table headers (Label/Value) and the locale used to announce the data.

## Examples

### Daily series

Decorative bars and an sr-only table with the same information.

```tsx
const data = [
  { label: "Lun", value: 42 },
  { label: "Mar", value: 58 },
  { label: "Mié", value: 36 },
  { label: "Jue", value: 71 },
  { label: "Vie", value: 64 },
  { label: "Sáb", value: 28 },
  { label: "Dom", value: 19 },
];

<BarChart
  label="Pedidos por día"
  data={data}
  height={140}
  formatValue={(value) => `${formatNumber(value)} pedidos`}
/>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `data` | `readonly BarChartDatum[]` | `—` | Each point is { label, value }; the label also heads the accessible table row. |
| `label` | `string` | `—` | Visible title and caption of the sr-only table. |
| `height` | `number` | `160` | Height of the bar area in px; labels sit outside it. |
| `formatValue` | `(value: number) => string` | `String(value)` | Formats the accessible table value and the title of each bar. |
| `className` | `string` | `—` | Classes for the figure; width adapts to the container. |

## Accessibility

- Bars and visual labels are aria-hidden; the information lives in an sr-only table with a caption.
- The fallback table translates its headers according to the KotenProvider locale.
- formatValue should include the unit; without it the accessible table loses context.

## Sources

- Catalog page: https://koten.codehive.com.co/components/bar-chart
- Markdown: https://koten.codehive.com.co/md/components/bar-chart.md
- Repository: https://github.com/codehive-colombia/koten