Pie Chart Examples
14 pies and donuts: centers with totals, a shared legend, half donuts, hover effects, patterns and gradients. Each on React, Vue, Svelte and Solid, drawn with TanStack Charts in your theme. Pie chart docs and API.
Every pie chart example
14 examples.
- Pie ChartPie chartRevenue across five categories, the hovered slice popping out while the others dim.
- Donut Chart with Center TotalPie chartThe total sits in the hole and rolls over to the hovered slice's value and label.
- Donut Chart with Custom CenterPie chartA render function draws the center: all product lines' total at rest, the hovered one's figures otherwise.
- Pie Chart with LegendPie chartA donut and a legend with percentages sharing one hovered index, so each highlights the other.
- Half Donut ChartPie chartRounded, spaced slices on a half circle that grow outward on hover instead of moving.
- Pie Chart with PatternPie chartOne slice in diagonal stripes, from a pattern defined inside the chart.
- Pie Chart with Pattern PresetsPie chartA bill by service, each slice filled with a different pattern preset: hatched, lined, dotted and checked.
- Pie Chart with a Pattern TilePie chartOne slice filled with a custom plus-sign `PatternTile`, the others with presets.
- Donut Chart with Share in the CenterPie chartThe center shows the total at rest, then the hovered slice's value and share in its color.
- Pie Chart with Hover EffectsPie chartA solid pie with a switch between its hover effects: the slice moves out, grows, or stays put.
- Donut Chart with Grow HoverPie chartThe hovered slice grows outward instead of moving, and the center rolls to its value.
- Donut Chart with GlowPie chartRounded, spaced slices, and the hovered one glows in its own color.
Or describe it. With Pro, your AI agent installs the pie chart example you describe, on your framework.
Get ProGalleries
More chart examples
8 more chart types, free: open one for its examples and their code.
Pricing
Pie Chart examples MCP, with Pro
Your AI agent installs any of the 1434 examples, and every component, block and icon, with every Pro plan.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
FAQ
Frequently asked questions
14: Pie Chart, Donut Chart with Center Total, Donut Chart with Custom Center, Pie Chart with Legend, Half Donut Chart, Pie Chart with Pattern, Pie Chart with Pattern Presets, Pie Chart with a Pattern Tile, Donut Chart with Share in the Center, Pie Chart with Hover Effects, Donut Chart with Grow Hover, Donut Chart with Glow, Pie Chart with Gradients and Donut Chart with Patterns. Each page has the live chart, its code and a one-line install.
Signed in, copy the chart's command: `npx shadcn@latest add` with its URL. It adds the chart to `components/charts`, the `chart-kit` kit every chart imports, and `@tanstack/charts`. Import the chart and render it.
Yes. Every chart is free to use in personal and commercial projects. Seeing the code and installing it takes a free account, one tap with Google or GitHub. Pro is the site's paid plan for blocks, the Pro collections and the MCP, and the charts don't need it.
4.9 out of 5 from 150+ developers
Every pie chart example. One prompt away.
Every pie chart example is free with an account. With Pro, your AI agent installs them from a prompt.
Get Pro