Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React A pie chart with no separator
A React pie chart with no separators between slices using stroke='0' for seamless color transitions with shadcn/ui and Recharts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes boundaries distract. This React pie chart uses stroke='0' to eliminate the white separators between slices, creating seamless color flow where categories blend into each other visually. Built with shadcn/ui and Recharts, the borderless design creates a unified circular form that emphasizes the whole over the parts. Colors transition directly, creating a cleaner, more modern aesthetic than traditional separated slices. Perfect for artistic dashboards, minimalist designs, gradient-style visualizations, or when you want to de-emphasize individual categories in favor of overall composition or color story.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Pie Chart
Standard pie with slice separators
Donut Chart
Donut with default stroke separators
Gradient Area Chart
Smooth color transitions in area charts
Pie with Labels
Labels with stroke separators
Pie with Legend
Legend-based identification
Bar Chart
Discrete bars with clear separation