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
Additionally, we need a reference to SkiaSharp controls for .NET MAUI.
dotnet add package SkiaSharp.Views.Maui.Controls --version 2.88.0
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>
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);
}
}
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();
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>
Read more about Microcharts usage in their documentation.
Top comments (0)