Implementing Sparkline Charts

When to Use This Skill

Use this skill when you need to guide the user to implement Syncfusion Blazor Sparkline Charts in their application. Sparklines are small, word-sized charts designed to show trends in data at a glance - perfect for inline visualization within text, tables, or dashboards.

Use this when the user:

Wants to add inline trend charts to dashboards or tables
Needs compact KPI indicators with visual trends
Asks about small charts, mini charts, or micro charts
Wants to visualize trends without full chart axes/labels
Needs data-dense visualizations for limited space
Asks about sparkline, line trends, or inline data visualization
Wants to add visual indicators to email reports or mobile views

Component Overview

Sparkline Charts are specialized data visualizations optimized for small spaces. Unlike full-featured charts, sparklines:

Display trends without axes, legends, or extensive labels
Fit inline within text or table cells
Show data patterns at a glance
Support multiple chart types (line, area, column, WinLoss, pie)
Highlight special data points (high, low, negative, start, end)
Provide tooltips for detailed information on hover

Perfect for: KPI dashboards, data tables, financial reports, analytics summaries, mobile interfaces, email reports, and any scenario requiring compact trend visualization.

Documentation and Navigation Guide

This skill uses progressive disclosure. The main SKILL.md (this file) provides overview and navigation. Read the appropriate reference files based on what the user needs:

API Reference

📄 Read: references/api-reference.md

Complete
```
SfSparkline
```
property, method, and event surface
Supported child components and nested tags
Enum and value-type reference
Compact example for quick implementation

Getting Started

📄 Read: references/getting-started.md

Installation and NuGet package setup
Basic sparkline implementation
CSS theme imports
First working example
WebAssembly vs Server setup differences

Chart Types and Visualization

📄 Read: references/chart-types.md

Line sparkline (default, shows continuous trends)
Area sparkline (filled line chart)
Column sparkline (vertical bars)
WinLoss sparkline (binary win/loss indicators)
Pie sparkline (proportional segments)
When to use each type
Type-specific properties and examples

📄 Read: references/data-binding.md

DataSource property configuration
Array and list data binding
XName and YName field mapping
Value types and formatting
Dynamic data updates
Data transformation patterns

Data Presentation

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

Marker configuration (shapes, sizes, colors)
Data label visibility and formatting
Edge label handling
Label templates
Marker visibility for specific points

📄 Read: references/special-points-customization.md

Highlighting start and end points
High point customization
Low point customization
Negative point styling
Color and size configuration for special points

📄 Read: references/range-bands.md

Range band configuration (horizontal threshold zones)
Start and end range values
Color and opacity customization
Multiple range bands
Use cases: targets, thresholds, acceptable ranges

Customization and Styling

📄 Read: references/axis-customization.md

Axis line visibility and styling
Min and max value configuration
Value display modes
Axis label formatting
Grid line customization

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

Width and height configuration
Padding and margins
Border styling
Background and fill colors
Line width customization
RTL (right-to-left) support
Container area styling

Interactivity and Events

📄 Read: references/user-interaction-and-events.md

Tooltip configuration and templates
Tooltip formatting
Tracking line for hover

Component events (

OnLoaded

OnPointRendering

OnSeriesRendering

OnMarkerRendering

OnDataLabelRendering

OnPointRegionMouseClick

OnResizing

OnAxisRendering

)

Method:
```
RefreshAsync()
```
User interaction patterns

Globalization and Accessibility

📄 Read: references/globalization-and-accessibility.md

Internationalization and localization
Number format customization
Currency and date formatting
RTL support
WCAG compliance
Keyboard navigation
Screen reader support

Quick Start Example

Here's a minimal sparkline showing sales trends:

razor

@page "/sparkline-demo"
@using Syncfusion.Blazor.Charts

<h3>Monthly Sales Trend</h3>

<SfSparkline DataSource="@SalesData" 
              XName="Month" 
              YName="Sales"
              Type="SparklineType.Line"
              Height="50px" 
              Width="200px"
              Fill="#3366cc"
              LineWidth="2"  TValue="SalesInfo">
    <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.All }" 
                             Size="4" 
                             Fill="#ffffff" 
                             Border="new SparklineMarkerBorder { Color = "#3366cc", Width = 1 }">
    </SparklineMarkerSettings>
    <SparklineTooltipSettings  TValue="SalesInfo" Visible="true" Format="${Month}: ${Sales}"></SparklineTooltipSettings>
</SfSparkline>

