IgbDataChart – ツールチップをカスタマイズしたい

IgbDataChartでは、TooltipTemplateを使用してツールチップの表示内容をカスタマイズできます。本記事では、折れ線チャートの既定のツールチップを無効化し、データ項目の値に単位を付けて表示するツールチップの作成方法を解説します。

IgbDataChart の設定

まず、チャートにバインドするデータと、参照に必要なフィールドを用意します。本記事では、データ1件を表す DataItem クラスに、カテゴリ（X軸）を表す Index と、その値（Y軸）を表す Value の2つのプロパティを定義します。これらは、後ほどツールチップに表示する項目となります。

@code {
    public class DataItem
    {
        public int Index { get; set; }
        public double? Value { get; set; }
    }

    private List<DataItem> _data = new()
    {
       new(){ Index = 0, Value = 12 },
       ....
    };
    ....
}

ツールチップのカスタマイズ

IgbDataChart に IgbLineSeries を追加し、ツールチップをカスタマイズします。IgbLineSeries のShowDefaultTooltipをfalseに設定して既定のツールチップを無効化し、TooltipTemplateにカスタムした表示内容を定義します。

<IgbDataChart ....>
  <IgbLineSeries
    Title="Sample Data"
    DataSource="_data"
    XAxisName="xAxis"
    YAxisName="yAxis"
    ShowDefaultTooltip="false"
    ValueMemberPath="@nameof(DataItem.Value)"
  >
    <TooltipTemplate>
      @if (context?.Item is DataItem item)
      {
        <div>
          <strong>Sample Data</strong>
        </div>
        <div>
          <strong>Index:</strong> @item.Index
        </div>
        <div>
          <strong>Value:</strong> @item.Value 件
        </div>
      }
    </TooltipTemplate>
  </IgbLineSeries>
</IgbDataChart>;

<TooltipTemplate> は IgbLineSeries の子要素として配置することで、そのシリーズ専用のツールチップ テンプレートとして宣言します。テンプレート内では、既定のコンテキスト変数context（型は IgbDataContext）を通じて、ホバーされたデータ ポイントの元データにcontext.Itemプロパティとしてアクセスできます。

実行結果

この実装により、グラフ上のデータ ポイントにマウスを乗せると、Index と単位付きの Value を表示するカスタムツールチップが表示されます。