Bar Chart

Bar Chart compares a handful to a few dozen categories, such as months, plans or regions, and handles negative values and rankings. It suits dashboard cards where people read totals side by side.

Install

bashnpx shadcn@4.18.0 add @siteplane/bar-chart

Import it from @/siteplane/components/bar-chart. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Line Chart: Pick Line Chart for a trend over many dates where the shape matters more than each bar.
• vs Bar List: Pick Bar List for a short ranked list of labels with values and no axis.
• vs Pie Chart: Pick Pie Chart only for a few shares of one total.

Rules

• Pass data, the x key, the series list and a required label that names the chart.
• Use stacked for parts of a total and orientation="horizontal" for rankings with long category names.
• Format numbers with formatValue and categories with formatX, and set locale to match the page.
• Use palette="categorical" for unrelated series and negativeColor on a series for values below zero.
• Keep category keys stable between data sets so bars glide instead of jumping, and translate the screen-reader words with labels.
• The chart is a read-only focus stop with no click or selection events.

Reference

• Bar Chart docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Charts. Read the installed source under src/siteplane before relying on an API.