Blazor チャート ツールチップ

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

Blazor チャート ツールチップのタイプ

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

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

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

Blazor チャート ツールチップ テンプレート

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

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

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

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

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

その他のリソース

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

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

API リファレンス

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

• ToolTipType

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

• IgbDataToolTipLayer
• IgbItemToolTipLayer
• IgbCategoryToolTipLayer
• ShowDefaultToolTip