Trackball Label - Add Header of Series

[Alexander]

Hello,

I have a SfChart with multiple series. As seen on the picture, the trackball label names the different data for the candles.

How can I achieve to add the FastLineSeries Name or Header in front of their corresponding value in the label?

https://imgur.com/a/JIifQGw

Greetings

Alexander

[Muneesh Kumar G]

Hi Alexander, 

 

Greetings from Syncfusion, we have analyzed your requirement and you can achieve this by setting TrackballLabelTemplate for series as per the below code snippet.  

 

Code snippet 

<Grid.Resources> 

            <DataTemplate x:Key="labelTemplate"> 

                <StackPanel Orientation="Horizontal"> 

                    <TextBlock Text="{Binding Series.Label}"/> 

                    <TextBlock Text=" : "/> 

                    <TextBlock Text="{Binding ValueY}"/> 

                </StackPanel> 

            </DataTemplate> 

            <DataTemplate x:Key="labelTemplate1"> 

                <StackPanel Orientation="Vertical"> 

                <StackPanel Orientation="Horizontal"> 

                    <TextBlock Text="High"/> 

                    <TextBlock Text=" : "/> 

                    <TextBlock Text="{Binding High}"/> 

                </StackPanel> 

                <StackPanel Orientation="Horizontal"> 

                    <TextBlock Text="Low"/> 

                    <TextBlock Text=" : "/> 

                    <TextBlock Text="{Binding Low}"/> 

                </StackPanel> 

                <StackPanel Orientation="Horizontal"> 

                    <TextBlock Text="Open"/> 

                    <TextBlock Text=" : "/> 

                    <TextBlock Text="{Binding Open}"/> 

                </StackPanel> 

                <StackPanel Orientation="Horizontal"> 

                    <TextBlock Text="Close"/> 

                    <TextBlock Text=" : "/> 

                    <TextBlock Text="{Binding Close}"/> 

                </StackPanel> 

                </StackPanel> 

            </DataTemplate> 

        </Grid.Resources> 

        <chart:SfChart x:Name="chart"> 

             

            <chart:SfChart.PrimaryAxis> 

                <chart:CategoryAxis /> 

            </chart:SfChart.PrimaryAxis> 

            <chart:SfChart.SecondaryAxis> 

                <chart:NumericalAxis/> 

            </chart:SfChart.SecondaryAxis> 

            <chart:SfChart.Behaviors> 

                <chart:ChartTrackBallBehavior LabelDisplayMode="GroupAllPoints"/> 

            </chart:SfChart.Behaviors> 

            <chart:CandleSeries  ItemsSource="{Binding StockPriceDetails}"  

                                 XBindingPath="Date"  High="High" Open="Open"   

                                 Close="Close" Low="Low"   

                           TrackBallLabelTemplate="{StaticResource labelTemplate1}" /> 

            <chart:FastLineSeries Label="Fast Series1"  

                             ItemsSource="{Binding StockPriceDetails}"  

                                XBindingPath="Date"  YBindingPath="YValue1"   

                            TrackBallLabelTemplate="{StaticResource labelTemplate}" /> 

            <chart:FastLineSeries Label="Fast Series2" 

                                ItemsSource="{Binding StockPriceDetails}"  

                                XBindingPath="Date"  YBindingPath="YValue2" 

                            TrackBallLabelTemplate="{StaticResource labelTemplate}" /> 

        </chart:SfChart> 

 

We have prepared a sample based on this, please find the sample from the following location.  

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/143563/ze/UWP_Sample-1462948959.zip 

 

Screenshot: 

 

 

UG: https://help.syncfusion.com/wpf/sfchart/interactive-features#trackball 

 

Hope it helps you.  

  

Thanks,  

Muneesh Kumar G.  

 

[Alexander]

Hello,

sorry for my delayed answer.

This worked for me.

However I noticed a little bug, which is also displayed in your screenshot:

You've inserted a " : " as divider between the series label and the value (or hloc).

In the showed Display, the space after : gets cut, it only displays " :".

Adding more than one space does not change the label.

Greetings

Alexander

[Muneesh Kumar G]

Hi Alexander,  

 

We have analyzed the query and we are able to reproduce the reported problem at our end. However, you can resolve this by using single TextBlock with multiple Run section as per the below code snippet.  

 

Code snippet 

<Grid.Resources> 

            <DataTemplate x:Key="labelTemplate"> 

                <StackPanel Orientation="Horizontal"> 

                    <TextBlock> 

                        <Run Text="{Binding Series.Label}"/> 

                        <Run Text=" : "/> 

                        <Run Text="{Binding ValueY}"/> 

                    </TextBlock> 

                    

                </StackPanel> 

            </DataTemplate> 

            <DataTemplate x:Key="labelTemplate1"> 

                <StackPanel Orientation="Vertical"> 

                    <TextBlock> 

                        <Run Text="High"/> 

                        <Run Text=" : "/> 

                        <Run Text="{Binding High}"/> 

                    </TextBlock> 

                    <TextBlock> 

                        <Run Text="Low"/> 

                        <Run Text=" : "/> 

                        <Run Text="{Binding Low}"/> 

                    </TextBlock> 

                    <TextBlock> 

                        <Run Text="Open"/> 

                        <Run Text=" : "/> 

                        <Run Text="{Binding Open}"/> 

                    </TextBlock> 

                    <TextBlock> 

                        <Run Text="Close"/> 

                        <Run Text=" : "/> 

                        <Run Text="{Binding Close}"/> 

                    </TextBlock> 

                </StackPanel> 

            </DataTemplate> 

        </Grid.Resources> 

 

 

Screenshot: 

 

 

Hope it helps you.

Regards,   

Muneesh Kumar G. 

[Alexander]

Hello,

I have an additional question.

My candle data has also values for the volume. Is there any way to show this value in the Trackball Label?

I tried to simply add it with

<TextBlock> 

                        <Run Text="Volume"/> 

                        <Run Text=" : "/> 

                        <Run Text="{Binding Volume}"/> 

 </TextBlock> 

However this does not work, as the chart has no dependency on this.
What do I have to add to extend FastCandleBitmapSeries?

Greetings
Alexander

[Muneesh Kumar G]

Hi Alexander, 

 

Thanks for your update, we have analyzed your requirement and we would like to inform you that we don’t have Volume property in our TrackballLabelTemplate’s DataContext.  

 

However, you can show the model Volume property in trackball label by using Item property as per the below code snippet.  

 

Code snippet 

<DataTemplate x:Key="labelTemplate1"> 

                <StackPanel Orientation="Vertical"> 

                    <TextBlock> 

                        <Run Text="High"/> 

                        <Run Text=" : "/> 

                        <Run Text="{Binding High}"/> 

                    </TextBlock> 

                    <TextBlock> 

                        <Run Text="Low"/> 

                        <Run Text=" : "/> 

                        <Run Text="{Binding Low}"/> 

                    </TextBlock> 

                    <TextBlock> 

                        <Run Text="Open"/> 

                        <Run Text=" : "/> 

                        <Run Text="{Binding Open}"/> 

                    </TextBlock> 

                    <TextBlock> 

                        <Run Text="Close"/> 

                        <Run Text=" : "/> 

                        <Run Text="{Binding Close}"/> 

                    </TextBlock> 

                    <TextBlock> 

                        <Run Text="Volume"/> 

                        <Run Text=" : "/> 

                        <Run Text="{Binding Item.Volume}"/> 

                    </TextBlock> 

                </StackPanel> 

            </DataTemplate> 

 

Hope it helps you.  

 

Thanks, 

Muneesh Kumar G.