SyncfusionToolkit VS SyncfusionCore - Example "How to change the color of axis elements in .NET MAUI Chart (SfCartesianChart)" not working on SyncfusionToolkit

[rokmeglic71]

I tried to create a simple chart (Date, Temperature) with SyncfusionToolkit. It did not work. So I tested "How to change the color of axis elements in .NET MAUI Chart (SfCartesianChart)" and it works. When I change it to ".ConfigureSyncfusionToolkit()", the chart it self if shown, but the lines inside are not shown.

Chart works:

 MauiAppBuilder builder = MauiApp.CreateBuilder();
 builder
     .UseMauiApp<App>()
     .UseUserDialogs()
     .UseMauiCommunityToolkit()
     **.ConfigureSyncfusionCore()**

Chart does not work:

 MauiAppBuilder builder = MauiApp.CreateBuilder();
 builder
     .UseMauiApp<App>()
     .UseUserDialogs()
     .UseMauiCommunityToolkit()
     **.ConfigureSyncfusionToolkit()**

Looking at Syncfusion® Toolkit for .NET MAUI it says it should support "Cartesian Charts | Versatile data representation using line, bar, and area charts.".

What I am doing wrong?
Thank you.

XAML:

                       <!-- Inspired by https://github.com/SyncfusionExamples/How-to-change-the-color-of-axis-elements-in-.NET-MAUI-Chart-SfCartesianChart- -->
                        <chart:SfCartesianChart VerticalOptions="Start" x:DataType="viewmodels:MainViewModel" BackgroundColor="White">
                            <chart:SfCartesianChart.Resources>
                                <chart:ChartAxisLabelStyle x:Key="xAxisLabelStyle" LabelFormat="HH"/>
                                <chart:ChartAxisLabelStyle x:Key="yAxisLabelStyle" TextColor="DarkOrange" LabelFormat="C"/>
                            </chart:SfCartesianChart.Resources>
                            
                            <chart:SfCartesianChart.XAxes>
                                <chart:DateTimeAxis ShowMajorGridLines="False" Interval="1" IntervalType="Hours" LabelStyle="{StaticResource xAxisLabelStyle}">
                                    <chart:DateTimeAxis.Title>
                                        <chart:ChartAxisTitle Text="Time in hours"></chart:ChartAxisTitle>
                                    </chart:DateTimeAxis.Title>
                                </chart:DateTimeAxis>
                            </chart:SfCartesianChart.XAxes>

                            <chart:SfCartesianChart.YAxes>
                                <chart:NumericalAxis Name="yAxis1" 
                                                     MinorTicksPerInterval="1" 
                                                     Minimum="16" 
                                                     Maximum="28" 
                                                     Interval="1"
                                                     LabelStyle="{StaticResource yAxisLabelStyle}">
                                </chart:NumericalAxis>
                            </chart:SfCartesianChart.YAxes>

                                 <chart:LineSeries ItemsSource="{Binding Data}"
                                   XBindingPath="Time"
                                   YBindingPath="Temperature"/>
                        </chart:SfCartesianChart>

C# - CoPilot generate example code

        public required ObservableCollection<TemperatureData> Data { get; set; }

 public class TemperatureData
 {
     public DateTime Time { get; set; }
     public double Temperature { get; set; }
 }
 
Data = new List<TemperatureData>();
DateTime start = DateTime.Today;  // Starting at midnight
Random random = new Random();

for (int i = 0; i < 1440; i++)  // 1440 minutes in a day
{
    var time = start.AddMinutes(i);
    // Generate a random double between 18 and 26 and round it to two decimals
    double temperature = Math.Round(random.NextDouble() * (26 - 18) + 18, 2);

    Data.Add(new TemperatureData
    {
        Time = time,
        Temperature = temperature
    });
}

[VimalaThirumalaikumar]

Hi @rokmeglic71

Based on your description, it seems the chart is rendering but the LineSeries is not visible, which usually indicates a data binding issue. To resolve this, please ensure the BindingContext is correctly set to your Chart in XAML.

Here’s how you can define it:

<ContentPage 
             ....
             xmlns:chart="clr-namespace:Syncfusion.Maui.Toolkit.Charts;assembly=Syncfusion.Maui.Toolkit"
             xmlns:viewModel="clr-namespace:YourAppNamespace.ViewModels"
             x:Class="YourAppNamespace.MainPage">
 
 <chart:SfCartesianChart VerticalOptions="Start" x:DataType="viewmodels:MainViewModel" BackgroundColor="White">
        
            <!-- Set the BindingContext to chart -->
            <chart:SfCartesianChart.BindingContext>
                <viewModel:ViewModel />
            </chart:SfCartesianChart.BindingContext>
  ...
 
</chart:SfCartesianChart>

Reference:
Getting started with .NET MAUI Chart control | Syncfusion

https://github.com/SyncfusionExamples/How-to-change-the-color-of-axis-elements-in-.NET-MAUI-Chart-SfCartesianChart-/blob/3a36a98fa87f1697ea6638339eea572e1d9450ed/ChartAxisDemo/MainPage.xaml#L9C8-L12C53

Regards,
Vimala.

[rokmeglic71]

Thank you @VimalaThirumalaiKumarSF3739 . This did the trick. Thank you again.

Just to let you know. Let's say MainViewModel have a constructor:

public MainViewModel(IAppPreferences appPreferences)
{

}

the XAML says it can not use it:

So changing MainViewModel to parameterless constructor and adding your "chart:SfCartesianChart.BindingContext" did the trick. Thank you.

[VimalaThirumalaikumar]

Hi @rokmeglic71,

Thank you for the update! Since your MainViewModel has a constructor with parameters, it can't be instantiated directly in XAML. Instead, you can set the chart’s BindingContext in the code-behind.

To do this, first assign a name to your chart in XAML:

<chart:SfCartesianChart x:Name="chart">
    <!-- Chart configuration -->
</chart:SfCartesianChart>

Then, set the BindingContext in the code-behind:

public partial class MainPage : ContentPage
{
    public MainPage(IAppPreferences appPreferences)
    {
        InitializeComponent();
        var viewModel = new MainViewModel(appPreferences);
        chart.BindingContext = viewModel; // Set BindingContext for the chart
    }
}

This approach allows you to pass the required parameters to your view model while ensuring the chart remains properly data-bound.

Regards,
Vimala.

[rokmeglic71]

Thank you @VimalaThirumalaiKumarSF3739 . Awesome support.