How to load vector images in .NET MAUI Chart (SfCartesianChart) ?

In .NET MAUI Cartesian Chart, you can load and display vector images by customizing the chart series. This guide will walk you through the process to load vector images using Syncfusion’s SfCartesianChart.

Imagine you want to visualize data with custom images representing each data point in the chart. To achieve this, you need to create a custom series that draws vector images on the custom chart segments.

Step 1: Create Custom Series and Segment
To display vector images in the chart, create custom series and segment classes.

Custom Series
Create a custom series class by inheriting from the ColumnSeries class. Override the CreateSegment method to return a custom segment.

[C#]

public class ColumnSeriesExt : ColumnSeries
{
    protected override ChartSegment CreateSegment()
    {
        return new ColumnSegmentExt();
    }
}

Custom Segment
Create a custom segment class by inheriting from the ColumnSegment class. Override the Draw method to draw images on the chart segments.

[C#]

public class ColumnSegmentExt : ColumnSegment
{
    protected override void Draw(ICanvas canvas)
    {
        base.Draw(canvas);

        if (Series is ColumnSeriesExt && Series.BindingContext is ViewModel viewModel)
        {
            canvas.DrawImage(viewModel.Data[Index].Image, Left, Top, Right - Left, Bottom - Top);
        }
    }
}

Step 2: Initialize the SfCartesianChart

Refer to the documentation for detailed steps on initializing the SfCartesianChart.

The following code illustrates how to initialize the SfCartesianChart with custom series ColumnSeriesExt.

[XAML]

<chart:SfCartesianChart Title="Age Vs. Height">

    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis ShowMajorGridLines="False" Interval="2">
            <chart:NumericalAxis.Title>
                <chart:ChartAxisTitle Text="Age(Years)" ></chart:ChartAxisTitle>
            </chart:NumericalAxis.Title>
        </chart:NumericalAxis>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis ShowMajorGridLines="False">
            <chart:NumericalAxis.Title>
                <chart:ChartAxisTitle Text="Height(cm)"></chart:ChartAxisTitle>
            </chart:NumericalAxis.Title>
        </chart:NumericalAxis>
    </chart:SfCartesianChart.YAxes>

    <local:ColumnSeriesExt ItemsSource="{Binding Data}" 
                           XBindingPath="Age" 
                           YBindingPath="Height" 
                           Fill="Transparent"
                           Width="0.6"/>

</chart:SfCartesianChart>

[C#]

SfCartesianChart chart = new SfCartesianChart();
chart.Title = "Age Vs. Height";

NumericalAxis primaryAxis = new NumericalAxis();
primaryAxis.Interval = 2;
primaryAxis.ShowMajorGridLines = false;
primaryAxis.Title = new ChartAxisTitle();
primaryAxis.Title.Text = "Age(Years)";
chart.XAxes.Add(primaryAxis);

NumericalAxis secondaryAxis = new NumericalAxis();
secondaryAxis.ShowMajorGridLines= false;
secondaryAxis.Title = new ChartAxisTitle();
secondaryAxis.Title.Text = "Height(cm)";
chart.YAxes.Add(secondaryAxis);

ColumnSeriesExt series = new ColumnSeriesExt();
series.ItemsSource = (new ViewModel()).Data;
series.XBindingPath = "Age";
series.YBindingPath = "Height";
series.Fill = Colors.Transparent;
series.Width = 0.6;

chart.Series.Add(series);
this.Content = chart;

Step 3: Initialize View Model

Load the data and the vector image to be displayed in the chart.

public class ViewModel
{
    public ObservableCollection<Model> Data { get; set; }

    public ViewModel()
    {
        Data = new ObservableCollection<Model>()
        {
            new Model() { Age = 12, Height = 135, Image = GetImage("age12")},
            new Model() { Age = 14, Height = 165, Image = GetImage("age14")},
            new Model() { Age = 16, Height = 175, Image = GetImage("age16")},
            new Model() { Age = 18, Height = 185, Image = GetImage("age18")},
        };
    }

    private Microsoft.Maui.Graphics.IImage? GetImage(string resourcePath)
    {
        Assembly assembly = typeof(MainPage).GetTypeInfo().Assembly;

        using Stream? stream = assembly.GetManifestResourceStream("AddVectorImage.Resources.Images." + resourcePath + ".png"); ;

        if (stream != null)
        {
            return PlatformImage.FromStream(stream);
        }

        return null;
    }
}

Output

Explore the runnable demo from this GitHub location.

Conclusion
I hope you enjoyed learning how to load vector images in .NET MAUI CartesianChart.
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!