react-chartjs-2 in Next.js: typed Bar and Line charts in the App Router

react-chartjs-2 is the React wrapper for Chart.js, and in the Next.js App Router it needs three things: a "use client" file, ChartJS.register with the parts your chart uses, and a wrapper div with a height. This page builds a typed Bar and Line chart with react-chartjs-2 5.3.1 and Chart.js 4.6.1, reads dark theme colours from CSS variables, feeds the data from a Server Component and adds a label and a fallback table for screen readers. It also says when our animated Analytics Dashboard V1 fits better and when Chart.js is the right tool.

One payment$9

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

react-chartjs-2 Bar chart in a Next.js client component

components/charts/sales-bar-chart.tsx

"use client";
import { useMemo } from "react";
import {
  Chart as ChartJS,
  BarElement,
  CategoryScale,
  LinearScale,
  Tooltip,
  Legend,
  type ChartData,
  type ChartOptions,
} from "chart.js";
import { Bar } from "react-chartjs-2";
import { useChartTheme } from "./use-chart-theme";

// <Bar> registers BarController itself. Everything else the chart touches is yours to register.
// Leave out CategoryScale and Chart.js throws: "category" is not a registered scale.
ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip, Legend);

export type SalesPoint = { label: string; sales: number };

export function SalesBarChart({ points, title = "Sales" }: { points: SalesPoint[]; title?: string }) {
  const t = useChartTheme();

  const data: ChartData<"bar", number[], string> = useMemo(
    () => ({
      labels: points.map((p) => p.label),
      datasets: [
        {
          label: title, // the dataset key: same label, the bars animate to the new values
          data: points.map((p) => p.sales),
          backgroundColor: t.bar,
          borderRadius: 8,
          maxBarThickness: 48,
        },
      ],
    }),
    [points, title, t.bar],
  );

  const options: ChartOptions<"bar"> = useMemo(
    () => ({
      responsive: true,
      maintainAspectRatio: false, // the wrapper div sets the height
      plugins: {
        legend: { display: false },
        tooltip: { callbacks: { label: (ctx) => " " + (ctx.parsed.y ?? 0).toLocaleString("en-US") } },
      },
      scales: {
        x: { grid: { display: false }, ticks: { color: t.text } },
        y: { beginAtZero: true, grid: { color: t.grid }, border: { display: false }, ticks: { color: t.text } },
      },
    }),
    [t.text, t.grid],
  );

  const total = points.reduce((s, p) => s + p.sales, 0);

  return (
    <div className="relative h-72 w-full">
      <Bar
        data={data}
        options={options}
        role="img"
        aria-label={title + " by period, " + points.length + " bars, total " + total.toLocaleString("en-US")}
        fallbackContent={
          <table>
            <caption>{title}</caption>
            <tbody>
              {points.map((p) => (
                <tr key={p.label}>
                  <th scope="row">{p.label}</th>
                  <td>{p.sales}</td>
                </tr>
              ))}
            </tbody>
          </table>
        }
      />
    </div>
  );
}

components/charts/use-chart-theme.ts

"use client";
import { useEffect, useState } from "react";

export type ChartTheme = { bar: string; line: string; fill: string; grid: string; text: string };

// Canvas can't read var(--x), so read the values once the page is in the browser.
const FALLBACK: ChartTheme = { bar: "#8b6cff", line: "#c6ff3d", fill: "rgba(198,255,61,0.12)", grid: "rgba(255,255,255,0.06)", text: "#a1a1aa" };

function read(): ChartTheme {
  const css = getComputedStyle(document.documentElement);
  const v = (name: string, fallback: string) => css.getPropertyValue(name).trim() || fallback;
  return {
    bar: v("--chart-bar", FALLBACK.bar),
    line: v("--chart-line", FALLBACK.line),
    fill: v("--chart-fill", FALLBACK.fill),
    grid: v("--chart-grid", FALLBACK.grid),
    text: v("--chart-text", FALLBACK.text),
  };
}

export function useChartTheme(): ChartTheme {
  const [theme, setTheme] = useState<ChartTheme>(FALLBACK);
  useEffect(() => {
    setTheme(read());
    // Re-read when a theme toggle flips the class on <html>.
    const mo = new MutationObserver(() => setTheme(read()));
    mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme"] });
    return () => mo.disconnect();
  }, []);
  return theme;
}

