Line chart in React Chart.js 2

Line charts plot values as connected points, which suits trends over time. The Line component from react-chartjs-2 renders a Chart.js line chart in React.

All React Chart.js 2 examples React Chart.js 2: usage and stats

Line chart in React Chart.js 2: 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

Register line and point elements. Line charts draw a LineElement between PointElements on a category and a linear scale. The example registers those four pieces plus the tooltip and legend. [1]
Compare two datasets. Each object in datasets is one line with its own label and color. Here the two lines compare the same months across two years. [1]
Style each line. tension curves the line, borderDash makes it dashed and pointRadius sets the dot size. The first line uses a low tension, the second a higher one. [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 { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend } from "chart.js";
import { Line } from "react-chartjs-2";

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend);

const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
  datasets: [
    {
      label: "2025",
      data: [65, 59, 80, 81, 56, 55, 40],
      borderColor: "rgb(75, 192, 192)",
      backgroundColor: "rgb(75, 192, 192)",
      tension: 0.1,
    },
    {
      label: "2026",
      data: [28, 48, 40, 19, 86, 27, 90],
      borderColor: "rgb(255, 99, 132)",
      backgroundColor: "rgb(255, 99, 132)",
      tension: 0.4,
      borderDash: [6, 4],
      pointRadius: 5,
    },
  ],
};

const options = { animation: false };

const page = { minHeight: "100vh", background: "#111", display: "flex", alignItems: "center",
  justifyContent: "center", fontFamily: "system-ui, sans-serif" };
const card = { background: "#fff", color: "#1f2937", borderRadius: 12, padding: 16, boxSizing: "border-box" };

export default function App() {
  return (
    <div style={page}>
      <div style={{ ...card, width: 540 }}>
        <Line data={data} options={options} />
      </div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Set tension to 0 on both datasets to get straight segments between the points. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with react-chartjs-2 5.3.1, react 19.3.0, react-dom 19.3.0, chart.js 4.5.1. Needs WebGL.

More React Chart.js 2 examples

Doughnut chart in React Chart.js 2 Bar chart in React Chart.js 2 Stacked bar chart in React Chart.js 2 Horizontal bar chart in React Chart.js 2

Sources

Docs: docs › latest › charts › line.html

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 React Chart.js 2? Ask AgentGid →