はじめに

この記事では、React 向けコンポーネントライブラリである Mantine に含まれるチャート（グラフ）機能の MantineCharts でチャートのX軸・Y軸をカスタマイズする方法を記載します。

開発環境

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

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

事前準備

X軸・Y軸のラベルのカスタマイズの前に2点事前準備をします。

MantineCharts の利用準備

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

スキャッターチャートを実装する

カスタマイズ対象のチャートとして、シンプルなスキャッターチャート（散布図）を実装します。

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

data

data.ts

export const data = [
  {
    color: "blue.5",
    name: "Group 1",
    data: [
      { age: 25, BMI: 20 },
      { age: 30, BMI: 22 },
      { age: 35, BMI: 18 },
      { age: 40, BMI: 25 },
      { age: 45, BMI: 30 },
      { age: 28, BMI: 15 },
      { age: 22, BMI: 12 },
      { age: 50, BMI: 28 },
      { age: 32, BMI: 19 },
      { age: 48, BMI: 31 },
      { age: 26, BMI: 24 },
      { age: 38, BMI: 27 },
      { age: 42, BMI: 29 },
      { age: 29, BMI: 16 },
      { age: 34, BMI: 23 },
      { age: 44, BMI: 33 },
      { age: 23, BMI: 14 },
      { age: 37, BMI: 26 },
      { age: 49, BMI: 34 },
      { age: 27, BMI: 17 },
      { age: 41, BMI: 32 },
      { age: 31, BMI: 21 },
      { age: 46, BMI: 35 },
      { age: 24, BMI: 13 },
      { age: 33, BMI: 22 },
      { age: 39, BMI: 28 },
      { age: 47, BMI: 30 },
      { age: 36, BMI: 25 },
      { age: 43, BMI: 29 },
      { age: 21, BMI: 11 },
    ],
  },
  {
    color: "red.5",
    name: "Group 2",
    data: [
      { age: 26, BMI: 21 },
      { age: 31, BMI: 24 },
      { age: 37, BMI: 19 },
      { age: 42, BMI: 27 },
      { age: 29, BMI: 32 },
      { age: 35, BMI: 18 },
      { age: 40, BMI: 23 },
      { age: 45, BMI: 30 },
      { age: 27, BMI: 15 },
      { age: 33, BMI: 20 },
      { age: 38, BMI: 25 },
      { age: 43, BMI: 29 },
      { age: 30, BMI: 16 },
      { age: 36, BMI: 22 },
      { age: 41, BMI: 28 },
      { age: 46, BMI: 33 },
      { age: 28, BMI: 17 },
      { age: 34, BMI: 22 },
      { age: 39, BMI: 26 },
      { age: 44, BMI: 31 },
      { age: 32, BMI: 18 },
      { age: 38, BMI: 23 },
      { age: 43, BMI: 28 },
      { age: 48, BMI: 35 },
      { age: 25, BMI: 14 },
      { age: 31, BMI: 20 },
      { age: 36, BMI: 25 },
      { age: 41, BMI: 30 },
      { age: 29, BMI: 16 },
    ],
  },
];

スキャッターチャートの実装に必要な最低限の props は以下の通りです。

h: チャート全体の高さ
data: チャートに表示するデータ
dataKey: X軸・Y軸に表示すデータオブジェクトのキー

上記の props を ScatterChart コンポーネントに渡します。

page.tsx

import { ScatterChart } from "@mantine/charts";
import { data } from "./data";

export default function Demo() {
  return <ScatterChart h={400} data={data} dataKey={{ x: "age", y: "BMI" }} />;
}

スキャッターチャートが表示されます。
h に渡した 400 は px から rem (25rem) に変換されています。

また、ドットにマウスオーバーするとツールチップとX軸・Y軸方向への点線が表示されます。
ツールチップ内には、data の name の値と age、BMI の値が表示されます。

