Tooltip and grid in a Recharts line chart

Grid lines and a hover tooltip make a chart readable. In Recharts both are separate components you place inside the chart.

All Recharts examples Recharts: usage and stats

Tooltip and grid in a Recharts line 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

Add the pieces you need. <CartesianGrid /> and <Tooltip /> sit next to XAxis and the two Line components inside LineChart. [1]
Style the grid. CartesianGrid takes a stroke colour, as in the README example; here it is a light grey that shows on the white card. [1]
Composition. Remove the Tooltip line and the chart still renders, just without the hover box. [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 { LineChart, Line, XAxis, Tooltip, CartesianGrid } from "recharts";

const data = [
  { name: "Week 1", signups: 32, churn: 8 },
  { name: "Week 2", signups: 45, churn: 12 },
  { name: "Week 3", signups: 41, churn: 9 },
  { name: "Week 4", signups: 64, churn: 14 },
  { name: "Week 5", signups: 58, churn: 11 },
  { name: "Week 6", signups: 77, churn: 10 },
];

export default function App() {
  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)" }}>
        <h3 style={{ margin: "0 0 8px", fontSize: 17 }}>Signups vs churn (hover the chart)</h3>
        <LineChart width={520} height={270} data={data}>
          <CartesianGrid stroke="#e3e3e3" />
          <XAxis dataKey="name" />
          <Tooltip />
          <Line type="monotone" dataKey="signups" stroke="#387908" />
          <Line type="monotone" dataKey="churn" stroke="#d62728" />
        </LineChart>
      </div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Hover over the chart to see the tooltip with both values for that week. 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 Multiple lines in one Recharts 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 →