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-pie

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

Last updated

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

What it is

11 chart blocks in the pie 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-pie-donut

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

Examples

chart-pie-donut

A donut chart.

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

chart-pie-donut-active

A donut chart with an active sector.

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

chart-pie-donut-text

A donut chart with text.

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

chart-pie-interactive

An interactive pie chart.

Pie Chart - Interactive
January - June 2024

chart-pie-label

A pie chart with a label.

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

chart-pie-label-custom

A pie chart with a custom label.

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

chart-pie-label-list

A pie chart with a label list.

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

chart-pie-legend

A pie chart with a legend.

Pie Chart - Legend
January - June 2024

chart-pie-separator-none

A pie chart with no separator.

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

chart-pie-simple

A simple pie chart.

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

chart-pie-stacked

A pie chart with stacked sections.

Pie Chart - Stacked
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