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

.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. This label displays the value of the data point and uses a converter to dynamically change its color based on the value. Additionally, the Image control displays the respective image based on the data point and utilizes a converter to dynamically change its image based on the value.

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 are implemented to handle the logic of changing text color and displaying icons based on the value, respectively. 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

For a better understanding, please refer to the GitHub sample.

Conclusion

I hope you enjoyed learning about how to add custom view to data label of .NET MAUI cartesian charts.

You can refer to our .NET MAUI Charts feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI Toolkit documentation to understand how to create and manipulate data.

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

If you have any queries or require clarifications, 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!