Syncfusion Maui Toolkit Spark Charts

Implementing Syncfusion .NET MAUI Spark Charts

When to Use This Skill

Use this skill when implementing the SfSparkChart control in .NET MAUI applications. Spark Charts are lightweight, micro-visualization controls ideal for displaying data trends in compact spaces like dashboards, grids, and reports.

Key Scenarios:

• Displaying quick data trends without consuming significant UI space
• Visualizing sales trends, stock performance, or time-series data
• Showing positive/negative values in Win/Loss scenarios
• Creating dashboard components with multiple micro-charts
• Highlighting specific data points (first, last, high, low, negative values)

Component Overview

The SfSparkChart is a compact charting control with four built-in chart types:

Core Features:

• Data binding to ObservableCollection, List, or IEnumerable
• Four chart types for different visualization needs
• Marker display and customization (Line/Area charts only)
• Data point styling (first, last, high, low, negative)
• Axis display and origin customization
• Range band highlighting for value regions
• Lightweight and performance-optimized for micro-visualizations

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and NuGet package setup
• Project configuration (MauiProgram.cs handler registration)
• Basic SparkLineChart implementation
• Namespace imports and first render
• Data binding setup
• Copy-paste-ready starter code

Chart Types

📄 Read: references/chart-types.md

• Choosing the right chart type for your data
• SparkLineChart: Line-based trend visualization
• SparkAreaChart: Filled area representation
• SparkColumnChart: Vertical bar comparison
• SparkWinLossChart: Win/Loss scenarios
• When to use each type with code examples
• Common type selection patterns

Markers and Labels

📄 Read: references/markers-and-labels.md

• Enabling markers on Line and Area charts
• Marker shape types and customization
• Marker styling properties (Fill, Stroke, StrokeWidth, Height, Width)
• Marker positioning and visibility
• Common marker patterns (highlighting endpoints, data points)
• Performance considerations for marker display

Styling and Appearance

📄 Read: references/styling-and-appearance.md

• Data point styling and color customization
• First, last, high, and low point highlighting
• Negative value styling for Column and WinLoss charts
• Brush and color properties
• Padding and spacing configuration
• Size customization and layout control
• Advanced styling examples

Data Binding

📄 Read: references/data-binding.md

• Binding to ObservableCollection for reactive updates
• Binding to List for static data
• Binding to IEnumerable for LINQ queries
• XBindingPath and YBindingPath configuration
• Dynamic data source updates
• Common binding patterns and best practices

Axis and Ranges

📄 Read: references/axis-and-ranges.md

• Enabling axis display (ShowAxis property)
• Axis origin configuration for baseline reference
• Axis types (Numeric, Category, DateTime)
• XBindingPath property for category/time-based axes
• Range band visualization (RangeBandStart, RangeBandEnd, RangeBandFill)
• Axis line styling and customization
• Highlighting value regions and thresholds

Quick Start Example

// Step 1: Configure handler in MauiProgram.cs
using Syncfusion.Maui.Toolkit.Hosting;

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

// Step 2: Create basic SparkLineChart in XAML
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sparkchart="clr-namespace:Syncfusion.Maui.Toolkit.SparkCharts;assembly=Syncfusion.Maui.Toolkit"
             x:Class="SparkChartDemo.MainPage">

    <sparkchart:SfSparkLineChart 
        ItemsSource="{Binding Data}" 
        YBindingPath="Value"
        ShowMarkers="True"
        HeightRequest="100"
        WidthRequest="150">
    </sparkchart:SfSparkLineChart>

</ContentPage>

// Step 3: Bind data from ViewModel
public class SparkDataViewModel
{
    public ObservableCollection<DataPoint> Data { get; set; }
    
    public SparkDataViewModel()
    {
        Data = new ObservableCollection<DataPoint>
        {
            new DataPoint { Value = 10 },
            new DataPoint { Value = 15 },
            new DataPoint { Value = 12 },
            new DataPoint { Value = 20 },
            new DataPoint { Value = 18 }
        };
    }
}

public class DataPoint
{
    public double Value { get; set; }
}

Common Patterns

Pattern 1: Dashboard Summary Card

// Show quick sales trend in a card
<sparkchart:SfSparkLineChart 
    ItemsSource="{Binding MonthlySales}" 
    YBindingPath="Amount"
    ShowMarkers="False"
    FirstPointFill="Blue"
    LastPointFill="Red">
</sparkchart:SfSparkLineChart>

Pattern 2: Performance Indicator with Threshold

// Highlight data within acceptable range using RangeBand
<sparkchart:SfSparkLineChart 
    ItemsSource="{Binding PerformanceMetrics}" 
    YBindingPath="Value"
    ShowAxis="True"
    RangeBandStart="50"
    RangeBandEnd="100"
    RangeBandFill="LightGreen">
</sparkchart:SfSparkLineChart>

Pattern 3: Win/Loss Visualization

// Show positive and negative outcomes
<sparkchart:SfSparkWinLossChart 
    ItemsSource="{Binding GameResults}" 
    YBindingPath="Result"
    NegativePointsFill="Red">
</sparkchart:SfSparkWinLossChart>

Pattern 4: Styled Data Points

// Emphasize critical data points
<sparkchart:SfSparkColumnChart 
    ItemsSource="{Binding MonthlyRevenue}" 
    YBindingPath="Revenue"
    FirstPointFill="Green"
    LastPointFill="Blue"
    HighPointFill="Gold"
    LowPointFill="Red"
    NegativePointsFill="DarkRed">
</sparkchart:SfSparkColumnChart>

Key Props Reference

Core Properties

Display Properties

Styling Properties

Range Band Properties

Axis Properties

Marker Properties (Line/Area Only)

Common Challenges & Solutions

Issue: Chart appears empty

Causes: Missing ItemsSource binding, incorrect YBindingPath, data source is null
Solutions:

1. Verify ItemsSource is properly bound to a populated collection
2. Confirm YBindingPath matches your data property name exactly
3. Check that data property is public and contains numeric values

Issue: Markers not showing

Note: Markers only work on Line and Area charts
Solutions:

1. Verify you're using SfSparkLineChart or SfSparkAreaChart
2. Set ShowMarkers="True" in XAML or code
3. Check MarkerSettings are not hiding markers (verify Height/Width > 0)

Issue: Range band not visible

Solutions:

1. Verify RangeBandStart < RangeBandEnd
2. Ensure range values are within your data's Y-axis range
3. Check RangeBandFill is not transparent

Issue: Poor performance with large datasets

Solutions:

1. Consider displaying only recent data points
2. Use aggregated data instead of raw values
3. Avoid excessive marker styling on large datasets
4. Disable ShowMarkers for performance-critical scenarios

Next Steps

• Ready to implement? → Start with Getting Started
• Need specific features? → Browse Chart Types, Markers, or Styling
• Complex scenarios? → Check Data Binding and Axis Configuration