# Multi Line Chart With Legend — React Chart Component

> Several SVG lines draw in together; legend buttons toggle a series and the y-axis rescales while the remaining lines morph to fit.

- Category: [Charts](https://pixelpapa.com/components/charts.md)
- Tags: chart, line, legend, toggle, svg
- Dependencies: motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/charts/chart-line-multi-legend

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/chart-line-multi-legend
```

The file is written to `components/pixelpapa/chart-line-multi-legend.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/charts/chart-line-multi-legend.

## AI prompt

```text
Add the "Multi Line Chart With Legend" component from PixelPapa UI to this project.

What it is: Several SVG lines draw in together; legend buttons toggle a series and the y-axis rescales while the remaining lines morph to fit.
Category: Charts. Depends on: motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/chart-line-multi-legend
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/chart-line-multi-legend.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/chart-line-multi-legend.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/chart-line-multi-legend" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More charts

- [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.