@code {
    public class SalesInfo
    {
        public string Month { get; set; }
        public double Sales { get; set; }
    }

    public List<SalesInfo> SalesData = new List<SalesInfo>
    {
        new SalesInfo { Month = "Jan", Sales = 35000 },
        new SalesInfo { Month = "Feb", Sales = 28000 },
        new SalesInfo { Month = "Mar", Sales = 34000 },
        new SalesInfo { Month = "Apr", Sales = 32000 },
        new SalesInfo { Month = "May", Sales = 40000 },
        new SalesInfo { Month = "Jun", Sales = 32000 },
        new SalesInfo { Month = "Jul", Sales = 35000 }
    };
}

Result: A compact line chart showing monthly sales trends with markers and tooltips.

Common Patterns

Pattern 1: KPI Dashboard with Sparklines

When user needs a dashboard showing multiple KPIs with trend indicators:

razor

@page "/sparkline-demo"
@using Syncfusion.Blazor.Charts
<div class="kpi-grid">
    <div class="kpi-card">
        <h4>Revenue</h4>
        <p class="value">$1.2M <span class="change positive">+15%</span></p>
        <SfSparkline DataSource="@RevenueData" Type="SparklineType.Area" Height="40px" Width="150px" Fill="#28a745">
        </SfSparkline>
    </div>
    
    <div class="kpi-card">
        <h4>Orders</h4>
        <p class="value">5,432 <span class="change negative">-3%</span></p>
        <SfSparkline DataSource="@OrdersData" Type="SparklineType.Column" Height="40px" Width="150px" Fill="#dc3545">
        </SfSparkline>
    </div>
</div>

@code {
    public List<double> RevenueData { get; set; } = new()
    {
        820000, 900000, 870000, 960000, 1100000, 1200000
    };

    public List<double> OrdersData { get; set; } = new()
    {
        5200, 5400, 5600, 5300, 5500, 5432
    };
}

Guide user to: Use Area type for cumulative metrics, Column for discrete counts, and configure special points to highlight highs/lows.

Pattern 2: Data Table with Inline Trends

When user wants to add sparklines to table cells:

razor

@page "/sparkline-demo"
@using Syncfusion.Blazor.Charts
<table class="data-table">
    <thead>
        <tr>
            <th>Product</th>
            <th>Current</th>
            <th>Trend (7 days)</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in Products)
        {
            <tr>
                <td>@product.Name</td>
                <td>@product.CurrentValue.ToString("C")</td>
                <td>
                    <SfSparkline DataSource="@product.TrendData" 
                                  Type="SparklineType.Line" 
                                  Height="30px" 
                                  Width="100px"
                                  LineWidth="1">
                    </SfSparkline>
                </td>
            </tr>
        }
    </tbody>
</table>
@code {
    public class ProductInfo
    {
        public string Name { get; set; }
        public decimal CurrentValue { get; set; }
        public List<double> TrendData { get; set; } = new();
    }

    public List<ProductInfo> Products { get; set; } = new()
    {
        new ProductInfo
        {
            Name = "Product A",
            CurrentValue = 1250.75m,
            TrendData = new List<double> { 1200, 1220, 1235, 1240, 1245, 1250, 1251 }
        },
        new ProductInfo
        {
            Name = "Product B",
            CurrentValue = 980.30m,
            TrendData = new List<double> { 950, 955, 960, 970, 975, 980, 980 }
        }
    };
}

Guide user to: Keep sparklines minimal (no markers, no labels), use consistent dimensions across rows, and enable tooltips for details.

Pattern 3: Win/Loss Indicator

When user needs binary success/failure visualization:

razor

@page "/sparkline-demo"
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@WinLossData" 
              Type="SparklineType.WinLoss"
              Height="50px" 
              Width="300px"
              TiePointColor="#ffc107">
    <SparklineAxisSettings MinY="-1" MaxY="1"></SparklineAxisSettings>
</SfSparkline>

Guide user to: Use WinLoss type with values of 1 (win), -1 (loss), and 0 (tie). Configure TiePointColor for neutral outcomes.

Pattern 4: Highlighting Special Points

When user wants to emphasize specific data points:

razor

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@TemperatureData" 
              Type="SparklineType.Line"
              Height="60px" 
              Width="250px">
    <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.High, VisibleType.Low }">
    </SparklineMarkerSettings>
    <SparklineHighPointColor>#28a745</SparklineHighPointColor>
    <SparklineLowPointColor>#dc3545</SparklineLowPointColor>
