はじめに この記事では、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 を利用できるようにしておきます。 詳しい手順は以下の記事に記載しています。 スキャッターチャートを実装する カスタ