ScatterChart コンポーネントに w を渡すと、チャート全体の横幅が指定できます。

page.tsx

import { ScatterChart } from "@mantine/charts";
import { data } from "../page";

export default function Demo() {
  return (
    <ScatterChart
      h={400}
      w={600}
      data={data}
      dataKey={{ x: "age", y: "BMI" }}
    />
  );
}

`xAxisLabel` / `yAxisLabel` props を利用したカスタマイズ

事前準備ができたので、X軸・Y軸のラベルのカスタマイズ方法を記載します。
まずは xAxisLabel / yAxisLabel props を利用したX軸・Y軸のラベルのカスタマイズ方法を記載します。

X軸・Y軸のラベル表示

xAxisLabel、yAxisLabel に string を渡すと、X軸・Y軸にラベルが表示できます。

page.tsx

import { ScatterChart } from "@mantine/charts";
import { data } from "./data";

export default function Demo() {
  return (
    <ScatterChart
      h={400}
      w={600}
      data={data}
      dataKey={{ x: "age", y: "BMI" }}
      xAxisLabel="age"
      yAxisLabel="BMI"
    />
  );
}

X軸に age、Y軸に BMI と表示されます。

X軸・Y軸のラベルスタイス

Styles API を使ったカスタマイズもできます。
以下では、Selector の axisLabel でフォントサイズを xx-large にしています。

ScatterChart.module.css

.axisLabel {
  font-size: xx-large;
}

page.tsx

import { ScatterChart } from "@mantine/charts";
import { data } from "./data";
import classes from "./css_modules/ScatterChart.module.css";

export default function Demo() {
  return (
    <ScatterChart
      h={400}
      w={600}
      classNames={{
        axisLabel: classes.axisLabel,
      }}
      data={data}
      dataKey={{ x: "age", y: "BMI" }}
      xAxisLabel="age"
      yAxisLabel="BMI"
    />
  );
}

`xAxisProps` / `yAxisProps` props を利用したカスタマイズ

次は xAxisProps / yAxisProps props を利用したカスタマイズ方法を記載します。
xAxisProps / yAxisProps を通して Recharts の XAxis、YAxis コンポーネントに渡す props を指定できます。

X軸・Y軸のラベル表示

XAxis 、YAxis の props にも label は存在します。そのため、以下の実装でもX軸・Y軸にラベルを表示できます。

page.tsx

import { ScatterChart } from "@mantine/charts";
import { data } from "./data";

export default function Demo() {
  return (
    <ScatterChart
      h={400}
      w={600}
      data={data}
      dataKey={{ x: "age", y: "BMI" }}
      xAxisProps={{ label: "age" }}
      yAxisProps={{ label: "BMI" }}
    />
  );
}

ただ、X軸・Y軸ともにラベルが目盛りと表示が被ってしまいます。
また、Y軸のラベルは横向きに表示されます。

X軸・Y軸のラベルスタイル

ラベルのスタイルの調整は、XAxis、YAxis props の label に渡す props で調整可能です。
詳しい内容は、Label コンポーネントのドキュメントに記載があります。

label に position や angle を指定することで、ラベルと目盛りの被りやY軸ラベルが横向きになっていた問題を解消できます。

page.tsx

import { ScatterChart } from "@mantine/charts";
import { data } from "./data";

export default function Demo() {
  return (
    <ScatterChart
      h={400}
      w={600}
      data={data}
      dataKey={{ x: "age", y: "BMI" }}
      xAxisProps={{
        label: {
          value: "age",
          position: "bottom",
        },
      }}
      yAxisProps={{
        label: {
          value: "BMI",
          angle: -90,
          position: "insideLeft",
        },
      }}
    />
  );
}

xAxisLabel / yAxisLabel と同じように Styles API を利用したカスタマイズも可能です。Selector の axis や axisLabel を利用できます。

https://mantine.dev/charts/scatter-chart/?t=styles-api

参照