Microcharts.Maui, ChartView item is invisible and unable to set HeightRequest or WidthRequest parameters

Question

I'm building an application using the MAUI framework in Visual Studio 2022 and I wanted to add a plot to my app using the Microcharts.Maui package.

I've successfully installed the package and there doesn't appear to be any issues in my .csproj or MauiProgram.cs files, as far as I can tell, I've installed the package correctly. However, when I try to add a ChartView object to my app and add data to it, I cannot see the resulting plot.

I've attempted to set the HeightRequest and WidthRequest parameters for the item, but when I do so, I encounter the following warning:

"A debugger is attached to [app name].exe but not configured to debug the unhandled exception. To debug this exception, detach the current debugger."

Here's some code snippets for context:

XAML containing ChartView

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:micro="clr-namespace:Microcharts.Maui;assembly=Microcharts.Maui"
             x:Class="Finance_Manager_Mobile.Windows.ProfileView"
             Title="ProfileView">

    <ScrollView>
        <VerticalStackLayout>
            <micro:ChartView BackgroundColor="Black" x:Name="plotCanvas" IsVisible="True" 
                             VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand"
                             HeightRequest="100" WidthRequest="100" />

        </VerticalStackLayout>
    </ScrollView>
    
</ContentPage>

C# code behind for ChartView

using Microcharts;

namespace Finance_Manager_Mobile.Windows;

// This page is the view of an open profile
public partial class ProfileView : ContentPage
{
    public ProfileView()
    {
        InitializeComponent();

        ChartEntry[] entries = new ChartEntry[]
        {
            new ChartEntry(100), new ChartEntry(200), new ChartEntry(300)
        };
        plotCanvas.Chart = new LineChart
        {
            Entries = entries
        };
    }

I've tried uninstalling and re-installing the package, but the issue persists.

Interestingly, if I set either the HeightRequest or WidthRequest in the XAML, it doesn't work, but if I set either of them in the code behind, it does work. However, it only seems to work if I set one or the other, it still results in a warning if I try to set both of them.

Answer 1

To use MicroChart in MAUI, in addition to installing Microcharts.Maui NuGet package, you also need to install SKiaSharp.Views.Maui.Controls.

After that, add .UseSKiaSharp() to the MauiProgram.cs file of the project:

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    .UseSkiaSharp();