How to Add Images as Category in .NET MAUI Cartesian Chart Axis Labels?

In this article, we’ll guide you 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 of axis elements.

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

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 class CustomCategoryAxis inherits 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 this following section, where 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

Explore the runnable demo from this GitHub location.

Conclusion
I hope you enjoyed learning how to Add Images in axis label for the .NET MAUI Chart (SfCartesianChart).
Refer to our .NET MAUI Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also 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 following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!