IgbCategoryChart – ツールチップに表示されるシリーズのラベルを別の文字列に変える方法

ツールチップに表示されるシリーズのラベルはシリーズの Title の値が使用されます。IgbCategoryChart の場合、シリーズの Title の値はバインドされた該当データのクラスのプロパティ名が使用されます。

これを別の文字列に変更したい場合は、SeriesAddedScript にてシリーズの title の値を変更してください。

例えば、IgbCategoryChart にバインドするデータのクラスが次のような定義の場合で、

// バインドするデータのクラス定義
public class CountryRenewableElectricityItem
{
    public string Year { get; set; } = "";
    public double S1 { get; set; }
    public double S2 { get; set; }
    public double S3 { get; set; }
    public double S4 { get; set; }
}

“S1” をツールチップ上では “America” と表示したいとします。

その場合は、SeriesAddedScript で JavaScript の function を指定し、

@* razor側（App.razor） *@
<IgbCategoryChart ...
      SeriesAddedScript="OnSeriesAddedScript">
</IgbCategoryChart>

JavaScript にて title を変更します。

const OnSeriesAddedScript = (chart, args) => {
    switch (args.series.title) {
        case 'S1':
            args.series.title = "America";
            break;
    }
}

igRegisterScript("OnSeriesAddedScript", OnSeriesAddedScript, false);

実行結果