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

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

XamDataChart で吹き出しレイヤー (コールアウトレイヤー)を表示するサンプルをご紹介します。

XAML / C# のどちらでも設定できます。本記事では XAML での設定方法のみ記載していますが、C# で設定する場合は、参考URLをご参照ください。

<ig:XamDataChart x:Name="DataChart" IsHorizontalZoomEnabled="True" IsVerticalZoomEnabled="True" >
    <ig:XamDataChart.Series>
    	... 省略 ... 
        <ig:CalloutLayer  
            CollisionChannel="MultipleCallouts"
            TargetSeries="{x:Reference SeriesUSA}"
            ItemsSource="{Binding CalloutsUSA}"
            IsAutoCalloutBehaviorEnabled="False"
            UseValueForAutoCalloutLabels="False" 
            XMemberPath="DataItem.Index"
            YMemberPath="DataItem.ValueInMln"
            LabelMemberPath="Label"
            ContentMemberPath="Content"
            CalloutTextColor="White"
            CalloutStrokeThickness="1.5">
        </ig:CalloutLayer>
    </ig:XamDataChart.Series>
</ig:XamDataChart>

参考URL

コールアウト レイヤー

https://jp.infragistics.com/help/wpf/datachart-calloutlayer

サンプル