React Area Chart with Legend

Got multiple data series and need users to know which is which? This React area chart adds a legend below the chart that labels each stacked area. The shadcn/ui ChartLegend component pulls labels and colors from your chartConfig, so you define everything in one place. Desktop and mobile traffic stack on top of each other, and the legend makes it clear which color means what. Simple addition, but it makes a huge difference for readability—especially when you have more than two series or when colors alone aren't enough context.

React Area Chart with Legend preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/area-legend.json

npx shadcn@latest add https://www.shadcn.io/r/area-legend.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/area-legend.json

bunx shadcn@latest add https://www.shadcn.io/r/area-legend.json

Related Components

FAQ