How to add custom view to Data label of .NET MAUI Cartesian Charts?

This article explains how to add a custom view to the data label of a .NET MAUI Cartesian Chart

The .NET MAUI Cartesian Chart documentation provides support for customizing views in data labels. Let’s dive into this article to learn how to achieve this.

Step 1: Defining the Custom View

In the XAML code snippet below, we create a DataTemplate named dataLabel, which consists of a StackLayout containing a label. The label displays the value of the data point and uses a converter to dynamically change its color based on the value. The Image control displays an image according to the data point value, using another converter.

XAML

<ContentPage.Resources>
   <ResourceDictionary>
       <local:ValueToSummaryValueConverter x:Key="ValueToValueConverter"/>
       <local:ValueToColorConverter x:Key="ValueToColorConverter"/>
       <local:ValueToImageConvertor x:Key="ValueToImageConverter"></local:ValueToImageConvertor>
       <DataTemplate x:Key="dataLabel">
           <StackLayout Orientation="Horizontal" Spacing="3">
               <Label FontSize="14" FontAttributes="Bold">
                   <Label.Text>
                       <Binding Path="Item.Value" Converter="{StaticResource ValueToValueConverter}" StringFormat="{}$.{0}"/>
                   </Label.Text>
                   <Label.TextColor>
                       <Binding Path="Item.Value" Converter="{StaticResource ValueToColorConverter}"/>
                   </Label.TextColor>
               </Label>
               <Image Source="{Binding Item.Value,Converter={StaticResource ValueToImageConverter}}" HeightRequest="15" WidthRequest="15"></Image>
           </StackLayout>
       </DataTemplate>
   </ResourceDictionary>
</ContentPage.Resources>

Step 2: Implementing the Value Converter

The ValueToColorConverter and ValueToImageConverter classes handle the logic of changing text color and displaying icons based on the value. These converters are applied to the TextColor and Source properties within the data label template. The ValueToSummaryValueConverter class is used to return the sum of the data point values, with the sum accumulating as each data point passes through this converter.

C#

public class ValueToSummaryValueConverter : IValueConverter
{
   private double sumOfValues = 0;
   public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
   {
       if (value == null || !(value is double))
           return null;

       double numericValue = (double)value;
       sumOfValues += numericValue;
       if (numericValue == 0)
           return sumOfValues;
       else
           return numericValue;
   }

   public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
   {
       throw new NotImplementedException();
   }
}

public class ValueToColorConverter : IValueConverter
{
   
   public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
   {
       if (value == null || !(value is double))
           return Colors.Transparent;

       double numericValue = (double)value;
       if (numericValue == 0)
           return Color.FromHex("#3333cc");
       else
           return numericValue > 0 ? Color.FromHex("#3bab46") : Color.FromHex("#df3320");
   }

   public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
   {
       throw new NotImplementedException();
   }
}

public class ValueToImageConvertor : IValueConverter
{
   public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
   {
       if (value == null || !(value is double))
           return null;
       
       double numericValue = (double)value;
       if (numericValue == 0)
           return null;
       else
           return numericValue > 0 ? "up.png" : "down.png";
   }

   public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
   {
       throw new NotImplementedException();
   }
}

Step 3: Integrating the Custom View with the Chart

Incorporate the custom view into your chart by assigning the LabelTemplate property of the series to the defined DataTemplate. Ensure that the ShowDataLabels property is set to True to display the data labels.

XAML

<chart:SfCartesianChart>
   <!-- Define axes and series -->
   <chart:WaterfallSeries ItemsSource="{Binding Data}"
                      XBindingPath="Department"
                      YBindingPath="Value"
                      Fill="#3bab46"
                      NegativePointsBrush="#df3320"
                      SummaryPointsBrush="#3333cc"
                      SummaryBindingPath="IsSummary"
                      ShowDataLabels="True"
                      LabelTemplate="{StaticResource dataLabel}">
       <!-- Customize data label settings if necessary -->
   </chart:WaterfallSeries>
</chart:SfCartesianChart>

Output

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to add a custom view to the data label of .NET MAUI Cartesian Charts.

You can refer to our .NET MAUI Cartesian Chart feature tour page to know about its other groundbreaking feature representations. Explore our .NET MAUI Cartesian Chart documentation to understand how to create and manipulate data.

For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!