Adding Tooltips, Labels and Markers to a Xamarin.Forms Chart

Charts and graphs are the preferred way to visualize numerical data compared to plain text. But to complete a really great data visualization, and maybe add a little interaction, we often add textual data labels and markers onto a chart. It’s like going full circle from transforming text to graphs and then back to putting text on graphs. In this post I will show how you can quickly and effortlessly add callouts, data labels and even interactive line markers to Xuni FlexChart, a Xamarin.Forms chart control. Xuni FlexChart is a complete Xamarin.Forms chart control also available for Android and iOS. You can download it from this very website. Once you have the chart displaying the data just how you like it, you can improve the clarity of the graph by adding one of three things: tooltips, labels, or a line marker. Let’s look at each of these and compare.

Adding Tooltips (or callouts)

FlexChart actually has tooltip capability built-in and enabled by default. There’s really no work necessary to get a default tooltip to display for when the user taps on a point. It’s controlled by the ShowTooltips property which is true by default. The tooltips have a unique style for each device platform. In Android there is a ripple effect applied to the tapped plot element so the user knows which point the tooltip belongs to. In iOS and Windows there is a pointing arrow, like a callout, to make it clear. The default tooltip is also adjusted depending on the number of series and chart type. In Windows Phone the default color is user’s device accent color. So that I have some code to show, let’s see how we can customize the tooltip content. For instance, we may want to simplify the tooltip by removing the X value. In Xamarin.Forms this is easily done by customizing the tooltip content in XAML – it’s like a template.

<xuni:FlexChart x:Name="chart" ChartType="Column" Stacking="Stacked">  

  <xuni:FlexChart.Tooltip>  
    <xuni:FlexChartTooltip>  
      <StackLayout BackgroundColor="#FFFFCA" Padding="5">  
        <StackLayout Orientation = "Horizontal">  
          <Label Text="{Binding SeriesName}" TextColor="Black" FontAttributes="Bold"/>  
          <Label Text="{Binding Value, StringFormat='{0:c2}'}" TextColor="Black"/>  
        </StackLayout>  
      </StackLayout>  
    </xuni:FlexChartTooltip>  
  </xuni:FlexChart.Tooltip>  
</xuni:FlexChart>  

If you’re working in pure Android or iOS, the approach to customizing the tooltip is to create your own custom class. I won’t cover the code here but you can check out the documentation.

Adding Static Data Labels

Static data labels show on every plot element. They are a great addition for charts with fewer points like a column or pie chart (FlexPie has the same feature). Data labels are not enabled by default in FlexChart, but you can enable them by first defining a template, and then setting the label position. Here is a simple data label example for Xamarin.Forms defined in XAML.

<xuni:FlexChart x:Name="flexChart" ShowTooltips="False">  
  <xuni:FlexChart.DataLabel>  
    <xuni:ChartDataLabel Position="Top">  
      <xuni:ChartDataLabel.ContentTemplate>  
        <DataTemplate>  
          <Frame BackgroundColor="White" Padding="5">  
              <Label Text="{Binding Value, StringFormat='{0:F2}'}" TextColor="Black" ></Label>  
          </Frame>  
        </DataTemplate>  
      </xuni:ChartDataLabel.ContentTemplate>  
    </xuni:ChartDataLabel>  
  </xuni:FlexChart.DataLabel>  
</xuni:FlexChart>  

Tips: Don’t forget to set the Position or you may not see the labels, and use a Frame as the parent element. For Android and iOS, each label is rendered as a separate view.

Data Binding within Labels and Tooltips

You may have noticed that in both of my examples I’m able to display data points in my tooltips and labels by binding the label text. These binding fields come from the ChartDataPoint class. An instance of this class is the data context for each label or tooltip. You can bind your labels to any of these properties on ChartDataPoint:

• Value
• ValueX
• SeriesIndex
• SeriesName
• PointIndex
• BubbleSize
• High
• Low
• Open
• Close
• DataObject

Some of these properties are specific to certain chart types, for instance, High, Low, Open, and Close are only useful for Candle and HLOC charts. BubbleSize comes from bubble charts. The DataObject will return the business object that the chart data point is bound to. So you may have additional data in your business object that you want to display in your labels. You can do so by binding to DataObject.XXX.

Adding Interactive Line Markers

The line marker feature helps the user discover precise data values for a given position on the chart by dragging horizontal and/or vertical lines over the plot with an attached label. It’s useful if you have a lot of data in a line or area chart, or if you just want to see data from multiple series in a single label. Since the user can drag the line marker, they can more precisely select the data point they are after. The line marker feature is a new addition in the 2015 v3 release of Xuni, so I'll cover this feature in more detail in a future blog post. So stay tuned! You can download Xuni FlexChart and get access to complete samples that show the tooltips, labels and soon line marker features. Or leave a comment below if you want to see a new and different way to visualize labels and markers on a mobile chart.