React Area Chart with Legend

React Area Chart with Legend preview

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.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this chart for you — no copy-paste, no CLI:

use shadcnio to install the area-legend chart into my project

Related Components

FAQ