How to pass a JSON array to .NET MAUI Chart (SfCartesianChart)?

This example illustrates how to bind the JSON data to the .NET MAUI charts.

JSON data cannot be bound directly to the SfCartesianChart, so you should deserialize the JSON data to a bindable format. Use the open-source NuGet Newtonsoft.Json to serialize and deserialize the JSON objects.

The following steps explain how to pass JSON data to the SfCartesianChart.

JSON data

{
	'Country': 'USA',
	'Count': 46
}, {
	'Country': 'China',
	'Count': 36
}, {
	'Country': 'Japan',
	'Count': 63
}, {
	'Country': 'Australia',
	'Count': 54
}, {
	'Country': 'France',
	'Count': 50
}

Step 1: Add the Newtonsoft.Json reference in your project.

Step 2: Create a data model to store JSON data.

public class Medal
{
    public string Country { get; set; }
    public int Count { get; set; }
}

Step 3: Create a ViewModel to store a collection of model objects.

public class ViewModel
{
    public ObservableCollection<Medal> Medal { get; set; }
}

Step 4: Deserialize the JSON data as a collection of data models.

using Newtonsoft.Json;

...
{
     ...
     string jsonData = @"{'Medal':[{'Country':'USA','Count':46},{'Country':'China','Count':36},{'Country':'Japan','Count':63},{'Country':'Australia','Count':54},{'Country':'France','Count':50}]}";

     var jsonDataCollection = JsonConvert.DeserializeObject<ViewModel>(jsonData);
     chart.DataContext = jsonDataCollection;
}

Step 5: Bind the deserialized JSON data to the ChartSeries ItemsSource property and set the XBindingPath and YBindingPath properties, so that chart would fetch values from the respective properties in the data model to plot the series.

<chart:SfCartesianChart x:Name="chart">
    …
    <chart:ColumnSeries ItemsSource="{Binding Medal}"
                        XBindingPath="Country" 
                        YBindingPath="Count">
    </chart:ColumnSeries>
</chart:SfCartesianChart>

Output:

For more details, refer to the KB on how to pass a JSON array to .NET MAUI Chart (SfCartesianChart).