Integrate Charting API into a project

After following the previous topic, you should be able to use MindFusion.Charting classes in your project.

Initialize the library

Call the UseMindFusionCharting extension from CreateMauiApp to configure the library:

C#

using MindFusion.Charting;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseMindFusionCharting()
            .......);

        return builder.Build();
    }
}

Add a chart to Xaml UI

1. Add an xmlns attribute to the root Xaml object and set its value to http://mindfusion.eu/charting/maui, which lets you create objects from the Charting namespace in Xaml.
2. Add a Chart -derived element, and set its Name attribute to a variable name that lets you access the instance from code-behind.

Xaml

<?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:mc="http://mindfusion.eu/charting/maui"
    x:Class="DiagramMauiApp.MainPage">

    <Grid>
        <mc:BarChart x:Name="chart" />
    </Grid>

</ContentPage>

Add series

The chart plots data values it loads from objects that implement the Series interface:

C#

public MainPage()
{
    InitializeComponent();

    var series1 = new BarSeries(
        new List<double> { 2, 5, 3, 4 }, null, null);
    var series2 = new BarSeries(
        new List<double> { 5, 3, 4, 2 }, null, null);

    chart.Series.Add(series1);
    chart.Series.Add(series2);
}

Customize the chart

You can customize the chart by setting its properties or ones of axis and plot sub-objects:

C#

chart.YAxis.Interval = 1;
chart.ShowLegend = false;
chart.HorizontalBars = true;

// assign one brush per series
chart.Plot.SeriesStyle = new PerSeriesStyle
{
    Fills = new List<Brush>
    {
        new SolidBrush(Colors.LightBlue),
        new SolidBrush(Colors.LightGreen)
    }
};

Browse the other sections of this help file to learn more about the functionality provided by the MindFusion.Charting classes, methods and properties. Follow the tutorials for more hands-on examples.