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 to learn different ways to load data and how to build more complex charts.