Web Components チャート ツールチップ

Web Components チャートでは、ツールチップはバインドされたデータに関する詳細を提供し、エンドユーザーがデータ ポイントにカーソルを合わせるとポップアップで表示されます。ツールチップは、IgcCategoryChartComponent、IgcFinancialChartComponent、および IgcDataChartComponent コンポーネントでサポートされています。

Web Components チャート ツールチップのタイプ

次の例は、開始時に toolTipType プロパティを "Default" に設定することでツールチップが有効にした縦棒チャートを示しています。このプロパティはサンプルで構成可能であり、次のいずれかのオプションに設定できます。

toolTipType プロパティは構成可能であり、次のいずれかのオプションに設定できます。

プロパティの値	説明
Default ツールチップ	ツールチップは、ポインタがその上に位置されると、単一の項目のツールチップを表示します。
Data ツールチップ	チャートのすべてのシリーズのデータ ツールチップを表示します。
Item ツールチップ	ツールチップは、ポインタが位置されているカテゴリの各データ項目のツールチップを表示します。
Category ツールチップ	ツールチップはポインターがデータ ポイント上に配置されたときにすべてのデータ ポイントに対してツールチップを表示できます。

Web Components チャート ツールチップ テンプレート

組み込みタイプのツールチップがいずれも要件に一致しない場合は、独自のツールチップを作成して、シリーズ タイトル、データ値、および軸値を表示およびスタイル設定できます。次のセクションでは、さまざまなタイプの Web Components チャートでこれを行う方法を示します。

カテゴリ チャートのカスタム ツールチップ

この例は、Web Components IgcCategoryChartComponent コントロールですべてのシリーズのカスタム ツールチップを作成する方法を示しています。Web Components IgcFinancialChartComponent コントロールのカスタム ツールチップにも同じロジックを適用できることに注意してください。

データ チャートのカスタム ツールチップ

この例は、Web Components データ チャート コントロールで各シリーズのカスタム ツールチップを作成する方法を示しています。

その他のリソース

関連するチャート機能の詳細については、以下のトピックを参照してください。

• チャート注釈
• チャート マーカー

API リファレンス

IgcCategoryChartComponent コンポーネントと IgcFinancialChartComponent コンポーネントは、次の API プロパティを共有します:

• toolTipType

IgcDataChartComponent コンポーネントでは、以下の API コンポーネントおよびプロパティを使用できます:

• IgcDataToolTipLayerComponent
• IgcItemToolTipLayerComponent
• IgcCategoryToolTipLayerComponent
• ShowDefaultToolTip