Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React A radar chart with lines only
A React radar chart with outline-only polygons using fillOpacity={0} and stroke for minimal visualization with shadcn/ui and Recharts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Filled polygons dominate visually. Sometimes you need subtlety. This React radar chart uses fillOpacity=0 with stroke and strokeWidth=2 to create outline-only polygons—no fills, just colored borders tracing the data shape. Built with shadcn/ui and Recharts with radialLines= for ultra-clean aesthetics, the outline approach works brilliantly when overlaying many series where fills would create visual mud. Users see distinct colored shapes without opacity-based layering complexity. Perfect for technical visualizations prioritizing precision over aesthetic impact, comparing 3-plus series where fills obscure each other, or minimal design contexts where line art beats solid shapes.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Radar Chart
Filled polygon visualization
Radar No Grid
Minimal grid-free radar
Line Chart
Line-based time-series
Multiple Radar Chart
Multiple series with fills
Radar with Dots
Dots marking vertices
Area Chart
Filled area visualization
Questions you might have
React A radar chart with a legend
A React radar chart comparing multiple series with a legend for series identification using ChartLegend with shadcn/ui and Recharts
React A radar chart with multiple data
A React radar chart comparing two datasets with overlapping polygons for desktop and mobile analysis using shadcn/ui and Recharts