Spice up Your Xamarin.Forms App with Interactive Features of Syncfusion Charts

Introduction

Looking at raw data and trying to make a decision is very tedious. Visual representations such as charts and graphs overcome this problem. These visual representations, when powered by interaction support, are a piece of cake to understand. In this blog, I am going to walk you through the rich and highly interactive features of Syncfusion Xamarin Charts. They are:

• Tooltip
• Selection
• Trackball
• Zooming and panning

They help users understand data in a number of ways. Users can experiment with that data’s presentation to answer questions about it with the best visuals. Let’s see these controls’ interactive capabilities.

Tooltip

The Syncfusion Xamarin Charts tooltip is one of the control’s most valuable features. Users can easily customize the tooltips, which means we can define additional chart point information, customize the default appearance, place images, and more. So there’s almost no limit to the possibilities. Refer to our user guide for more details.

XAML

<chart:SfChart x:Name="chart">
  <chart:SfChart.Resources>
     <ResourceDictionary>
            <DataTemplate x:Key="toolTipTemplate1">
                <StackLayout BackgroundColor="#404041"> 
                    <Label Text="Franch" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="White" FontAttributes="Bold" FontFamily="Helvetica" Margin="0" FontSize="12" Grid.Row="0" />
                    <BoxView Grid.Row="1" Color="White" HeightRequest="0.75" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
                    <StackLayout Orientation="Horizontal"  VerticalOptions="FillAndExpand" BackgroundColor="#404041" Spacing="0" Padding="3" Margin="0">
                        <Label Text="{Binding Value}" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand" TextColor="#CCCCCC" FontAttributes="Bold" FontFamily="Helvetica" FontSize="12" />
                        <Label Text="{Binding Size,StringFormat=' :  {0}%'}" VerticalTextAlignment="Center" HorizontalOptions="EndAndExpand" TextColor="White" FontAttributes="Bold" FontFamily="Helvetica" Margin="0" FontSize="12" />
                    </StackLayout>
                </StackLayout>
            </DataTemplate>
        </ResourceDictionary>
    </chart:SfChart.Resources>
    .....
    .....
    .....
    <chart:SfChart.Series>
        <chart:LineSeries x:Name="lineSeries1" TooltipTemplate="{StaticResource toolTipTemplate1}"  StrokeWidth="3" ItemsSource="{Binding LineData1}" Color="#00BDAE" XBindingPath="Value" YBindingPath="Size" LegendIcon="Circle" Label="France" EnableTooltip="True">
            <chart:LineSeries.DataMarker>
                <chart:ChartDataMarker  x:Name="marker" ShowMarker="True" MarkerColor="#00BDAE" MarkerBorderColor="White" ShowLabel="False" MarkerHeight="10" MarkerWidth="10" MarkerBorderWidth="2" />
            </chart:LineSeries.DataMarker>
        </chart:LineSeries>
        <chart:LineSeries x:Name="lineSeries2" TooltipTemplate="{StaticResource toolTipTemplate1}"  StrokeWidth="3" ItemsSource="{Binding LineData2}" Color="#404041" XBindingPath="Value" YBindingPath="Size" Label="Germany" LegendIcon="Circle" EnableTooltip="True">
            <chart:LineSeries.DataMarker>
                <chart:ChartDataMarker ShowMarker="True" MarkerColor="#404041" ShowLabel="False" MarkerBorderWidth="2" MarkerBorderColor="White" MarkerHeight="10" MarkerWidth="10" />
            </chart:LineSeries.DataMarker>
        </chart:LineSeries>
    </chart:SfChart.Series>
</chart:SfChart>

Tooltip

Selection

Xamarin Charts highlight data points or series. With the selection feature, we can implement the drill-down function to navigate to another page of information about a selected data point. Refer to our user guide for more details.

Drill-down

Trackball

In Xamarin Charts, trackball is similar to a tooltip, appearing on a chart as a hover label connected by a vertical or horizontal line to a data point. This feature can be used as an alternate to the data label feature, in case you are unable to show data labels for all data points due to space constraints. Some trackball features:

• Customize the appearance of trackball view using built-in API.
• Label template.
• Label display mode.
• Trackball activation mode.
• Multiple trackball support.

Trackball

Zooming and panning

When plotting a Xamarin.Forms chart with large amounts of data, zooming and scrolling are very useful for data readability. Zooming is performed by pinching, selecting a region, or double tapping. A chart can be panned by dragging your finger across the touchscreen. Here are a few more helpful aspects of zooming and panning:

• Auto scrolling delta.
• Auto interval on zooming.
• Maximum zoom level.
• Helper methods and events.

XAML

<chart:SfChart  x:Name="Chart">
    <chart:SfChart.ChartBehaviors>
        <chart:ChartZoomPanBehavior EnablePanning="True" EnableZooming="True" EnableDoubleTap="true" EnableSelectionZooming="True" EnableDirectionalZooming="True" ZoomMode="XY" />
    </chart:SfChart.ChartBehaviors>
            ....
            ...
            
</chart:SfChart>

Zooming and Panning

Conclusion

Data visualization and analysis is now an essential component of business processes. Companies big and small need clear, efficient, interactive ways to translate information properly. We ensure that our Charts component contributes to your business process with the user-based, interactive features available in this product. You can find more information about these interactive features here.

Play with our Charts control in Xamarin.Forms with the samples available in this GitHub location. Also, explore our samples available on Google Play and the Microsoft Store. Learn about the controls’ advanced features using our documentation.

If you have any questions or need any clarification, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!