app/globals.css

/* Chart colours live in CSS, next to the rest of your theme */
:root {
  --chart-bar: #7c5cff;
  --chart-line: #22d3ee;
  --chart-fill: rgba(34, 211, 238, 0.15);
  --chart-grid: rgba(0, 0, 0, 0.08);
  --chart-text: #52525b;
}
.dark {
  --chart-bar: #8b6cff;
  --chart-line: #c6ff3d;
  --chart-fill: rgba(198, 255, 61, 0.12);
  --chart-grid: rgba(255, 255, 255, 0.06);
  --chart-text: #a1a1aa;
}

components/charts/visits-line-chart.tsx

"use client";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend,
  type ChartData,
  type ChartOptions,
} from "chart.js";
import { Line } from "react-chartjs-2";
import { useChartTheme } from "./use-chart-theme";

// A line needs LineElement AND PointElement. fill: true also needs the Filler plugin.
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip, Legend);

export function VisitsLineChart({ labels, visits, signups }: { labels: string[]; visits: number[]; signups: number[] }) {
  const t = useChartTheme();

  const data: ChartData<"line"> = {
    labels,
    datasets: [
      { label: "Visits", data: visits, borderColor: t.line, backgroundColor: t.fill, fill: true, tension: 0.35, pointRadius: 0 },
      { label: "Sign-ups", data: signups, borderColor: t.bar, backgroundColor: t.bar, tension: 0.35, pointRadius: 3, yAxisID: "y1" },
    ],
  };

  const options: ChartOptions<"line"> = {
    responsive: true,
    maintainAspectRatio: false,
    interaction: { mode: "index", intersect: false }, // one tooltip for both lines
    plugins: { legend: { labels: { color: t.text, boxWidth: 12 } } },
    scales: {
      x: { grid: { display: false }, ticks: { color: t.text } },
      y: { beginAtZero: true, grid: { color: t.grid }, ticks: { color: t.text } },
      y1: { position: "right", beginAtZero: true, grid: { drawOnChartArea: false }, ticks: { color: t.text } },
    },
  };

  return (
    <div className="relative h-64 w-full sm:h-80">
      <Line data={data} options={options} role="img" aria-label="Visits and sign-ups per day" fallbackContent={<p>Visits and sign-ups per day for the last {labels.length} days.</p>} />
    </div>
  );
}

app/dashboard/data.ts

// Stand-in for your database or API. Runs on the server only.
export type Range = "week" | "month";

const WEEK = [
  { label: "Mon", sales: 4200 }, { label: "Tue", sales: 5800 }, { label: "Wed", sales: 3600 },
  { label: "Thu", sales: 7100 }, { label: "Fri", sales: 8800 }, { label: "Sat", sales: 6400 }, { label: "Sun", sales: 9500 },
];
const MONTH = [
  { label: "W1", sales: 28100 }, { label: "W2", sales: 31900 }, { label: "W3", sales: 26400 }, { label: "W4", sales: 35200 },
];

export async function getSales(range: Range) {
  return range === "month" ? MONTH : WEEK;
}

export async function getVisits() {
  return {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    visits: [1180, 1320, 990, 1460, 1710, 1250, 1630],
    signups: [21, 30, 17, 34, 41, 26, 38],
  };
}

app/dashboard/page.tsx

import Link from "next/link";
import { SalesBarChart } from "@/components/charts/sales-bar-chart";
import { VisitsLineChart } from "@/components/charts/visits-line-chart";
import { getSales, getVisits, type Range } from "./data";

