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:

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