Multiple lines in one Recharts chart

Comparing several series on one chart is a common need. In Recharts each series is its own Line component inside the same LineChart.

All Recharts examples Recharts: usage and stats

Multiple lines in one Recharts chart: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

One Line per series. The chart renders a Line for uv and one for pv, each with its own dataKey and stroke colour, from the same data rows. [1]
Toggle a series. The checkboxes keep a shown object in state. A series is drawn only when its flag is true, by leaving its Line out of the JSX otherwise. [1]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { useState } from "react";
import { LineChart, Line, XAxis } from "recharts";

const data = [
  { name: "Jan", uv: 400, pv: 240 },
  { name: "Feb", uv: 300, pv: 456 },
  { name: "Mar", uv: 520, pv: 380 },
  { name: "Apr", uv: 278, pv: 390 },
  { name: "May", uv: 489, pv: 480 },
  { name: "Jun", uv: 390, pv: 610 },
];

const series = [
  { key: "uv", label: "Unique visitors", color: "#ff7300" },
  { key: "pv", label: "Page views", color: "#387908" },
];

export default function App() {
  const [shown, setShown] = useState({ uv: true, pv: true });
  const toggle = (key) => setShown((s) => ({ ...s, [key]: !s[key] }));

  return (
    <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "#111", fontFamily: "system-ui, sans-serif" }}>
      <div style={{ background: "#fafafa", color: "#222", padding: "16px 20px", borderRadius: 14, boxShadow: "0 10px 30px rgba(0,0,0,.5)" }}>
        <div style={{ display: "flex", gap: 18, marginBottom: 6, fontSize: 14 }}>
          {series.map((s) => (
            <label key={s.key} style={{ color: s.color, fontWeight: 600, cursor: "pointer" }}>
              <input type="checkbox" checked={shown[s.key]} onChange={() => toggle(s.key)} /> {s.label}
            </label>
          ))}
        </div>
        <LineChart width={520} height={270} data={data}>
          <XAxis dataKey="name" />
          {/* each Line is its own component, so it can be rendered or left out */}
          {series.map((s) => shown[s.key] && (
            <Line key={s.key} type="monotone" dataKey={s.key} stroke={s.color} />
          ))}
        </LineChart>
      </div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Untick one of the checkboxes to remove that line from the chart. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with recharts 3.10.1, react 19.3.0, react-dom 19.3.0, react-is 19.3.0. Needs WebGL.

More Recharts examples

A simple line chart in Recharts Tooltip and grid in a Recharts line chart A live-updating line chart in Recharts

Sources

Recharts README (GitHub)

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with Recharts? Ask AgentGid →