</SfSparkline>

@code {
    public List<int> WinLossData { get; set; } = new()
    {
        1, 1, -1, 0, 1, -1, 1, 1, 0, -1
    };
}

Guide user to: Use VisibleType enumeration to show markers only for High/Low/Start/End/Negative points. Configure colors for visual emphasis.

API Surface Reference

Use the API reference file for the authoritative

SfSparkline

surface. The most important members are:

Component properties:

DataSource

EnableGroupingSeparator

EnableRtl

EndPointColor

Fill

Format

Height

HighPointColor

ID

LineWidth

LowPointColor

NegativePointColor

Opacity

Palette

Query

RangePadding

StartPointColor

Theme

TiePointColor

Type

ValueType

Width

XName

YName

Methods:

```
RefreshAsync()
```

Events:

OnAxisRendering

OnDataLabelRendering

OnLoaded

OnMarkerRendering

OnPointRegionMouseClick

OnPointRendering

OnResizing

OnSeriesRendering

Child components:

SparklineAxisLineSettings

SparklineAxisSettings

SparklineBorder

SparklineContainerArea

SparklineContainerAreaBorder

SparklineDataLabelBorder

SparklineDataLabelOffset

SparklineDataLabelSettings

SparklineEvents

SparklineFont

SparklineMarkerBorder

SparklineMarkerSettings

SparklinePadding

SparklineRangeBand

SparklineRangeBandSettings

SparklineTooltipBorder

SparklineTooltipSettings

SparklineTooltipTextStyle

SparklineTrackLineSettings

Enums:

SparklineRangePadding

SparklineType

SparklineValueType

VisibleType

Common Use Cases

Use Case 1: Financial Dashboard

User wants to show stock prices, portfolio performance, or financial KPIs with inline trends. Guide to: Line or Area sparklines with special point highlighting for highs/lows.

Use Case 2: Analytics Dashboard

User needs compact visualizations for page views, user engagement, or conversion rates. Guide to: Column sparklines for discrete metrics, Area for cumulative data.

Use Case 3: Reporting Tables

User wants to add visual trends to data tables without cluttering the layout. Guide to: Minimal Line sparklines (30-40px height) with tooltips enabled.

Use Case 4: Email Reports

User needs charts that render well in email clients with size constraints. Guide to: Simple sparklines without complex styling, fixed dimensions.

Use Case 5: Mobile Dashboards

User requires data visualization optimized for small screens. Guide to: Compact sparklines with touch-friendly tooltips, responsive dimensions.

Use Case 6: Performance Monitoring

User wants to visualize server metrics, response times, or system health. Guide to: Line sparklines with range bands for threshold zones (green/yellow/red).

Use Case 7: E-commerce Analytics

User needs product performance trends, sales velocity, or inventory indicators. Guide to: Column sparklines for sales counts, WinLoss for stock status.

Implementation Tips

When guiding users:

Start Simple: Begin with basic DataSource and Type, add features incrementally
Choose Type Based on Data: Line for continuous trends, Column for discrete counts, WinLoss for binary outcomes
Keep It Minimal: Sparklines work best with minimal styling - avoid clutter
Enable Tooltips: Since sparklines lack axes, tooltips provide essential details
Consider Context: Match sparkline size to surrounding content (inline vs. standalone)
Use Special Points: Highlight meaningful data points (high/low) for quick insights
Consistent Sizing: Use uniform dimensions when displaying multiple sparklines
Test Responsiveness: Ensure sparklines scale appropriately on different screen sizes

Read the appropriate reference files above based on the specific features the user needs to implement.

syncfusion-blazor-sparkline-charts

NPX Install

Tags

SKILL.md Content

Implementing Sparkline Charts

When to Use This Skill

Component Overview

Documentation and Navigation Guide

API Reference

Getting Started

Chart Types and Visualization

Data Presentation

Customization and Styling

Interactivity and Events

Globalization and Accessibility

Quick Start Example

Common Patterns

Pattern 1: KPI Dashboard with Sparklines

Pattern 2: Data Table with Inline Trends

Pattern 3: Win/Loss Indicator

Pattern 4: Highlighting Special Points

API Surface Reference

Common Use Cases

Use Case 1: Financial Dashboard

Use Case 2: Analytics Dashboard

Use Case 3: Reporting Tables

Use Case 4: Email Reports

Use Case 5: Mobile Dashboards

Use Case 6: Performance Monitoring

Use Case 7: E-commerce Analytics

Implementation Tips