Bar chart

Compare one measure across days and scrub any bar for its value.

$npx shadcn@latest add @silicon-ui/bar-chart

chartbardata

Installation

$npx shadcn@latest add @silicon-ui/bar-chart

Install the dependencies.
$npm install motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/bar-chart/bar-chart.tsx
- components/silicon-ui/bar-chart/bar-chart.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { BarChart } from "@/components/silicon-ui/bar-chart/bar-chart";

Prop	Type	Default
`data*`	`BarChartDatum[]`	—
`label*` What is measured, such as "Active minutes". Names the chart for assistive technology.	`string`	—
`period*` The range on show, such as "Sep 15–21, 2026". It rests under the headline.	`string`	—
`unit` Unit after each value, such as "min".	`string`	`""`
`averageLabel` Headline label at rest, above the average.	`string`	`"Daily average"`
`valueLabel` Headline label while a bar is scrubbed.	`string`	`"Total"`
`categoryLabel` Header of the first column in the data table read by screen readers.	`string`	`"Day"`
`showAverage` Draws the average as a reference line that springs to each new range.	`boolean`	`true`
`height` Plot height in pixels.	`number`	`176`
`formatValue`	`(value: number) => string`	`value => grouped.format(value)`