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:

Chart Type	Use Case	Best For
SparkLineChart	Line-based visualization	Identifying trends and patterns
SparkAreaChart	Filled area visualization	Emphasizing magnitude of change
SparkColumnChart	Vertical bar visualization	Comparing different data values
SparkWinLossChart	Win/Loss representation	Showing positive/negative scenarios

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

Property	Type	Default	Purpose
`ItemsSource`	IEnumerable	-	Data source for chart
`YBindingPath`	string	-	Property name for Y-axis values
`XBindingPath`	string	-	Property name for X-axis values
`Height`	double	-	Chart height in pixels
`Width`	double	-	Chart width in pixels

Display Properties

Property	Type	Default	Purpose
`ShowMarkers`	bool	false	Display markers (Line/Area only)
`ShowAxis`	bool	false	Display axis baseline
`Padding`	Thickness	0	Space around chart content
`AxisOrigin`	double	-	Y-axis value for axis line position

Styling Properties

Property	Type	Default	Purpose
`FirstPointFill`	Brush	-	Color of first data point
`LastPointFill`	Brush	-	Color of last data point
`HighPointFill`	Brush	-	Color of highest data point
`LowPointFill`	Brush	-	Color of lowest data point
`NegativePointsFill`	Brush	-	Color of negative values (Column/WinLoss)

Range Band Properties

Property	Type	Default	Purpose
`RangeBandStart`	double	-	Y-axis start value for range band
`RangeBandEnd`	double	-	Y-axis end value for range band
`RangeBandFill`	Brush	-	Color for range band region

Axis Properties

Property	Type	Default	Purpose
`AxisType`	SparkChartAxisType	Numeric	Axis scale type (Numeric, Category, DateTime)
`AxisLineStyle`	SparkChartLineStyle	-	Axis appearance (Stroke, StrokeWidth, StrokeDashArray)

Marker Properties (Line/Area Only)

Property	Type	Default	Purpose
`MarkerSettings`	SparkChartMarkerSettings	-	Marker customization configuration

Common Challenges & Solutions

Issue: Chart appears empty

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

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

Issue: Markers not showing

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

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

Issue: Range band not visible

Solutions:

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

Issue: Poor performance with large datasets