// A Server Component: it reads the data and hands plain arrays to the client charts.
export default async function DashboardPage({ searchParams }: { searchParams: Promise<{ range?: string }> }) {
  const { range: raw } = await searchParams;
  const range: Range = raw === "month" ? "month" : "week";
  const [sales, visits] = await Promise.all([getSales(range), getVisits()]);

  return (
    <main className="mx-auto grid max-w-5xl gap-6 p-6 text-zinc-100">
      <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-5">
        <div className="mb-4 flex items-center justify-between">
          <h2 className="text-lg font-semibold">Sales</h2>
          <nav className="flex gap-2 text-sm">
            {(["week", "month"] as const).map((r) => (
              <Link key={r} href={"?range=" + r} scroll={false} aria-current={r === range ? "page" : undefined}
                className="rounded-md border border-white/10 px-3 py-1 aria-[current=page]:bg-white aria-[current=page]:text-black">
                {r === "week" ? "Week" : "Month"}
              </Link>
            ))}
          </nav>
        </div>
        <SalesBarChart points={sales} title="Sales" />
      </section>
      <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-5">
        <h2 className="mb-4 text-lg font-semibold">Traffic</h2>
        <VisitsLineChart {...visits} />
      </section>
    </main>
  );
}

Good to know

Version check, Oct 26 2026: react-chartjs-2 5.3.1 (peer chart.js ^4.1.1, React 16.8 to 19) and chart.js 4.6.1. Every file on this page passed tsc --noEmit and next build on Next.js 15.5.28, React 19.1.1 and TypeScript 5.9.3, and drew both charts in headless Chromium at 390 and 1440 with no page errors.
"use client" goes on every file that renders a react-chartjs-2 component. The package ships no client directive of its own, so a Server Component that renders <Bar> fails the build with "TypeError: (0 , d7.useRef) is not a function". The page itself stays a Server Component and passes plain arrays down.
The typed components register their own controller: <Bar> registers BarController and <Line> registers LineController. You still register the elements, scales and plugins: BarElement, CategoryScale and LinearScale for a bar chart, plus Tooltip and Legend if you want them.
Give the chart a dedicated wrapper with position: relative and a height (relative h-72 here), and set maintainAspectRatio: false. Without a sized wrapper the canvas falls back to its default 150px height, which is exactly what we measured when the wrapper's styles didn't load.
Canvas can't read var(--chart-bar). useChartTheme reads the CSS variables with getComputedStyle after mount and again when the class on <html> changes, so a theme toggle repaints the chart.
Keep a label on every dataset. react-chartjs-2 matches datasets by label (or the key you give datasetIdKey), so when new data arrives with the same label the bars animate to the new values instead of the chart being rebuilt.
In Chart.js 4.6.1 ctx.parsed.y in a tooltip callback is typed number | null, so under strict TypeScript ctx.parsed.y.toLocaleString() fails with TS18047. Write (ctx.parsed.y ?? 0).

"category" is not a registered scale: what to register for each chart

Chart.js 4 is tree-shakable, so nothing is drawn until you register it. Leave out a scale and the chart throws at runtime, not at build time: we rendered a Bar with only BarElement registered and Chromium logged the error "category" is not a registered scale. The fix is one line: ChartJS.register(CategoryScale). "linear" is the y axis (LinearScale), "time" and "timeseries" need TimeScale or TimeSeriesScale plus a date adapter.
Bar chart: BarElement, CategoryScale, LinearScale. Line chart: LineElement, PointElement, CategoryScale, LinearScale, and Filler if any dataset has fill. Pie and Doughnut: ArcElement, no scales. Radar: LineElement, PointElement, RadialLinearScale. Add Tooltip, Legend and Title only if you show them. With react-chartjs-2's typed components (Bar, Line, Pie and the rest) the controller is registered for you; with the generic <Chart type="bar"> you register BarController too.
Register at the top of the client file that draws the chart, as the files above do. Registering the same item twice is harmless, so two chart files can both list CategoryScale. Registration lives in the browser bundle of the pages that import it, so a chart on its own route needs its own register call.

Recharts animation props, if you'd rather use SVG charts

chart.js/auto or tree-shaking

import "chart.js/auto" registers every controller, element, scale and plugin in one line. It is the quickest way to make an example work and the end of every "is not a registered scale" error, but you ship all of Chart.js to every page that imports it. For a dashboard with two or three chart types, the explicit register list is short and keeps the bundle to what you draw.
A sensible split: chart.js/auto while you prototype, then swap to the explicit imports before you ship. Both compile the same with react-chartjs-2; the component code doesn't change.

components/charts/quick-pie.tsx

"use client";
// The quick route: chart.js/auto registers every controller, element, scale and plugin.
// Fine for a prototype; you ship all of Chart.js instead of the parts you use.
import "chart.js/auto";
import { Pie } from "react-chartjs-2";

export function QuickPie({ labels, values }: { labels: string[]; values: number[] }) {
  return (
    <div className="relative mx-auto aspect-square w-full max-w-xs">
      <Pie data={{ labels, datasets: [{ label: "Share", data: values }] }} options={{ maintainAspectRatio: false }} aria-label="Share by channel" role="img" />
    </div>
  );
}

Do you need dynamic import with ssr: false?

Not for react-chartjs-2 itself. A "use client" component still renders on the server, but react-chartjs-2 only outputs a <canvas> there and creates the Chart.js instance in an effect, in the browser. The server HTML of our dashboard page held both canvases and the fallback table, and the charts drew after hydration with no errors, so no dynamic import was needed.
Reach for next/dynamic with ssr: false only when something you import touches window or document while the module loads, for example a plugin that does so at import time. Put that dynamic() call in a Client Component: in a Server Component, next build stops with "`ssr: false` is not allowed with `next/dynamic` in Server Components. Please move it into a Client Component."
Anything that reads the browser, like getComputedStyle for the theme colours, belongs in useEffect, as useChartTheme does. Reading it in the render body is what actually breaks on the server.

Updating the chart from a Server Component prop

The dashboard page is an async Server Component. It reads ?range= from searchParams, loads the data and passes plain arrays to SalesBarChart. The Week and Month links change the URL, the server renders new props, and react-chartjs-2 updates the existing chart: we clicked Month in Chromium and the same canvas went from 7 bars to 4 with its aria-label updated, no remount.
That in-place update works because the dataset keeps its label. react-chartjs-2 copies the new values into the matching dataset and calls chart.update(). Pass redraw to throw the chart away and draw it fresh on every change instead, or updateMode="none" to skip the animation.
Only serialisable data crosses from server to client: numbers, strings, arrays, plain objects. Build colours, callbacks and options inside the client component, as the files above do.

Chart.js or Analytics Dashboard V1?

Analytics Dashboard V1 doesn't use Chart.js or any chart library. Its sales chart is seven Framer Motion divs whose heights spring in with a stagger, next to three KPI cards that count up, a goal ring drawn in SVG and a Week/Month switch with a sliding pill. It looks alive in a hero, a demo or a client dashboard with a handful of numbers.
What it does not do: it takes seven bar heights as 0 to 100 percentages per range, not your values, and draws no axes, no grid and no legend. The hover tooltip shows a figure worked out from the range's revenue and the bar height, not a number you pass, and it only appears on mouse hover. There is no line, pie or scatter chart, no third range, and no slot to drop a Chart.js chart into; it is one component on a fixed 1000 by 660 stage that scales down to fit.
Keep Chart.js when you need many chart types, real axes and tooltips with your own numbers, hundreds or thousands of points (canvas handles that better than DOM bars), or zoom and annotation plugins. Pick the piece when the screen shows a few headline numbers and one bar chart, and the motion matters more than the data detail.
They also sit side by side. The card look is plain Tailwind classes in the piece's source (#11131D card, #1F2334 border, 20px radius), so you can wrap your Chart.js charts in the same card and put them under the dashboard. That copies the style; it doesn't put Chart.js inside the piece.

Analytics Dashboard V1: the animated dashboard

components/charts/chart-card.tsx

import type { ReactNode } from "react";

// The same card look as Analytics Dashboard V1 (#11131D card, #1F2334 border, 20px radius),
// wrapped around any chart. It is a copy of the style, not a slot in the piece.
export function ChartCard({ title, children }: { title: string; children: ReactNode }) {
  return (
    <section className="rounded-[20px] border border-[#1F2334] bg-[#11131D] px-[22px] py-[18px] text-[#EEF0F6]">
      <h3 className="mb-2 text-[17px] font-medium text-[#7D8299]">{title}</h3>
      {children}
    </section>
  );
}

app/cards/page.tsx

