charts-line
The 10 line 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 line 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-line-defaultRegistry 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-line-default
A line chart.
chart-line-dots
A line chart with dots.
chart-line-dots-colors
A line chart with dots and colors.
chart-line-dots-custom
A line chart with custom dots.
chart-line-interactive
An interactive line chart.
chart-line-label
A line chart with a label.
chart-line-label-custom
A line chart with a custom label.
chart-line-linear
A linear line chart.
chart-line-multiple
A multiple line chart.
chart-line-step
A line chart with step.
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.