Data Labels and Tooltips

Data labels

With the ability to customize the labels associated with chart data points, you can make it easier to see which series a particular point belongs to, or its exact value. Each data series has a DataSeries.PointLabelTemplate property that specifies the visual element to display next to each point. The DataSeries.PointLabelTemplateis usually defined as a XAML resource, and may be assigned to the chart from XAML or from code.

You can add a DataTemplate to determine both the visual aspects of how the data is presented and how the data binding accesses the presented data.

To define the DataSeries.PointLabelTemplate as a XAML resource, you can follow these steps:

Create a Resource Dictionary.

Add the DataTemplate resource to your Resource Dictionary.

Access the DataTemplate resource in your MainPage.xaml file.

To add a new resource dictionary:

In Solution Explorer, right-click your project, point to Add, and then select Resource Dictionary. The Add New Item dialog box appears.
In the Name text box, name the dictionary Resources.xaml and click the Add button.
Resources.xaml is added to the project and opens in the code editor.

Creating a Simple Label

To create a label you need to create the label template and assign the DataSeries.PointLabelTemplate to the template.

When rendering the plot for each data point the label is created based on the specified template. The DataContext property of the label is set to the current DataPoint instance that provides information about the point. When using data binding it makes it easier to display this information in the label.

A label can be very simple or more complex, depending on the information you'd like to display. A simple DataTemplate might just display the value of a point:
XAML Markup
Copy Code
<DataTemplate x:Key="lbl">
   <TextBlock Text="{Binding Path=Value}" />
</DataTemplate>

XAML Markup	Copy Code
<DataTemplate x:Key="lbl"> <TextBlock Text="{Binding Path=Value}" /> </DataTemplate>

After you define a resource, you can reference the resource to be used for a property value by using a resource markup extension syntax that specifies the key name.

To assign the template to the data series set the DataSeries.PointLabelTemplate property to the following:
XAML Markup
Copy Code
<Chart:DataSeries PointLabelTemplate="{StaticResource lbl}" />

XAML Markup	Copy Code
<Chart:DataSeries PointLabelTemplate="{StaticResource lbl}" />

Creating Complex Labels

You can also create more complex data labels. The following sample defines the data label for an XY chart which will show both coordinates of the data point. The markup creates a standard grid with two columns and two rows as a container. The x-value of the point is obtained with the DataPoint's indexer. The indexer allows you to get the values for the data series classes which support several data sets, such as the XYDataSeries class.
XAML Markup
Copy Code
<DataTemplate x:Key="lbl">
   
   <Border BorderBrush="Black">
         <Grid>
               <Grid.ColumnDefinitions>
                     <ColumnDefinition />
                     <ColumnDefinition />
               </Grid.ColumnDefinitions>
               <Grid.RowDefinitions>
                     <RowDefinition />
                     <RowDefinition />
               </Grid.RowDefinitions>
               
               <TextBlock Text="X=" />
               <TextBlock Grid.Column="1" Text="{Binding Path=[XValues]}" />
               
               <TextBlock Grid.Row="1" Text="Y=" />
               <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Value}" />
         </Grid>
   </Border>
</DataTemplate>

XAML Markup	Copy Code
<DataTemplate x:Key="lbl"> <!-- Grid 2x2 with black border --> <Border BorderBrush="Black"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <!-- x-coordinate --> <TextBlock Text="X=" /> <TextBlock Grid.Column="1" Text="{Binding Path=[XValues]}" /> <!-- y-coordinate --> <TextBlock Grid.Row="1" Text="Y=" /> <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Value}" /> </Grid> </Border> </DataTemplate>

Using a Converter

When displaying numerical data, it may be necessary to format the output value. With the static Converters.Format class you can specify a standard .NET format string inside the XAML markup. For example, the following sample uses a converter to format the output as a percentage:
XAML Markup
Copy Code
<DataTemplate x:Key="lbl1">
   <TextBlock Text="{Binding Path=PercentageSeries,
         Converter={x:Static Chart:Converters.Format},
         ConverterParameter=#.#%}"/>
</DataTemplate>