Awesome

🍩 EZCharts.Maui.Donut

Rendering donut charts in .NET MAUI just got a whole lot easier!

EZCharts.Maui.Donut is a control library built on top of SkiaSharp and inspired by MicroCharts.

The goal is to provide developers with a highly customizable, efficient, and visually appealing donut chart view that they can implement into their applications with minimal setup.

🖼️ Samples

A sample project can be found in the repository where you can dive deeper into setup, customisation and how to use the library in a typical MAUI application. There are samples for MVVM, code behind and XAML setups.

If you want more specific examples or code snippets, check out the examples documentation!

🔧 Setting Up

1. Install package via NuGet.

2. Add UseDonutChart() to your CreateMauiApp() in MauiProgram.cs.

   public static class MauiProgram
   {
       public static MauiApp CreateMauiApp()
       {
           var builder = MauiApp.CreateBuilder();
           builder
               .UseMauiApp<App>()
               .UseDonutChart()
               .ConfigureFonts(fonts =>
               {
                   fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                   fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
               });
   
           return builder.Build();
       }
   }
   

3. Add the DonutChartView to your view.

   XAML

   <YourView xmlns:donut="http://schemas.dashthedev.com/ez-charts/maui/donut">
       <donut:DonutChartView />
   </YourView>
   

   Code-Behind

   DonutChartView donutChartView = new();
   Content = donutChartView;
   

4. Add entry models (your own or our generic class) to display data.

   XAML

   <donut:DonutChartView>
       <x:Array Type="{x:Type donut:DataEntry}">
           <donut:DataEntry Label="English" Value="200" />
           <donut:DataEntry Label="Mathematics" Value="300" />
           <donut:DataEntry Label="Geography" Value="325" />
           <donut:DataEntry Label="Science" Value="50" />
       </x:Array>
   </donut:DonutChartView>
   

   XAML (MVVM)

   <donut:DonutChartView
       EntriesSource="{Binding TestResults}"
       EntryLabelPath="Category"
       EntryValuePath="Score" />
   

   Code-Behind

   donutChartView.EntriesSource = new DataEntry[]
   {
       new()
       {
           Value = 105,
           Label = "Pencils Owned"
       },
       new()
       {
           Value = 234,
           Label = "Pens Owned"
       },
   };
   

   Code-Behind (MVVM)

   IEnumerable<TestResult> testResults = myService.GetTestResults();
   donutChartView.EntriesSource = testResults;
   donutChartView.EntryLabelPath = nameof(TestResult.Category);
   donutChartView.EntryValuePath = nameof(TestResult.Score);
   

5. Customise to your liking! Options and samples can be found in the documentation.

🤝 Contributing

I work full-time and may not have time to keep things up to date. So if there's something you want to change, then make some contributions! Please read the contribution guide on how to get started.

Any contributions are greatly appreciated. :smile: