Custom trackball label template

[Jorge Valenzuela]

Hi there!
I'm using SfChart and I want to show a different background color in the trackball depending on the point. 

I attached a document with an example image of how I current display the trackball.

Kind regards!

Attachment: custom_trackball_ef72b39b.zip

[Suyamburaja Jayakumar]

Hi Jorge Valenzuela, 

 

Greetings from Syncfusion.  

 

We have achieved your requirement by using TrackballLabelTemplete and converter to different color for label based on the axis datapoint. Please refer the below code snippets.  

 

XAML: 

<ContentPage.Resources> 

        <ResourceDictionary> 

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

            <DataTemplate x:Key="axisLabelTemplate"> 

                <Label  x:Name="label" WidthRequest="50" HeightRequest="30" HorizontalTextAlignment="Center" Text="{Binding }" BackgroundColor="{Binding Converter={StaticResource colorConverter } }" TextColor="Black" FontSize ="15" /> 

            </DataTemplate> 

        </ResourceDictionary> 

    </ContentPage.Resources> 

 

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

    . . .  

            <chart:SfChart.PrimaryAxis> 

                <chart:CategoryAxis x:Name="primaryAxis" ShowTrackballInfo="True" EdgeLabelsDrawingMode="Fit" TrackballLabelTemplate="{StaticResource axisLabelTemplate}"> 

                    <chart:CategoryAxis.Title> 

                        <chart:ChartAxisTitle Text="Name"/> 

                    </chart:CategoryAxis.Title> 

                    <chart:CategoryAxis.TrackballLabelStyle> 

                        <chart:ChartTrackballAxisLabelStyle BackgroundColor="Transparent" BorderColor="Transparent"/> 

                    </chart:CategoryAxis.TrackballLabelStyle> 

                </chart:CategoryAxis> 

            </chart:SfChart.PrimaryAxis> 

       . . . .  

        </chart:SfChart> 

 

Converter: 

public class ColorConverter : IValueConverter 

    { 

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            if(value != null) 

            { 

                var Xvalue = value; 

                switch (Xvalue) 

                { 

                    case "May": 

                        return Color.Red; 

                    case "June": 

                        return Color.Yellow; 

                    case "July": 

                        return Color.Green; 

                    default: 

                        return Color.Blue; 

                } 

            } 

            return Color.Black; 

        } 

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            return value; 

        } 

    } 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/160430/ze/TrackballTemplate-1503233825.zip  

 

Please let us know if you need any further assistance. 

 

Regards, 

Suyamburaja J. 

[Jorge Valenzuela]

This solution is just what I needed!

Just one thing more, is there a way to remove the border of the label? I'm using the TrackballLabelTemplate in the LineSeries because I want to display the label next to the point circle, but doing this causes the template getting the color of the point.

This is my code:

