Rechartsでのカスタムラベルの使用方法

1. インストールとインポート: まず、Rechartsをプロジェクトにインストールし、必要なコンポーネントをインポートします。

npm install recharts

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

2. カスタムラベルの定義: グラフのX軸やY軸に表示するラベルをカスタマイズするために、以下のようにtickFormatterプロパティを使用します。

const formatXAxis = (tickItem) => {
  // X軸のラベルをカスタマイズするコードをここに記述します
  // 例: 日付のフォーマットを変更する
  return tickItem;
};
const formatYAxis = (tickItem) => {
  // Y軸のラベルをカスタマイズするコードをここに記述します
  return tickItem;
};

3. グラフコンポーネントの設定: 実際のグラフを作成するために、Rechartsのコンポーネントを使用します。以下は、線グラフの例です。

const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 30 },
  // データの例
];
<LineChart width={400} height={300} data={data}>
  <Line type="monotone" dataKey="value" stroke="#8884d8" />
  <XAxis dataKey="name" tickFormatter={formatXAxis} />
  <YAxis tickFormatter={formatYAxis} />
  <CartesianGrid stroke="#ccc" />
  <Tooltip />
  <Legend />
</LineChart>

上記のコードでは、formatXAxisとformatYAxis関数を使用して、X軸とY軸のラベルをカスタマイズしています。これらの関数内で必要な処理を行い、適切な形式のラベルを返すようにしてください。