3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

はじめに

この記事では、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) に変換されています。

image.png

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

image.png

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

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

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

X軸・Y軸のラベル表示

xAxisLabelyAxisLabelstring を渡すと、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

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

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

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

X軸・Y軸のラベル表示

XAxisYAxisprops にも 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

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

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

labelpositionangle を指定することで、ラベルと目盛りの被りや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

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

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

参照

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?