Component · C-066

BarChart

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.

Install

Install koten-theme first when the project has no Koten tokens yet.

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

Requirements

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

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.

Read the whole page

• Markdown page
• Agent index (llms.txt)
• Full documentation (llms-full.txt)

Koten UI · llms.txt · llms-full.txt · Markdown