Skip to content
Component installs need the registry setup— the Base UI shadcn project, the @vegastack namespace and the Cloudflare Access service token.
VegaStack Design

charts-radial

The 6 radial chart blocks — copy-once Card compositions over the chart component and recharts, with their sample data inline.

Last updated

Radial Chart - Grid
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

What it is

6 chart blocks in the radial 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-radial-grid

Every block on this page installs the same way; swap the name.

Examples

chart-radial-grid

A radial chart with a grid.

Radial Chart - Grid
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

chart-radial-label

A radial chart with a label.

Radial Chart - Label
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

chart-radial-shape

A radial chart with a custom shape.

Radial Chart - Shape
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

chart-radial-simple

A radial chart.

Radial Chart
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

chart-radial-stacked

A radial chart with stacked sections.

Radial Chart - Stacked
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

chart-radial-text

A radial chart with text.

Radial Chart - Text
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

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.

On this page