syncfusion-maui-toolkit-spark-charts
starsforks
How to install syncfusion-maui-toolkit-spark-charts?
syncfusion/maui-toolkit-ui-components-skills/syncfusion-maui-toolkit-spark-charts
$npx -y skills add syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-spark-chartsUse this skill ALWAYS when the user needs to implement Syncfusion MAUI Spark Charts. Triggers on spark chart, sparkline, micro-chart, trend visualization, data visualization in small spaces, chart types (line, area, column, win/loss), markers, range bands, axis configuration, dat
SKILL.md
| 1 | # Implementing Syncfusion .NET MAUI Spark Charts |
| 2 | |
| 3 | ## When to Use This Skill |
| 4 | |
| 5 | 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. |
| 6 | |
| 7 | **Key Scenarios:** |
| 8 | - Displaying quick data trends without consuming significant UI space |
| 9 | - Visualizing sales trends, stock performance, or time-series data |
| 10 | - Showing positive/negative values in Win/Loss scenarios |
| 11 | - Creating dashboard components with multiple micro-charts |
| 12 | - Highlighting specific data points (first, last, high, low, negative values) |
| 13 | |
| 14 | --- |
| 15 | |
| 16 | ## Component Overview |
| 17 | |
| 18 | The **SfSparkChart** is a compact charting control with four built-in chart types: |
| 19 | |
| 20 | | Chart Type | Use Case | Best For | |
| 21 | |-----------|----------|----------| |
| 22 | | **SparkLineChart** | Line-based visualization | Identifying trends and patterns | |
| 23 | | **SparkAreaChart** | Filled area visualization | Emphasizing magnitude of change | |
| 24 | | **SparkColumnChart** | Vertical bar visualization | Comparing different data values | |
| 25 | | **SparkWinLossChart** | Win/Loss representation | Showing positive/negative scenarios | |
| 26 | |
| 27 | **Core Features:** |
| 28 | - Data binding to ObservableCollection, List, or IEnumerable |
| 29 | - Four chart types for different visualization needs |
| 30 | - Marker display and customization (Line/Area charts only) |
| 31 | - Data point styling (first, last, high, low, negative) |
| 32 | - Axis display and origin customization |
| 33 | - Range band highlighting for value regions |
| 34 | - Lightweight and performance-optimized for micro-visualizations |
| 35 | |
| 36 | --- |
| 37 | |
| 38 | ## Documentation and Navigation Guide |
| 39 | |
| 40 | ### Getting Started |
| 41 | 📄 **Read:** [references/getting-started.md](references/getting-started.md) |
| 42 | - Installation and NuGet package setup |
| 43 | - Project configuration (MauiProgram.cs handler registration) |
| 44 | - Basic SparkLineChart implementation |
| 45 | - Namespace imports and first render |
| 46 | - Data binding setup |
| 47 | - Copy-paste-ready starter code |
| 48 | |
| 49 | ### Chart Types |
| 50 | 📄 **Read:** [references/chart-types.md](references/chart-types.md) |
| 51 | - Choosing the right chart type for your data |
| 52 | - SparkLineChart: Line-based trend visualization |
| 53 | - SparkAreaChart: Filled area representation |
| 54 | - SparkColumnChart: Vertical bar comparison |
| 55 | - SparkWinLossChart: Win/Loss scenarios |
| 56 | - When to use each type with code examples |
| 57 | - Common type selection patterns |
| 58 | |
| 59 | ### Markers and Labels |
| 60 | 📄 **Read:** [references/markers-and-labels.md](references/markers-and-labels.md) |
| 61 | - Enabling markers on Line and Area charts |
| 62 | - Marker shape types and customization |
| 63 | - Marker styling properties (Fill, Stroke, StrokeWidth, Height, Width) |
| 64 | - Marker positioning and visibility |
| 65 | - Common marker patterns (highlighting endpoints, data points) |
| 66 | - Performance considerations for marker display |
| 67 | |
| 68 | ### Styling and Appearance |
| 69 | 📄 **Read:** [references/styling-and-appearance.md](references/styling-and-appearance.md) |
| 70 | - Data point styling and color customization |
| 71 | - First, last, high, and low point highlighting |
| 72 | - Negative value styling for Column and WinLoss charts |
| 73 | - Brush and color properties |
| 74 | - Padding and spacing configuration |
| 75 | - Size customization and layout control |
| 76 | - Advanced styling examples |
| 77 | |
| 78 | ### Data Binding |
| 79 | 📄 **Read:** [references/data-binding.md](references/data-binding.md) |
| 80 | - Binding to ObservableCollection for reactive updates |
| 81 | - Binding to List<T> for static data |
| 82 | - Binding to IEnumerable for LINQ queries |
| 83 | - XBindingPath and YBindingPath configuration |
| 84 | - Dynamic data source updates |
| 85 | - Common binding patterns and best practices |
| 86 | |
| 87 | ### Axis and Ranges |
| 88 | 📄 **Read:** [references/axis-and-ranges.md](references/axis-and-ranges.md) |
| 89 | - Enabling axis display (ShowAxis property) |
| 90 | - Axis origin configuration for baseline reference |
| 91 | - Axis types (Numeric, Category, DateTime) |
| 92 | - XBindingPath property for category/time-based axes |
| 93 | - Range band visualization (RangeBandStart, RangeBandEnd, RangeBandFill) |
| 94 | - Axis line styling and customization |
| 95 | - Highlighting value regions and thresholds |
| 96 | |
| 97 | --- |
| 98 | |
| 99 | ## Quick Start Example |
| 100 | |
| 101 | ```csharp |
| 102 | // Step 1: Configure handler in MauiProgram.cs |
| 103 | using Syncfusion.Maui.Toolkit.Hosting; |
| 104 | |
| 105 | public static class MauiProgram |
| 106 | { |
| 107 | public static MauiApp CreateMauiApp() |
| 108 | { |
| 109 | var builder = MauiApp.CreateBuilder(); |
| 110 | builder |
| 111 | .UseMauiApp<App>() |
| 112 | .ConfigureSyncfusionToolkit() |
| 113 | .ConfigureFonts(fonts => |
| 114 | { |
| 115 | fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); |
| 116 | }); |
| 117 | return bu |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