<ContentPage.Resources> 

        <ResourceDictionary> 

              <DataTemplate x:Key="trackballTemplate">

                <StackLayout BackgroundColor="{Binding Converter={StaticResource colorConverter} }">

                    <Label Text="{Binding Value}" TextColor="{DynamicResource DefaultEntry}" FontSize ="15" VerticalTextAlignment="Center"/>

                    <Label Text="{Binding Year}" TextColor="{DynamicResource DefaultLabelPlaceholder}" FontSize ="15" VerticalTextAlignment="Center"/>

                </StackLayout>

            </DataTemplate>

        </ResourceDictionary>

    </ContentPage.Resources> 

 

      <chart:SfChart x:Name="SyncChart" Margin="20" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

                            <chart:SfChart.Legend/>

                            <chart:SfChart.ColorModel>

                                <chart:ChartColorModel Palette="Natural"></chart:ChartColorModel>

                            </chart:SfChart.ColorModel>

                            <chart:SfChart.PrimaryAxis>

                                <extensions:ChartAxisExtension x:Name="XAxis" EdgeLabelsVisibilityMode="AlwaysVisible" EdgeLabelsDrawingMode="Fit" >

                                    <chart:DateTimeAxis.LabelStyle >

                                        <chart:ChartAxisLabelStyle LabelFormat="hh:mm tt" >

                                        </chart:ChartAxisLabelStyle>

                                    </chart:DateTimeAxis.LabelStyle>

                                </extensions:ChartAxisExtension>

                            </chart:SfChart.PrimaryAxis>

                            <chart:SfChart.SecondaryAxis>

                                <chart:NumericalAxis x:Name="secondaryAxis" Minimum="0" Maximum="350" OpposedPosition="True"/>

                            </chart:SfChart.SecondaryAxis>

                            <chart:SfChart.ChartAnnotations>

                                <chart:HorizontalLineAnnotation Y1="70" CoordinateUnit="Axis" ShowAxisLabel="False" StrokeWidth="5" StrokeColor="{DynamicResource LowGlucose}" />

                                <chart:HorizontalLineAnnotation Y1="170" CoordinateUnit="Axis" ShowAxisLabel="False" StrokeWidth="5" StrokeColor="{DynamicResource HighGlucose}" />

                            </chart:SfChart.ChartAnnotations>

                            <chart:LineSeries x:Name="ReadingSeries" ItemsSource="{Binding FilteredPoints}" StrokeWidth="0" XBindingPath="Date" Opacity="0.5" YBindingPath="Value" Color="{DynamicResource NoGlucose}"

                                              TrackballLabelTemplate="{StaticResource trackballTemplate}">

                                <chart:LineSeries.DataMarker>

                                    <chart:ChartDataMarker ShowLabel="False" MarkerBorderColor="Transparent" ShowMarker="True" MarkerWidth="4" MarkerHeight="4"/>

                                </chart:LineSeries.DataMarker>

                            </chart:LineSeries>

                        </chart:SfChart>

[Jorge Valenzuela]

This solution is just what I needed!

Just one thing more, is there a way to remove the border of the label? I'm using the TrackballLabelTemplate in the LineSeries because I want to display the label next to the point circle, but doing this causes the template getting the color of the point.

This is my code:

<ContentPage.Resources> 

        <ResourceDictionary> 

              <DataTemplate x:Key="trackballTemplate">

                <StackLayout BackgroundColor="{Binding Converter={StaticResource colorConverter} }">

                    <Label Text="{Binding Value}" TextColor="{DynamicResource DefaultEntry}" FontSize ="15" VerticalTextAlignment="Center"/>

                    <Label Text="{Binding Year}" TextColor="{DynamicResource DefaultLabelPlaceholder}" FontSize ="15" VerticalTextAlignment="Center"/>

                </StackLayout>

            </DataTemplate>

        </ResourceDictionary>

    </ContentPage.Resources> 

 

      <chart:SfChart x:Name="SyncChart" Margin="20" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

                            <chart:SfChart.Legend/>

                            <chart:SfChart.ColorModel>

                                <chart:ChartColorModel Palette="Natural"></chart:ChartColorModel>

                            </chart:SfChart.ColorModel>

                            <chart:SfChart.PrimaryAxis>

                                <extensions:ChartAxisExtension x:Name="XAxis" EdgeLabelsVisibilityMode="AlwaysVisible" EdgeLabelsDrawingMode="Fit" >

                                    <chart:DateTimeAxis.LabelStyle >

                                        <chart:ChartAxisLabelStyle LabelFormat="hh:mm tt" >

                                        </chart:ChartAxisLabelStyle>

                                    </chart:DateTimeAxis.LabelStyle>

                                </extensions:ChartAxisExtension>

                            </chart:SfChart.PrimaryAxis>

                            <chart:SfChart.SecondaryAxis>

                                <chart:NumericalAxis x:Name="secondaryAxis" Minimum="0" Maximum="350" OpposedPosition="True"/>

                            </chart:SfChart.SecondaryAxis>

                            <chart:SfChart.ChartAnnotations>

                                <chart:HorizontalLineAnnotation Y1="70" CoordinateUnit="Axis" ShowAxisLabel="False" StrokeWidth="5" StrokeColor="{DynamicResource LowGlucose}" />

                                <chart:HorizontalLineAnnotation Y1="170" CoordinateUnit="Axis" ShowAxisLabel="False" StrokeWidth="5" StrokeColor="{DynamicResource HighGlucose}" />

                            </chart:SfChart.ChartAnnotations>

                            <chart:LineSeries x:Name="ReadingSeries" ItemsSource="{Binding FilteredPoints}" StrokeWidth="0" XBindingPath="Date" Opacity="0.5" YBindingPath="Value" Color="{DynamicResource NoGlucose}"

                                              TrackballLabelTemplate="{StaticResource trackballTemplate}">

                                <chart:LineSeries.DataMarker>

                                    <chart:ChartDataMarker ShowLabel="False" MarkerBorderColor="Transparent" ShowMarker="True" MarkerWidth="4" MarkerHeight="4"/>

                                </chart:LineSeries.DataMarker>

                            </chart:LineSeries>

                        </chart:SfChart>

