【MantineCharts】チャートのX軸・Y軸のラベルをカスタマイズする

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

https://mantine.dev/charts/scatter-chart/

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

- 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 を利用できるようにしておきます。
詳しい手順は以下の記事に記載しています。

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

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

<details><summary>data</summary>

```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 },
    ],
  },
];
```

</details>

スキャッターチャートの実装に必要な最低限の 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`) に変換されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/e2804ed4-083e-d1f7-fcf5-24c96d8b7224.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/bc07ef8d-ed3a-2386-b66f-1dfb766d37ae.png)


:::note
`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" }}
    />
  );
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/719bd320-3b5d-6bc3-7e42-ae95aa8d5c3e.png)

:::

# `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` と表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/7981d422-4dd5-7b9e-7847-8a46f9794651.png)

## 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"
    />
  );
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/bd6a6f95-ffbd-ab5c-65ca-c6439d158fd9.png)

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

https://recharts.org/en-US/api/XAxis

https://recharts.org/en-US/api/YAxis

## X軸・Y軸のラベル表示
`XAxis` 、`YAxis` の `props` にも [`label`](https://recharts.org/en-US/api/XAxis#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軸のラベルは横向きに表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/09b492f8-0b6e-8762-bae6-96b77283cd0e.png)

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

https://recharts.org/en-US/api/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",
        },
      }}
    />
  );
}

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/5d597afd-6188-e195-38ef-7f10bd5c6f54.png)

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

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

# 参照
- [Label](https://recharts.org/en-US/api/Label)
- [ScatterChart](https://mantine.dev/charts/scatter-chart/)
- [XAxis](https://recharts.org/en-US/api/XAxis)
- [YAxis](https://recharts.org/en-US/api/YAxis)