IgrDataChart – ホバーしたシリーズの情報を取得したい

seriesMouseEnter / seriesMouseLeave イベントを利用することで、ホバーしたシリーズのデータを取得することが可能です。

チャートの設定

ホバーしたデータ要素を取得するには、IgrDataChartのseriesMouseEnterイベントをハンドルします。イベント引数IgrChartMouseEventArgsから以下の情報を取得できます。

• e.item : ホバーされたデータ要素のオブジェクト
• e.series : ホバーされたシリーズ情報（ title など）

以下の例では、ホバー時に 年度・シリーズ名・値 を取得し、画面下部に表示します。

const handleSeriesMouseEnter = (
  s: IgrSeriesViewer,
  e: IgrChartMouseEventArgs
) => {
  const series = e.series as IgrLineSeries;
  const item = e.item;
  if (series && item) {
    const seriesTitle = series.title;
    const year = item.year;
    const valuePath = series.valueMemberPath;
    const value = item[valuePath];

    setHoverInfo(`${seriesTitle} - ${year}: ${value}`);
    series.thickness = 5;
  }
};

また、series.thicknessプロパティを変更することで、ホバー中のシリーズの線を太さを変更できます。上記の例では、ホバー時に thickness = 5 に変更しています。

ホバーが外れたときにシリーズの太さと表示をリセットするため、seriesMouseLeave もハンドルします。ここでは thickness = 2 に戻しています。

const handleSeriesMouseLeave = (
  s: IgrSeriesViewer,
  e: IgrChartMouseEventArgs
) => {
  const series = e.series as IgrLineSeries;
  if (series) {
    setHoverInfo("");
    series.thickness = 2;
  }
};

チャートにイベントを設定する方法は以下の通りです。

<IgrDataChart
  ...
  seriesMouseEnter={handleSeriesMouseEnter}
  seriesMouseLeave={handleSeriesMouseLeave}
>
</IgrDataChart>

実行結果

チャートの任意のシリーズにマウスをホバーすると、ホバーした シリーズ名・年度・値（単位付き） がチャート下部に表示されます。
マウスがシリーズから離れると表示はクリアされます。

ダウンロード後、以下のコマンドで実行できます。

npm ci
npm run dev