Is it possible set a template on the ChartTrackBall

[Dmitri]

Hi,

I would like to control the trackball color depending on the data that's represented. However in documentation I am only able to find how to apply a style to it, which is then static. Is it possible to set a template on the ChartTrackBall that can be binded to the underlying item 

[Gayathri Manickam]

Hi Dmitri, 

 

Greetings from Syncfusion. 

 

We can achieve your requirement "control the trackball color depending on the data point" by using the TrackballLabelTemplate with color converter. In that converter we can set specific color to the chart trackball based on data as like in the below code snippet. 

 

Code snippet[Xaml] : 

    <Grid.Resources> 

            <local:ColorConverter x:Key="colorConv"/> 

    </Grid.Resources> 

         

    <syncfusion:SfChart Header="Chart" Height="600" Width="800"> 

 

        <syncfusion:SfChart.Resources> 

            <DataTemplate x:Key="labelTemplate"> 

                <Border CornerRadius="2" BorderThickness="1" BorderBrush="Black" Padding="3" Margin="3" Background="{Binding Converter={StaticResource colorConv}, ConverterParameter=ValueY}" > 

                        <StackPanel> 

                            <StackPanel Orientation="Horizontal"> 

                                <TextBlock Foreground="Black" Text="XValue :"/> 

                                <TextBlock Foreground="Black" Text="{Binding ValueX}"/> 

                            </StackPanel> 

                            <StackPanel Orientation="Horizontal"> 

                                <TextBlock Foreground="Black" Text="YValue :"/> 

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

                            </StackPanel> 

                        </StackPanel> 

                    </Border> 

            </DataTemplate> 

        </syncfusion:SfChart.Resources>  

         ... 

        <syncfusion:SfChart.Behaviors> 

            <syncfusion:ChartTrackBallBehavior/> 

        </syncfusion:SfChart.Behaviors> 

 

            <!--Initialize the series for SfChart--> 

        <syncfusion:ColumnSeries Label="Products" ItemsSource="{Binding Data}" Interior="Gray" XBindingPath="Name" YBindingPath="Height" ShowTooltip="False" TrackBallLabelTemplate="{StaticResource labelTemplate}" > 

                ... 

          </syncfusion:ColumnSeries> 

 

        </syncfusion:SfChart> 

 

Code snippet[C#] : 

   public class ColorConverter : IValueConverter 

    { 

        public object Convert(object value, Type targetType, object parameter, string language) 

        { 

            var chartPointInfo = value as ChartPointInfo; 

            double yvalue = System.Convert.ToDouble(chartPointInfo.ValueY); 

            if (yvalue < 50) 

                return new SolidColorBrush(Colors.Red); 

            else if (yvalue < 100) 

                return new SolidColorBrush(Colors.Yellow); 

            else if (yvalue < 150) 

                return new SolidColorBrush(Colors.Orange); 

            else 

                return new SolidColorBrush(Colors.Green); 

        } 

 

        public object ConvertBack(object value, Type targetType, object parameter, string language) 

        { 

            throw new NotImplementedException(); 

        } 

    } 

 

For more details, please refer below UG, 

https://help.syncfusion.com/uwp/charts/interactive-features#trackballlabeltemplate 

 

Sample : https://www.syncfusion.com/downloads/support/forum/165985/ze/Getting_Started-463578593.zip 

 

Output :  

 

 

Please let us know if you need any further assistance in this. 

 

Thanks, 

Gayathri M. 

[Dmitri]

Great, thank you. That's not exactly what I was looking for, but it nudged me in the right direction. Here is what I ended up implementing, as an fyi:

<DataTemplate x:Key="LabelTemplate">

    <Ellipse 

        StrokeThickness="1" Width="14" Height="14" Margin="-7,0,0,0"

        Fill="{Binding Item.PointInteriorColor}" Stroke="{Binding Item.PointBorderColor}"/>

                        

</DataTemplate>

[Gayathri Manickam]

Hi Dmitri, 

 

Thank you for your update. We are glad to know that the solution works at your end. Please let us know if need any further assistance on this.   

 

Regards, 

Gayathri M.