import { ChartCard } from "@/components/charts/chart-card";
import { VisitsLineChart } from "@/components/charts/visits-line-chart";
import { QuickPie } from "@/components/charts/quick-pie";
import { getVisits } from "../dashboard/data";

export default async function CardsPage() {
  const visits = await getVisits();
  return (
    <main className="mx-auto grid max-w-5xl gap-5 bg-[#0B0D14] p-6 md:grid-cols-[1.7fr_1fr]">
      <ChartCard title="Visits this week">
        <VisitsLineChart {...visits} />
      </ChartCard>
      <ChartCard title="Traffic sources">
        <QuickPie labels={["Search", "Social", "Direct"]} values={[52, 27, 21]} />
      </ChartCard>
    </main>
  );
}

react-chartjs-2 not working in Next.js? Check these

"(0 , d7.useRef) is not a function" during next build (the letters before useRef change from build to build): a Server Component is rendering a react-chartjs-2 component. Move the chart into a file that starts with "use client".
Uncaught Error: "category" is not a registered scale (or "linear", "time", "logarithmic"): register that scale, or import chart.js/auto. See the list above.
The chart is blurry, keeps shrinking or is 150px tall: the canvas has no dedicated, relatively positioned parent with a size. Chart.js's responsive docs warn against sizing the canvas itself; size the wrapper div and set maintainAspectRatio: false.
Two lines merge into one after a tooltip or a data change: the datasets have no label, so react-chartjs-2 can't tell them apart. Give each a label, or pass datasetIdKey with your own id field.
getElementAtEvent does not exist on Bar: react-chartjs-2 4 removed the getElementAtEvent, getElementsAtEvent and getDatasetAtEvent props. Import the functions with the same names from react-chartjs-2, keep a ref to the chart and call getElementAtEvent(chartRef.current, event) in onClick.
TypeScript rejects options on <Line>: ChartOptions<"bar"> and ChartOptions<"line"> are different types. Type each chart's options with its own chart type, as the files above do.

TradingView Lightweight Charts in Next.js, for candlesticks

Install

Copy from the zipPut react/src/components into src/, then npm i chart.js react-chartjs-2 for the charts on this page; Analytics Dashboard V1 needs framer-motion (npm i framer-motion).
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

data: { week, month }: revenue, orders, conversion, % changes, goal %, 7 bar heights (0 to 100) and their labels per range
title / subtitle: header text
startDelay: ms before the first count-up

How qodesign compares

qodesign vs shadcnblocksshadcnblocks is best for: assembling whole pages from ready-made sections.
qodesign vs Kokonut UIKokonut UI is best for: landing page sections and templates installed by an AI agent.
qodesign vs TremorTremor is best for: dashboards and charts: area, bar, line and donut charts, trackers, KPI cards, tables.

All comparisons, with prices read on each library's own site.

From the blog: Animated SVG Line Chart in React Without a Chart Library (Draw-On Effect)

From the blog: Accessible Tooltip in React and Tailwind CSS Without a Library

Questions

Does react-chartjs-2 work with the Next.js App Router?

Yes. Put "use client" at the top of the file that renders the chart, register the Chart.js parts it uses, and render it from any page, Server Components included. We built it with Next.js 15.5.28, React 19.1.1, react-chartjs-2 5.3.1 and chart.js 4.6.1.

How do I fix "category" is not a registered scale?

Import CategoryScale from chart.js and add it to ChartJS.register. A bar or line chart also needs LinearScale for the y axis. import "chart.js/auto" registers everything if you don't mind the bigger bundle.

Do I need next/dynamic with ssr: false for Chart.js?

No. react-chartjs-2 renders an empty canvas on the server and creates the chart in the browser. Use ssr: false only for a library that touches window when it is imported, and call it from a Client Component.

Can Chart.js use my Tailwind or CSS variable colours?

Not directly, because canvas doesn't resolve var(). Read the variables with getComputedStyle after mount, as useChartTheme does, and pass the values into the dataset and scale colours.

Does Analytics Dashboard V1 use Chart.js?

No. Its bars are animated divs built with Framer Motion, with count-up KPIs and an SVG goal ring. Use Chart.js for axes, many chart types or big datasets, and the piece for an animated headline dashboard.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.