DEV Community

Cover image for Using Microcharts with .NET MAUI
Konrad Müller
Konrad Müller

Posted on

Using Microcharts with .NET MAUI

Microcharts is one of the most well-known open source charting libraries for Xamarin and many people, including me, would like to use it with .NET MAUI. Work on .NET MAUI support by Microcharts should arrive soon but while the PR is not merged, I want to show how to already use Microcharts with .NET MAUI.

You can find a sample for this on GitHub.

Adding the required packages

First thing to do is to add all required packages. We need Microcharts, which will bring in the rendering logic.

dotnet add package Microcharts --version 0.9.5.9
Enter fullscreen mode Exit fullscreen mode

Additionally, we need a reference to SkiaSharp controls for .NET MAUI.

dotnet add package SkiaSharp.Views.Maui.Controls --version 2.88.0
Enter fullscreen mode Exit fullscreen mode

You can also just add the references directly to the .csproj file:

    <ItemGroup>
      <PackageReference Include="Microcharts" Version="0.9.5.9" />
      <PackageReference Include="SkiaSharp.Views.Maui.Controls" Version="2.88.0" />
    </ItemGroup>
Enter fullscreen mode Exit fullscreen mode

Adding the ChartView

Microcharts has a smart structure that uses one shared code base that provides the rendering, based on SkiaSharp. The platforms just provide a SkiaSharp view and use this base layer to handle drawing events. We can therefore basically copy the Xamarin.Forms implementation of the view and slightly adapt it.

internal class ChartView : SKCanvasView
    {
        public event EventHandler<SKPaintSurfaceEventArgs> ChartPainted;

        public static readonly BindableProperty ChartProperty = BindableProperty.Create(nameof(Chart), typeof(Chart), typeof(ChartView), null, propertyChanged: OnChartChanged);

        public Chart Chart
        {
            get { return (Chart)GetValue(ChartProperty); }
            set { SetValue(ChartProperty, value); }
        }

        private InvalidatedWeakEventHandler<ChartView> handler;

        private Chart _chart;

        public ChartView()
        {
            BackgroundColor = Colors.Transparent;
            PaintSurface += OnPaintCanvas;
        }

        private static void OnChartChanged(BindableObject d, object oldValue, object value)
        {
            var view = d as ChartView;

            if (view._chart != null)
            {
                view.handler.Dispose();
                view.handler = null;
            }

            view._chart = value as Chart;
            view.InvalidateSurface();

            if (view._chart != null)
            {
                view.handler = view._chart.ObserveInvalidate(view, (v) => v.InvalidateSurface());
            }
        }

        private void OnPaintCanvas(object sender, SKPaintSurfaceEventArgs e)
        {
            if (_chart != null)
            {
                _chart.Draw(e.Surface.Canvas, e.Info.Width, e.Info.Height);
            }
            else
            {
                e.Surface.Canvas.Clear(SKColors.Transparent);
            }

            ChartPainted?.Invoke(sender, e);
        }
    }
Enter fullscreen mode Exit fullscreen mode

This view basically subscribes to drawing events and handles them by calling the Microcharts Chart drawing logic on the canvas ( _chart.Draw(e.Surface.Canvas, e.Info.Width, e.Info.Height) ). Just drop it in your project and you can now reference it from your views.

Usage

Before finally using it, we just need to add the required handlers by adding the .UseSkiaSharp() method to our MAUI builder in the MauiProgram.cs.

var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseSkiaSharp();
Enter fullscreen mode Exit fullscreen mode

You can now use the ChartView as you would use with Microcharts in any other project:

<ContentPage ...
xmlns:microcharts="clr-namespace:Microcharts.MAUI.Sample;assembly=Microcharts.MAUI.Sample">
            <microcharts:ChartView x:Name="Chart" />
</ContentPage>
Enter fullscreen mode Exit fullscreen mode

Read more about Microcharts usage in their documentation.

Chart sample on Android
Chart sample on Windows

Oldest comments (0)