XamCategoryChart でコールアウトレイヤーを表示する

Ultimate UI for Xamarin 20.1.35 バージョン時点での情報に基づいています。

XamCategoryChart において CalloutsVisible を用いてコールアウト注釈を表示する方法をご紹介します。

<ig:XamCategoryChart
            ItemsSource="{Binding Data}"
            x:Name="catChart"
            Margin="10,100"
            ChartType="Column"
            IncludedProperties="Name,Temperature"
            CalloutsVisible="True"
            CalloutsItemsSource="{Binding Data}"
            CalloutsXMemberPath="ID"
            CalloutsYMemberPath="Temperature"
            CalloutsLabelMemberPath="Label"
/>

CalloutsXMemberPath および CalloutsYMemberPath の設定によって注釈の表示位置を指定しています。

private void CreateData()
{
    Data = new ObservableCollection<DataItem>();
    Data.Add(new DataItem
    {
        ID = 0,
        Name = "Jan",
        Temperature = 5.6,
        Label = "Winter"
    });
    Data.Add(new DataItem
    {
        ID = 1,
        Name = "Feb",
        Temperature = 7.2,
        Label = "Winter"
    });
    Data.Add(new DataItem
    {
        ID = 2,
        Name = "Mar",
        Temperature = 10.6,
        Label = "Spring"
    });
    /*（略）*/
    Data.Add(new DataItem
    {
        ID = 11,
        Name = "Dec",
        Temperature =  8.5,
        Label = "Winter"
    });

}

public class DataItem
{
    public int ID { get; set; }
    public string Name { get; set; }
    public double Temperature { get; set; }
    public string Label { get; set; }
}

上記のような月毎の平均気温を表すデータを用意しました。

上記のサンプルでは季節を表す注釈をチャート上に表示しています。

サンプル