MAUI.GoogleChartsView is a user-friendly charting control designed for .NET MAUI applications.
By harnessing the capabilities of Google Charts, it offers customizable data visualizations to suit a wide range of data types.
Supports chart events, PNG export, and platform-specific gallery saving.
MAUI.GoogleChartsView is a user-friendly charting control designed for .NET MAUI applications.
By harnessing the capabilities of Google Charts, it offers customizable data visualizations to suit a wide range of data types.
This library is an ideal choice for developers who aim to create visually engaging and informative charts in their .NET MAUI applications while avoiding the complexities associated with building charting solutions from the ground up.
What's New in v1.0.0
Fixed ZoomEnabled - Now properly enables/disables zoom on all platforms
PNG Export - Export charts as PNG images with platform-specific gallery saving
Chart Events - Subscribe to ChartReady, ChartSelected, ChartClicked, ChartError events
Proper Disposal - Implements IDisposable for clean resource management
Updated to .NET 9 - Latest framework support
ChartType Enum - Type-safe chart selection with automatic package loading
Multi-Package Support - All Google Charts types now supported (Sankey, Timeline, Gauge, etc.)
Data Builders - Fluent API for easy chart data and options construction
Features
Supports all Google Charts types including Line, Bar, Pie, Area, Sankey, Timeline, Gauge, and more
Type-safe ChartType enum with automatic package loading
Fluent API builders for easy data and options construction
Customizable chart options to fit your design needs
Seamless integration with .NET MAUI
Interactive features like tooltips and animations
Export charts as images (PNG format) on all platforms
Save charts directly to device gallery (Android, iOS, MacCatalyst, Windows)
Responsive chart rendering for different screen sizes
Event-driven architecture for chart interactions
Supported Platforms
Android 5.0+ (API 21)
iOS 15.0+
MacCatalyst 15.0+
Windows 10.0.17763+
Getting Started
Installation
Install the Plugin.MAUI.GoogleChartsView NuGet package in your .NET MAUI project:
2. Configure Chart Data and Options (Using Builders)
using MAUI.GoogleChartsView;
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
SetupChart();
}
private void SetupChart()
{
// Use ChartDataBuilder for easy data construction
var data = ChartDataBuilder.Create()
.AddStringColumn("Year")
.AddNumberColumn("Sales")
.AddNumberColumn("Expenses")
.AddRow("2021", 1000, 400)
.AddRow("2022", 1170, 460)
.AddRow("2023", 660, 1120)
.AddRow("2024", 1030, 540)
.Build();
// Use ChartOptionsBuilder for easy options configuration
var options = ChartOptionsBuilder.Create()
.Title("Company Performance")
.SmoothLines()
.Legend("bottom")
.BackgroundColor("#f5f5f5")
.Colors("#2196F3", "#FF5722")
.HAxis(title: "Year")
.VAxis(title: "Amount")
.Build();
MyChart.Data = data;
MyChart.SetChartType(ChartType.LineChart); // Type-safe!
MyChart.Options = options;
MyChart.EnableAnimation = true;
MyChart.AnimationDuration = 1000;
}
private void OnChartReady(object sender, EventArgs e)
{
Console.WriteLine("Chart is ready!");
}
private void OnChartSelected(object sender, ChartSelectionEventArgs e)
{
Console.WriteLine($"Selected: Row {e.Row}, Column {e.Column}");
}
private void OnChartError(object sender, ChartErrorEventArgs e)
{
Console.WriteLine($"Error: {e.ErrorType} - {e.Message}");
}
private async void OnExportClicked(object sender, EventArgs e)
{
try
{
// Save to device gallery
var path = await ChartImageSaver.SaveToGalleryAsync(
await MyChart.GetChartImageAsync(),
"MyChart.png");
await DisplayAlert("Success", $"Chart saved to: {path}", "OK");
}
catch (Exception ex)
{
await DisplayAlert("Error", ex.Message, "OK");
}
}
}
3. Export Charts as Images
// Method 1: Get image as data URI
var imageDataUri = await myChart.GetChartImageAsync();
// Method 2: Save to specific file path
await myChart.SaveChartImageAsync("/path/to/chart.png");
// Method 3: Save to device gallery (platform-specific)
var savedPath = await ChartImageSaver.SaveToGalleryAsync(imageDataUri, "chart.png");
// Method 4: Get raw bytes for custom handling
byte[] imageBytes = ChartImageSaver.GetImageBytes(imageDataUri);
// Method 5: Get as stream
Stream imageStream = ChartImageSaver.GetImageStream(imageDataUri);
Properties
Property
Type
Default
Description
ChartType
string
null
Google Charts type (LineChart, PieChart, BarChart, etc.)
Data
object
null
Chart data in Google Charts DataTable format
Options
object
null
Chart configuration options
EnableAnimation
bool
true
Enable chart animations
AnimationDuration
int
1000
Animation duration in milliseconds
ChartTitle
string
"Chart Title"
Chart title text
RefreshIntervalMinutes
int
10
Auto-refresh interval
ZoomEnabled
bool
true
Enable/disable zoom functionality
IsChartReady
bool
false
Read-only: indicates if chart has finished rendering
Events
Event
EventArgs
Description
ChartReady
EventArgs
Fired when chart finishes rendering
ChartSelected
ChartSelectionEventArgs
Fired when user selects a chart element
ChartClicked
ChartClickEventArgs
Fired when user clicks on chart
ChartError
ChartErrorEventArgs
Fired when an error occurs
ChartImageReady
ChartImageEventArgs
Fired when image export completes
Supported Chart Types
Use the ChartType enum for type-safe chart selection with automatic package loading:
Calendar charts require JavaScript Date objects. Use anonymous objects for date handling:
var data = new
{
cols = new object[]
{
new { id = "", label = "Date", type = "date" },
new { id = "", label = "Value", type = "number" }
},
rows = new object[]
{
new { c = new object[] { new { v = "Date(2024, 0, 1)" }, new { v = 3 } } },
new { c = new object[] { new { v = "Date(2024, 0, 2)" }, new { v = 7 } } },
new { c = new object[] { new { v = "Date(2024, 0, 15)" }, new { v = 10 } } },
new { c = new object[] { new { v = "Date(2024, 1, 1)" }, new { v = 5 } } },
new { c = new object[] { new { v = "Date(2024, 1, 14)" }, new { v = 8 } } }
}
};
var options = ChartOptionsBuilder.Create()
.Title("Daily Activity")
.Set("height", 350)
.Set("calendar", new { cellSize = 15 })
.Set("colorAxis", new { minValue = 0, colors = new[] { "#ffffff", "#4285F4" } })
.Build();
MyChart.Data = data;
MyChart.SetChartType(ChartType.Calendar);
MyChart.Options = options;
Gantt Chart (Using Anonymous Object)
Gantt charts require a specific 7-column format with dates:
var data = new
{
cols = new object[]
{
new { id = "Task ID", label = "Task ID", type = "string" },
new { id = "Task Name", label = "Task Name", type = "string" },
new { id = "Start", label = "Start", type = "date" },
new { id = "End", label = "End", type = "date" },
new { id = "Duration", label = "Duration", type = "number" },
new { id = "Percent Complete", label = "Percent Complete", type = "number" },
new { id = "Dependencies", label = "Dependencies", type = "string" }
},
rows = new object[]
{
new { c = new object[] {
new { v = "Research" },
new { v = "Find sources" },
new { v = "Date(2024, 0, 1)" },
new { v = "Date(2024, 0, 5)" },
new { v = (object?)null },
new { v = 100 },
new { v = (object?)null }
}},
new { c = new object[] {
new { v = "Write" },
new { v = "Write paper" },
new { v = (object?)null },
new { v = "Date(2024, 0, 9)" },
new { v = 3 * 24 * 60 * 60 * 1000 }, // 3 days in milliseconds
new { v = 25 },
new { v = "Research" }
}},
new { c = new object[] {
new { v = "Complete" },
new { v = "Hand in paper" },
new { v = (object?)null },
new { v = "Date(2024, 0, 10)" },
new { v = 1 * 24 * 60 * 60 * 1000 },
new { v = 0 },
new { v = "Write" }
}}
}
};
var options = ChartOptionsBuilder.Create()
.Set("height", 300)
.Set("gantt", new
{
trackHeight = 30,
criticalPathEnabled = true,
criticalPathStyle = new { stroke = "#e64a19", strokeWidth = 2 }
})
.Build();
MyChart.Data = data;
MyChart.SetChartType(ChartType.Gantt);
MyChart.Options = options;