MEGraph.MAUI 2.4.0

MEGraph.MAUI

A powerful and flexible charting library for .NET MAUI applications, built with modern architecture and pipeline-based rendering.

Note: Currently, only Line, Stacked Line, Area, and Pie charts are functional. Other features will be added in future updates.

Features

• Supported Chart Types: Line, Stacked Line, Area, and Pie charts
• Roadmap (Upcoming): Bar, Column, Combo, Radar, Stock charts
• Customizable Styling: Colors, fonts, themes, and visual effects
• Cross-Platform: Android, iOS, macOS, Windows support
• High Performance: Pipeline-based rendering for smooth animations
• Data Binding: Full MVVM support with ObservableCollection
• Flexible Axes: Category and Value axes with custom labels
• Draw-In Animations: Built-in entry animation (draw-in effect) on load and dynamic data updates
• Smooth Spline Curves: Monotone Cubic Spline (Fritsch-Carlson algorithm) via IsSmooth = true without overshoot
• Gradient Area Fill: Beautiful fade gradients with UseGradientFill = true for Area charts
• Built-in Legend: Automatic legend rendering for all supported chart types
• Multiple Series: Support for multiple data series in one chart
• Themes: Built-in light and dark themes

Installation

Add the NuGet package to your .NET MAUI project:

<PackageReference Include="MEGraph.MAUI" Version="2.4.0" />

Architecture

Pipeline Architecture

The library uses a modern pipeline-based rendering system:

1. Pipeline Layer: Orchestrates the rendering process
2. Component Layer: Individual renderers for different chart elements
3. Data Layer: Series and axes data management

💡 Key Capabilities (v2.4.0)

1. Draw-In Animation

Biểu đồ tự động thực hiện hiệu ứng vẽ dần từ trái sang phải khi vừa hiển thị hoặc khi cập nhật dữ liệu. Có thể cấu hình thời gian chạy (mili-giây) qua XAML hoặc code:

<linecharts:LineChart 
    AnimationDuration="2500"
    SeriesItems="{Binding SeriesCollection}"
    ChartAxes="{Binding AxesCollection}" />

2. Smooth Curves (IsSmooth)

Loại bỏ các góc nhọn trên đường vẽ, tự động bo cong mềm mại với giải thuật Fritsch-Carlson bảo toàn độ dốc (không bị lẹm trục):

new LineSeries
{
    Name = "Smooth Line",
    Data = new List<float> { 10, 40, 30, 70, 60, 90 },
    StrokeColor = Colors.Teal,
    StrokeWidth = 3,
    IsSmooth = true // Bật đường cong mềm mại
};

3. Gradient Area Fill (UseGradientFill)

Tô màu chuyển sắc mờ dần từ đường đỉnh xuống đáy cho biểu đồ diện tích:

new AreaSeries
{
    Name = "Area Gradient",
    Data = new List<float> { 20, 60, 40, 80, 70, 100 },
    StrokeColor = Colors.Green,
    StrokeWidth = 2,
    UseGradientFill = true, // Gradient chuyển từ màu viền mờ dần xuống đáy
    IsSmooth = true
};

Quick Start

1. Basic Line Chart

<?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:charts="clr-namespace:MEGraph.MAUI.Charts;assembly=MEGraph.MAUI"
             xmlns:viewmodel="clr-namespace:MEGraph.MAUITest.ViewModel;assembly=MEGraph.MAUITest"
             x:Class="MEGraph.MAUITest.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <viewmodel:MainViewModel x:Key="MainViewModel"/>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.BindingContext>
        <StaticResource Key="MainViewModel"/>
    </ContentPage.BindingContext>
    
    <charts:LineChart 
        x:Name="lineChart"
        Title="{Binding ChartTitle}"
        SeriesItems="{Binding SeriesCollection}"
        ChartAxes="{Binding AxesCollection}"
        BackgroundColor="White"
        Margin="16"
        />
</ContentPage>

private string _chartTitle = "Sales Chart";
        private ObservableCollection<float> _chartData;
        private ObservableCollection<LineSeries> _seriesCollection;
        private ObservableCollection<IAxis> _axesCollection;

        public string ChartTitle
        {
            get => _chartTitle;
            set => SetProperty(ref _chartTitle, value);
        }

        public ObservableCollection<float> ChartData
        {
            get => _chartData;
            set => SetProperty(ref _chartData, value);
        }

        public ObservableCollection<LineSeries> SeriesCollection
        {
            get => _seriesCollection;
            set => SetProperty(ref _seriesCollection, value);
        }

        public ObservableCollection<IAxis> AxesCollection
        {
            get => _axesCollection;
            set => SetProperty(ref _axesCollection, value);
        }
        public MainViewModel()
        {
            // Dữ liệu mẫu
            ChartData = new ObservableCollection<float>
            {
                100, 120, 90, 150, 200, 180, 220, 190, 250, 300, 280, 320
            };

            var ChartData1 = new ObservableCollection<float>
            {
                140, 120, 150, 150, 200, 190, 250, 190, 260, 310, 300, 330
            };

            // Tạo series
            SeriesCollection = new ObservableCollection<LineSeries>
            {
                new LineSeries
                {
                    Name = "Sales",
                    Data = ChartData.ToList(),
                    StrokeColor = Colors.Blue,
                    StrokeWidth = 3f
                },
                new LineSeries
                {
                    Name = "Sales1",
                    Data = ChartData1.ToList(),
                    StrokeColor = Colors.Red,
                    StrokeWidth = 3f
                }
            };

            // Tạo axes
            AxesCollection = new ObservableCollection<IAxis>
            {
                new Category
                {
                    Orientation = AxisOrientation.X,
                    Labels = new List<AxisLabel>
                    {
                        new AxisLabel { Content = "Jan" },
                        new AxisLabel { Content = "Feb" },
                        new AxisLabel { Content = "Mar" },
                        new AxisLabel { Content = "Apr" },
                        new AxisLabel { Content = "May" },
                        new AxisLabel { Content = "Jun" },
                        new AxisLabel { Content = "Jul" },
                        new AxisLabel { Content = "Aug" },
                        new AxisLabel { Content = "Sep" },
                        new AxisLabel { Content = "Oct" },
                        new AxisLabel { Content = "Nov" },
                        new AxisLabel { Content = "Dec" }
                    }
                },
                new Value
                {
                    Orientation = AxisOrientation.Y,
                    Title = new AxisTitle { Content = "Sales ($)" }
                }
            };
        }

        #region INotifyPropertyChanged

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        protected bool SetProperty<T>(ref T backingStore, T value, [CallerMemberName] string propertyName = "")
        {
            if (EqualityComparer<T>.Default.Equals(backingStore, value))
                return false;

            backingStore = value;
            OnPropertyChanged(propertyName);
            return true;
        }

        #endregion