How to add images as axis labels in .NET MAUI Cartesian Chart?

In this article, we’ll guide you on how to customize the category axis of the .NET MAUI Cartesian Chart by incorporating images in axis elements. This involves extending the default category axis and overriding its “DrawAxis” method to include images alongside axis elements.

Here are the steps to follow:
Step 1:
Add the images to the Resources folder and set each image property as an embedded resource.

Step 2:

• Create a DataViewModel class, initialize the Data property with a collection of DataModel instances, each representing a country and its visit.
• Create a method that sets an image in a stream as key values based on the ordering of category axis labels.
• Implement the SetPlatformValues method to set platform-specific properties for OffsetX, OffsetY, Width, and Height.

C#

public class DataViewModel
{
   public float OffsetX { get; set; }
   public float OffsetY { get; set; }
   public float Width { get; set; }
   public float Height { get; set; }
   public ObservableCollection<DataModel> Data { get; set; }
   public List<Brush> CustomBrush { get; set; }
   public Dictionary<string, Stream> Streams { get; } = new Dictionary<string, Stream>();
   Stream stream;

   public DataViewModel()
   {
       Data = new ObservableCollection<DataModel>()
       {
           new DataModel(){ Country = "US", Vists = 725 },
           new DataModel(){ Country = "UK", Vists = 625 },
           new DataModel(){ Country = "China", Vists = 602 },
           new DataModel(){ Country = "Japan", Vists = 509 },
           new DataModel(){ Country = "Germany", Vists = 322 },
           new DataModel(){ Country = "France", Vists = 214 },
           new DataModel(){ Country = "India", Vists = 204 },
           new DataModel(){ Country = "Spain", Vists = 198 },
           new DataModel(){ Country = "Netherlands", Vists = 165 },
           new DataModel(){ Country = "SouthKorea", Vists = 93 },
           new DataModel(){ Country = "Canada", Vists = 41 }
       };
        
       Streams = GetImageSources();
       SetPlatformValues();
   }

   private void SetPlatformValues()
   {
       if(Microsoft.Maui.Devices.DeviceInfo.Platform == Microsoft.Maui.Devices.DevicePlatform.WinUI)
       {
           OffsetX = 12;
           OffsetY = 48;
           Width = 25;
           Height = 25;
       }
       else
       {
           OffsetX = 10;
           OffsetY = 43;
           Width = 20;
           Height = 20;
       }
   }

   private Dictionary<string, Stream> GetImageSources()
   {
       Dictionary<string, Stream> keyValues = new Dictionary<string, Stream>();
       Assembly assembly = typeof(MainPage).GetTypeInfo().Assembly;

       for(int i = 0; i < Data.Count; i++)
       {
           string imageName = $"{Data[i].Country.ToLower()}.png";
           stream = assembly.GetManifestResourceStream($"AddImageInCategoryAxis.Resources.Images.{imageName}");

           if(stream != null && Data[i].Country != null)
           {
               keyValues.Add(Data[i].Country, stream);
           }
       }
       return keyValues;
   }
} 

Step 3:
Create the CustomCategoryAxis class, inheriting from Category Axis.

Step 4:
Override the “DrawAxis” method in CustomCategoryAxis to add an image at every x-axis value, as shown in the following code sample.

C#

public class CustomCategoryAxis : CategoryAxis
{
   protected override void DrawAxis(ICanvas canvas, Rect arrangeRect)
   {
       base.DrawAxis(canvas, arrangeRect);
       foreach (ChartAxisLabel label in VisibleLabels)
       {
           string labelText = label.Content.ToString();
           if (this.BindingContext is DataViewModel viewModel && labelText != null && viewModel.Streams.ContainsKey(labelText))
           {
               Stream stream = viewModel.Streams[labelText];
               var image = PlatformImage.FromStream(stream);
               var top = ValueToPoint(label.Position);
               canvas.DrawImage(image, top - viewModel.OffsetX, (float)arrangeRect.Height - viewModel.OffsetY , viewModel.Width, viewModel.Height);
           }
       }
   }
} 

In the following section, a CustomCategoryAxis is added to the chart.

XAML

<chart:SfCartesianChart        
   <chart:SfCartesianChart.XAxes>
       <local:CustomCategoryAxis>
       </local:CustomCategoryAxis>
   </chart:SfCartesianChart.XAxes>
   
   <chart:ColumnSeries ItemsSource="{Binding Data}"
                       XBindingPath="Country"
                       YBindingPath="Vists"
                       PaletteBrushes="{Binding CustomBrush}"/>
</chart:SfCartesianChart> 

Output

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to add images as axis labels in the .NET MAUI Cartesian Chart.

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

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

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!