List not binding in Tooltip

[Sweety Rani]

Hi,

In tooltip template of Column chart I want to show a list , but the StackLayout taken in that template doesn't render . Code is below :

<chart:ColumnSeries.TooltipTemplate>

                                                    <StackLayout Orientation="Vertical" WidthRequest="100" HeightRequest="50">

                                                                <StackLayout Orientation="Horizontal">

                                                                        <Image Source="Icon.png" WidthRequest="10" HeightRequest="10" Margin="0,2,0,0" VerticalOptions="Start" HorizontalOptions="Start" />

                                                                            

                                                                                    <StackLayout Orientation="Vertical">

                                                                                        <StackLayout Orientation="Horizontal">

                                                                                                <Label Text="Month :" />

                                                                                                <Label Text="Month"/>

                                                                                        </StackLayout>

                                                                                        <StackLayout Orientation="Horizontal">

                                                                                                <Label Text="Month :" />

                                                                                                <Label Text="Month"/>

                                                                                        </StackLayout>

                                                                                    </StackLayout>

                                                                  </StackLayout>

                                                      </StackLayout>

                                                 </chart:ColumnSeries.TooltipTemplate>

[Michael Prabhu M]

Hi Sweety, 

 

Greetings from Syncfusion, we have analyzed the reported scenario and we can see from the code snippet that you have missed to add DataTemplate inside the TooltipTemplate. Since TooltipTemplate is of type DataTemplate you need to add this as like in below code snippet. 

 

Code Snippet Xaml 

<chart:ColumnSeries.TooltipTemplate> 

                            <DataTemplate> 

                                <StackLayout Orientation="Horizontal"> 

                                    <Image Source="icon.png" WidthRequest="30" HeightRequest="40" Margin="0,2,0,0" VerticalOptions="Center" HorizontalOptions="Center" /> 

                                    <StackLayout Orientation="Vertical"> 

                                        <StackLayout Orientation="Horizontal"> 

                                            <Label Text="Month:" /> 

                                            <Label Text="Month"/> 

                                        </StackLayout> 

                                        <StackLayout Orientation="Horizontal"> 

                                            <Label Text="Month:" /> 

                                            <Label Text="Month"/> 

                                        </StackLayout> 

                                    </StackLayout> 

                                </StackLayout> 

                            </DataTemplate> 

                        </chart:ColumnSeries.TooltipTemplate> 

 

 

We have also prepared a simple sample for this and it can be downloaded from the link below. 

 

Sample: 139903 

 

Hope this helps. 

 

Thanks, 

Michael 

[Sweety Rani]

Hi,

The code missed some of the lines .the tooltip template code snippet is like this :

<chart:ColumnSeries.TooltipTemplate>

<DataTemplate>

<ListView  BindingContext="{x:Reference columchart}" ItemsSource="{Binding Data1}" VerticalOptions="FillAndExpand">

                                                         <ListView.ItemTemplate>

<DataTemplate>

<ViewCell>

                                                    <StackLayout Orientation="Vertical" WidthRequest="100" HeightRequest="50">

                                                                <StackLayout Orientation="Horizontal">

                                                                        <Image Source="Icon.png" WidthRequest="10" HeightRequest="10" Margin="0,2,0,0" VerticalOptions="Start" HorizontalOptions="Start" />

                                                                            

                                                                                    <StackLayout Orientation="Vertical">

                                                                                        <StackLayout Orientation="Horizontal">

                                                                                                <Label Text="Month :" />

                                                                                                <Label Text="Month"/>

                                                                                        </StackLayout>

                                                                                     

                                                                                    </StackLayout>

                                                                  </StackLayout>

                                                      </StackLayout>

</ViewCell> 

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</DataTemplate>

                                                 </chart:ColumnSeries.TooltipTemplate>

[Sweety Rani]

Hi,

The issue is not resolved yet, we are waiting for the reply

[Michael Prabhu M]

Hi Sweety, 

 

Thanks for your patience, we have prepared a sample and it can be downloaded from the link below. 

 

Sample: 139903_sample 

 

In the above sample we have achieved your requirement by setting ListView inside a Frame as a TooltipTemplate and the position of the tooltip which you requested in the forum #139918 is also customized by overriding it in the CustomRenderer and setting tooltip position as desired like left, right, top, bottom as like in below code snippet. 

 

Code snippet [XAML]:   

 <chart:BarSeries.TooltipTemplate>
                            <DataTemplate x:Name="template">
                                <Frame WidthRequest="200" HeightRequest="200">
                                    <ListView x:Name="list" ItemsSource="{Binding BarData}" >
                                        <ListView.BindingContext>
                                            <local:ViewModel></local:ViewModel>
                                        </ListView.BindingContext>

                                        <ListView.ItemTemplate>
                                            <DataTemplate>
                                                <ViewCell>
                                                    <StackLayout Orientation="Horizontal">
                                                        <Image Source="icon.png" WidthRequest="30" HeightRequest="40" Margin="0,2,0,0" VerticalOptions="Start" HorizontalOptions="Start" />
                                                        <StackLayout Orientation="Vertical">
                                                            <StackLayout Orientation="Horizontal">
                                                                <Label Text="XValue : "></Label>
                                                                <Label Text="{Binding Category}"></Label>
                                                            </StackLayout>
                                                            <StackLayout Orientation="Horizontal">
                                                                <Label Text="YValue : "></Label>
                                                                <Label Text="{Binding YValue}"></Label>
                                                            </StackLayout>
                                                        </StackLayout>
                                                    </StackLayout>
                                                </ViewCell>
                                            </DataTemplate>
                                        </ListView.ItemTemplate>

                                    </ListView>
                                </Frame>
                            </DataTemplate>
                        </chart:BarSeries.TooltipTemplate> 

 

Code snippet for Android in MainActivity.cs[C#] 

 

Xamarin.Forms.Forms.ViewInitialized += Forms_ViewInitialized; 

 

 private void Forms_ViewInitialized(object sender, Xamarin.Forms.ViewInitializedEventArgs e)
 {
            if (e.NativeView is SfChart)
            {
                SfChart chart = e.NativeView as SfChart;

                for (int i = 0; i < chart.Behaviors.Count; i++)
                {
                    var tooltip = chart.Behaviors[i] as ChartTooltipBehavior;

                    tooltip.TooltipPosition = ChartElementPosition.Right;
                }
            }
  } 

  

 

Code snippet for Android in AppDelegate.cs[C#] 

 

 Xamarin.Forms.Forms.ViewInitialized += Forms_ViewInitialized; 

 

 private void Forms_ViewInitialized(object sender, Xamarin.Forms.ViewInitializedEventArgs e)
{
            if (e.NativeView is SFChart)
            {
                SFChart chart = e.NativeView as SFChart;

                for (int i = 0; i < chart.Behaviors.Count; i++)
                {
                    var tooltip = chart.Behaviors[i] as SFChartTooltipBehavior;

                    tooltip.Position = SFChartElementPosition.Right;
                }
           }
} 

 

 

Hope this helps. 

 

Thanks, 

Michael