charts-bar
The 10 bar chart blocks — copy-once Card compositions over the chart component and recharts, with their sample data inline.
Last updated
What it is
10 chart blocks in the bar family. Each is one Card wrapping a
ChartContainer, with its sample data inline — pull one, then point it at your own series.
They depend on card and chart and nothing else.
Install
npx shadcn@latest add @vegastack/chart-bar-activeRegistry setup required
Run this command only after configuring the Base UI shadcn project, the
@vegastack registry namespace, and the Cloudflare Access service-token headers in Install from the VegaStack registry.Every block on this page installs the same way; swap the name.
Examples
chart-bar-active
A bar chart with an active bar.
chart-bar-default
A bar chart.
chart-bar-horizontal
A horizontal bar chart.
chart-bar-interactive
An interactive bar chart.
chart-bar-label
A bar chart with a label.
chart-bar-label-custom
A bar chart with a custom label.
chart-bar-mixed
A mixed bar chart.
chart-bar-multiple
A multiple bar chart.
chart-bar-negative
A bar chart with negative values.
chart-bar-stacked
A stacked bar chart with a legend.
Do / Don't
Do
Copy the one whose shape matches your data, then replace chartData and chartConfig.
Don't
Import a chart block from the registry as a shared component — it is a starting point, not an API.