【MantineCharts】Next.js App Router で MantineCharts を利用する

はじめに

この記事では、React 向けコンポーネントライブラリである Mantine に含まれるチャート（グラフ）機能の MantineCharts を Next.js App Router で利用する方法を記載します。

@mantine/charts に大部分は Recharts というReact 向けのチャートライブラリをベースに作成されていますが、@mantine/charts でカバーしきれない機能は Recharts も利用する必要があります。

Recharts に比べ、少ないコード量でチャートを実装できます。Recharts を利用したチャートの実装方法については、以下の記事で記載しています。

開発環境

開発環境は以下の通りです。

• Windows 11
• Next.js 14.2.4
• React 18.3.1
• TypeScript 5.5.2
• @mantine/core 7.13.2
• @mantine/hooks 7.13.2
• @mantine/charts 7.13.2
• Recharts 2.13.0

事前準備

Next.js で Mantine を利用できるようにしておきます。
詳しい手順は以下の記事に記載しています。

インストール

まず、必要なライブラリをインストールします。

npm install @mantine/charts recharts@2

インストールが完了したら、アプリケーションのルートでスタイルをインポートしておきます。

src/app/layout.tsx

import "@mantine/charts/styles.css";

折れ線グラフコンポーネントの実装

インストールした MantineCharts を利用して、シンプルな折れ線グラフコンポーネントを作成します。

表示するデータは以下の通りです。

data.ts

const data = [
  { name: "A", value: 400 },
  { name: "B", value: 200 },
  { name: "C", value: 300 },
  { name: "D", value: 350 },
  { name: "E", value: 300 },

LineChart コンポーネントに必要な props を渡すことで実装できます。

• h: チャート全体の高さ
• w: チャート全体の横幅
• data: チャートに表示するデータ
• dataKey: X軸に表示すデータオブジェクトのキー
• series: name（折れ線に表示するデータオブジェクトのキー）と color（折れ線の色）の配列

src/app/page.tsx

import { LineChart } from "@mantine/charts";

const data = [
  { name: "A", value: 400 },
  { name: "B", value: 200 },
  { name: "C", value: 300 },
  { name: "D", value: 350 },
  { name: "E", value: 300 },
];

export default function Home() {
  return (
    <LineChart
      h={400}
      w={600}
      data={data}
      dataKey="name"
      series={[{ name: "value", color: "blue" }]}
    />
  );
}

折れ線グラフが表示されました。

チャートにマウスオーバーするとツールチップが表示されます。

参照

• Getting started
• LineChart