Adding Interactive Line Markers to FlexChart for Xamarin.Forms

November 16 2015

The new FlexChart 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. The line marker is very useful on mobile charts for several reasons.

It’s interactive – the user can drag and tap to move the marker to reveal data point information anywhere on the plot.
It can show data for multiple series in a single label – something you can’t do with the tooltip or data label feature.
It delivers better precision than the tooltip. Because of the cross-hair lines and the dragging capability, there is better precision at selecting the target. This is true especially for larger data sets and certain chart types such as line and area where it can be confusing as to where the user needs to hit.
It does not clutter the UI like data labels. Data labels are a nice way to accurately visualize data values but they’re only good if you have a relatively small data set. The line marker achieves the same result with less UI clutter.

In a previous post I talked about the tooltips and data labels feature in more detail. In this post I will introduce the line marker feature specifically for Xamarin.Forms users. Kelley also wrote a topic about the line marker for iOS developers. So let’s take a deeper look at the line marker feature.

The Key Line Marker Properties

With any built-in feature it’s all about knowing what properties or options you have to work with. The line marker feature is pretty easy to configure. Here are the key properties to get or set on the FlexChart.LineMarker object:

IsVisible – turns the line marker on by making it visible (default is false)
Interaction – determines how the user can interact with the line marker: drag, move or none. Drag means the user must touch the line marker to drag it. Move means the marker will move to wherever the user touches by tap or drag. None results in a static marker.
Content – contains the UI elements to display in the label. Elements can be bound to values from the DataPoints collection.
DataPoints – contains the collection of data points closest to the marker at any given time. This list is readonly.
Lines – choose from a vertical, horizontal or both (cross-hair) line
Alignment – sets the position of the label relative to VerticalPosition (for vertical lines) or HorizontalPosition (for horizontal lines)
VerticalPosition – for vertical lines, this sets the position of the label relative to the plot. 0 is at the top of the plot, 1 is at the bottom (the chart draws from top to bottom). A null or NaN value is the default and it means the label is positioned where the user touches.
HorizontalPosition – see vertical position. 0 positions the label on the left and 1 on the right.
SeriesIndex – setting this results in the line marker “snapping” to points from a single series. Setting to -1 means the line marker is free to drag anywhere within the plot, so it’s possible to drag it off the data points and the label will show the closest points.

All of these properties can be set through the FlexChart.LineMarker object. I’ll discuss each of these properties throughout this tutorial. There are also several style-related properties to change the appearance of the lines which are pretty self-explanatory. Next, I’ll walk through three common scenarios with line markers that should demonstrate a pretty thorough exploration of the feature.

Create a Simple Vertical Line Marker

Working in Xamarin.Forms you can completely configure the line marker in XAML. Here is a quick and complete definition of a line marker in XAML. I’ve removed the data binding and series information so it’s clearer, but let’s assume we are bound to two series named Sales and Expenses.


<xuni:FlexChart x:Name="flexChart" ChartType="LineSymbols" ShowTooltips="False">  

<xuni:FlexChart.LineMarker>  
  <xuni:ChartLineMarker IsVisible="True" Interaction="Move" VerticalPosition="0" VerticalLineColor="Gray">  
    <xuni:ChartLineMarker.Content>  
      <Frame Padding="2" BackgroundColor="#55C2C2C2" HasShadow="false">  
        <StackLayout>  
          <Label Text="{Binding [0].ValueX}"/>  
          <Label Text="{Binding [0].Value, StringFormat='Sales: {0:C0}'}"/>  
          <Label Text="{Binding [1].Value, StringFormat='Expenses: {0:C0}'}"/>  
        </StackLayout>  
        </Frame>  
    </xuni:ChartLineMarker.Content>  
  </xuni:ChartLineMarker>  
</xuni:FlexChart.LineMarker>  
</xuni:FlexChart>

And here is what it looks like on each device. You’ll notice that on the ChartLineMarker element I’ve set Interaction=Move and VerticalPosition=0. These are probably the most common settings, as it allows both drag and tap gestures to move the marker, and a vertical position of 0 sticks the marker to the top of the plot. With the line marker we typically disable the default tooltips as well, but setting ShowTooltips=False.

Create Cross-Hairs that Snap to Points

For the second scenario, let’s create cross-hairs that snaps to points. We can enable both horizontal and vertical lines by setting Lines=Both. We can enable the snapping behavior by setting SeriesIndex=0, so it means we can snap to only one series at a time. The label is designed to auto-position itself when you drag the line marker near the edge of the plot. But when it’s not near the edge we can control its default alignment with the Alignment property. Here I’ve set Alignment=TopRight. Here is the complete XAML definition of the cross-hairs (again, the series and data binding are omitted).


<xuni:FlexChart x:Name="flexChart" ShowTooltips="False" ChartType="Scatter">  

  <xuni:FlexChart.LineMarker>  
    <xuni:ChartLineMarker IsVisible="True" Lines="Both" Alignment="TopRight" SeriesIndex="0" Interaction="Move" VerticalLineColor="Red" HorizontalLineColor="Red">  
      <xuni:ChartLineMarker.Content>  
        <Frame Padding="2" BackgroundColor="#55C2C2C2" HasShadow="false">  
          <StackLayout>  
            <Label Text="{Binding [0].ValueX}"/>  
            <Label Text="{Binding [0].Value, StringFormat='{0:C0}'}"/>  
          </StackLayout>  
        </Frame>  
      </xuni:ChartLineMarker.Content>  
    </xuni:ChartLineMarker>  
  </xuni:FlexChart.LineMarker>  
</xuni:FlexChart>

You’ll notice that I did not set VerticalPosition or HorizontalPosition in this example because I want the label to display where the cross-hairs intersect. This is accomplished by setting the properties to null or NaN, or just not setting them at all. This is the result:

---

You will find a complete line marker sample added to FlexChart101 in the 2015 v3 download, or you can see and get the code on GitHub.

Greg Lutz