# 9 React Chart Components (No Library, Tailwind)

> Dependency-free animated charts drawn in SVG: area, grouped bar, multi-line with legend toggles, donut, radial gauge, stacked bars, heat grid, funnel and inline sparklines. Each has hover tooltips and an accessible text alternative.

3 of 9 free (the rest with PixelPapa Pro), built with Tailwind CSS and Motion, installable with the shadcn CLI.

- [Area Chart Gradient](https://pixelpapa.com/components/charts/chart-area-gradient.md) (Pro): A smooth SVG area chart that draws its line on mount, fades in a gradient fill and snaps a crosshair tooltip to the nearest point.
- [Donut Chart Segments](https://pixelpapa.com/components/charts/chart-donut-segments.md): A donut whose segments sweep in one after another; hovering a segment or its legend row thickens it and swaps the centre total for that slice.
- [Funnel Steps Chart](https://pixelpapa.com/components/charts/chart-funnel-steps.md) (Pro): A flowing horizontal funnel: each stage tapers into the next with a bezier, stages fade in left to right and hovering one shows its drop-off.
- [Grouped Bar Chart](https://pixelpapa.com/components/charts/chart-bar-grouped.md) (Pro): Side-by-side SVG bars per category that grow from the baseline in a stagger, with a group highlight and a tooltip comparing every series.
- [Heat Grid Week by Hour](https://pixelpapa.com/components/charts/chart-heat-grid.md) (Pro): A 7×24 SVG heatmap whose cells ripple in diagonally; hover or arrow-key between cells for a snapped tooltip, with peak hour called out.
- [Inline Sparkline](https://pixelpapa.com/components/charts/chart-sparkline-inline.md): A tiny table-cell sparkline that draws itself on mount, colours by trend and snaps a value bubble to the nearest point on hover.
- [Multi Line Chart With Legend](https://pixelpapa.com/components/charts/chart-line-multi-legend.md) (Pro): Several SVG lines draw in together; legend buttons toggle a series and the y-axis rescales while the remaining lines morph to fit.
- [Radial Gauge](https://pixelpapa.com/components/charts/chart-radial-gauge.md): A 240° SVG gauge whose arc, end cap and centre number all ride one spring, changing colour as the value crosses its zones.
- [Stacked Horizontal Bar Chart](https://pixelpapa.com/components/charts/chart-stacked-bar-horizontal.md) (Pro): Horizontal stacked bars that wipe in row by row; hovering a segment or legend item isolates that series across every row and shows its share.