I could fix the border of the label by creating another LineSeries with the same values as my current SeriesData but without having data marker to not display a second label, and I made all the points of my first Line Series not visible so the label wouldn't have a border anymore.

There are the two LineSeries. I'd just want to know if there's a better approach for this.

<chart:LineSeries x:Name="ReadingSeries" ItemsSource="{Binding FilteredPoints}" StrokeWidth="0" XBindingPath="Date" Opacity="0.5" YBindingPath="Value" Color="Transparent"

                                              TrackballLabelTemplate="{StaticResource trackballTemplate}">

                                <chart:LineSeries.DataMarker>

                                    <chart:ChartDataMarker ShowLabel="False" MarkerBorderColor="Transparent" ShowMarker="True" MarkerWidth="4" MarkerHeight="4"/>

                                </chart:LineSeries.DataMarker>

                            </chart:LineSeries>

                            <chart:LineSeries x:Name="VisibleReadingSeries" ItemsSource="{Binding FilteredPoints}" StrokeWidth="0" XBindingPath="Date" Opacity="0.5" YBindingPath="Value" Color="{DynamicResource DefaultEntry}" ShowTrackballInfo="False">

                                <chart:LineSeries.DataMarker>

                                    <chart:ChartDataMarker ShowLabel="False" MarkerBorderColor="Transparent" ShowMarker="True" MarkerWidth="4" MarkerHeight="4"/>

                                </chart:LineSeries.DataMarker>

                            </chart:LineSeries>

 

[Suyamburaja Jayakumar]

Hi Jorge Valenzuela, 

  

Thanks for the update.  

   

Your requirement has been achieved by setting the Transparent color to  the BorderColor and BackgroundColor property of Trackball LabelStyle property as per in below 

 

XAML: 

<chart:SfChart.ChartBehaviors> 

                    <chart:ChartTrackballBehavior > 

                        <chart:ChartTrackballBehavior.LabelStyle> 

                            <chart:ChartTrackballLabelStyle BorderColor="Transparent" BackgroundColor="Transparent"/> 

                        </chart:ChartTrackballBehavior.LabelStyle> 

                    </chart:ChartTrackballBehavior> 

                </chart:SfChart.ChartBehaviors> 

 

If you can also customize the trackball marker. please refer the below link,  MarkerStyle property provides options to customize the trackball markers. 

https://help.syncfusion.com/xamarin/charts/trackball#customizing-appearance  

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/160430/ze/TRACKB~1-2093938399.zip  

 

Screenshot: 

 

 

Please let us know if you need any further assistance. 

 

Regards, 

Suyamburaja J. 

 

[Jorge Valenzuela]

This worked for me!

Thank you again for your great support :)

Best regards!

[Hemalatha Marikumar]

Hi Jorge Valenzuela, 

 

Thanks for your update.  

 

Please let us know if you need any further assistance. 

 

Regards,
Hemalatha M.