IgcDataChartでは、seriesMouseLeftButtonDownイベントを使用することで、クリックしたシリーズのデータ要素の情報を取得することができます。
今回は、3 つのシリーズを持つバブルチャートを例に、バブルクリック時にデータ情報（シリーズ名・ラベル・X値・Y値・半径）を取得する方法を紹介します。
クリックしたデータ要素の情報を取得する
seriesMouseLeftButtonDownイベントの引数IgcDataChartMouseButtonEventArgsから、以下のプロパティでクリックされたバブルの情報を取得できます。
e.item: クリックされたデータ要素のオブジェクト（dataSource に設定したデータがそのまま取得できる）e.series: クリックされたシリーズの要素（name / title などの属性にアクセス可能）e.chartPosition: チャート上のクリック座標（ピクセル）
以下のように、e.itemからデータフィールド（x / y / r / label）を、e.seriesからシリーズ名やタイトルを取得できます。本記事では取得した情報は、document.getElementById()で取得した表示エリアの innerHTML に書き込むことで、画面下部に表示します。
const infoPanel = document.getElementById("info-panel") as HTMLDivElement;
chart.seriesMouseLeftButtonDown = (s: IgcSeriesViewerComponent, e: IgcDataChartMouseButtonEventArgs) => {
const item = e.item as { x: number; y: number; r: number };
const series = e.series as IgcBubbleSeriesComponent;
const chartPos = e.chartPosition;
infoPanel.innerHTML = `
<strong>=== クリックされたバブルの情報 ===</strong><br>
シリーズ名 : ${series.name}<br>
シリーズタイトル: ${series.title}<br>
x : ${item.x}<br>
y : ${item.y}<br>
r（半径） : ${item.r}<br>
チャート座標 : (${chartPos.x}, ${chartPos.y})
`;
};
実行結果
チャートの任意のバブルをクリックすると、クリックしたシリーズ名・タイトル・x・y・r（半径）・チャート座標がチャート下部のパネルに表示されます。
ダウンロード後、以下のコマンドで実行できます。
npm ci npm run dev
