We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Trackball Label - Add Header of Series

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?


Greetings
Alexander

5 Replies

MK Muneesh Kumar G Syncfusion Team March 27, 2019 05:14 AM UTC

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.  
 
 
Screenshot: 
 
 
 
Hope it helps you.  
  
Thanks,  
Muneesh Kumar G.  
 



AL Alexander April 4, 2019 02:57 PM UTC

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


MK Muneesh Kumar G Syncfusion Team April 5, 2019 09:45 AM UTC

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. 



AL Alexander April 16, 2019 04:51 PM UTC

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



MK Muneesh Kumar G Syncfusion Team April 17, 2019 05:50 AM UTC

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon