Syncfusion Blazor Sparkline Charts

Implementing Sparkline Charts

NuGet: Syncfusion.Blazor.Charts + Syncfusion.Blazor.Themes (or Syncfusion.Blazor.Sparkline for individual package) Namespace: Syncfusion.Blazor.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:

@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:

@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:

@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:

@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:

@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:

1. Start Simple: Begin with basic DataSource and Type, add features incrementally 2. Choose Type Based on Data: Line for continuous trends, Column for discrete counts, WinLoss for binary outcomes 3. Keep It Minimal: Sparklines work best with minimal styling - avoid clutter 4. Enable Tooltips: Since sparklines lack axes, tooltips provide essential details 5. Consider Context: Match sparkline size to surrounding content (inline vs. standalone) 6. Use Special Points: Highlight meaningful data points (high/low) for quick insights 7. Consistent Sizing: Use uniform dimensions when displaying multiple sparklines 8. 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.

Sparkline API Reference

Table of Contents

• Overview
• Component
• SfSparkline
• Child Components
• Enumerations
• Notes
• Basic Example

Overview

This page summarizes the public API surface for Syncfusion Blazor Sparkline Charts. Use it as the quick reference for component properties, methods, events, child tags, and enumerations.

Component

SfSparkline

Primary component for rendering compact trend visualizations.

Core Properties

• DataSource - Data collection used to render the sparkline
• EnableGroupingSeparator - Formats large numeric values with separators
• EnableRtl - Enables right-to-left rendering
• EndPointColor - Color for the last point
• Fill - Primary fill or line color
• Format - Value format string
• Height - Component height
• HighPointColor - Color for the highest point
• ID - DOM identifier
• LineWidth - Thickness of the line stroke
• LowPointColor - Color for the lowest point
• NegativePointColor - Color for negative values
• Opacity - Opacity for the fill color
• Palette - Color palette for chart elements
• Query - Data query for filtered data binding
• RangePadding - Padding behavior for the value range
• StartPointColor - Color for the first point
• Theme - Theme applied to the component
• TiePointColor - Color for tie points in WinLoss sparklines
• Type - Sparkline type
• ValueType - Value interpretation mode
• Width - Component width
• XName - Field mapped to the X axis value
• YName - Field mapped to the Y axis value

Methods

• RefreshAsync() - Re-renders the sparkline programmatically

Events

• OnAxisRendering - Customizes the axis before rendering
• OnDataLabelRendering - Customizes data labels before rendering
• OnLoaded - Occurs after the sparkline is loaded and rendered
• OnMarkerRendering - Customizes markers before rendering
• OnPointRegionMouseClick - Occurs when a point region is clicked
• OnPointRendering - Customizes each point before rendering
• OnResizing - Occurs when the component is resized
• OnSeriesRendering - Customizes the sparkline series before rendering

Child Components

Use these nested tags to configure the sparkline:

• SparklineAxisLineSettings
• SparklineAxisSettings
• SparklineBorder
• SparklineContainerArea
• SparklineContainerAreaBorder
• SparklineDataLabelBorder
• SparklineDataLabelOffset
• SparklineDataLabelSettings
• SparklineEvents
• SparklineFont
• SparklineMarkerBorder
• SparklineMarkerSettings
• SparklinePadding
• SparklineRangeBand
• SparklineRangeBandSettings
• SparklineTooltipBorder
• SparklineTooltipSettings
• SparklineTooltipTextStyle
• SparklineTrackLineSettings

Enumerations

• SparklineRangePadding
• SparklineType
• SparklineValueType
• VisibleType

Notes

• Sparklines do not use the full chart API surface; keep implementations compact and focused.
• Prefer OnLoaded and RefreshAsync() for lifecycle-aware updates.
• Use VisibleType values such as All, High, Low, Start, End, and Negative to target special points.

Basic Example

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@SalesData"
              XName="Month"
              YName="Value"
              Type="SparklineType.Line"
              ValueType="SparklineValueType.Category"
              Height="60px"
              Width="180px"
              Fill="#3f51b5"
              LineWidth="2">
    <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.All }" Size="4"></SparklineMarkerSettings>
    <SparklineTooltipSettings TValue="SalesInfo" Visible="true"></SparklineTooltipSettings>
    <SparklineEvents OnLoaded="@OnSparklineLoaded"></SparklineEvents>
</SfSparkline>

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

    private List<SalesInfo> SalesData = new()
    {
        new SalesInfo { Month = "Jan", Value = 12 },
        new SalesInfo { Month = "Feb", Value = 18 },
        new SalesInfo { Month = "Mar", Value = 15 }
    };

    private void OnSparklineLoaded(System.EventArgs args)
    {
    }
}

Axis Customization

Table of Contents

• Overview
• Value Types
• Axis Line Customization
• Min and Max Values
• Axis Value Display

Overview

While sparklines typically don't display full axes like traditional charts, axis configuration controls data scaling, value types, and reference lines.

Value Types

The ValueType property specifies how X-axis values are interpreted. Use this property to define whether your data uses numeric values (SparklineValueType.Numeric), category strings (SparklineValueType.Category), or date/time values (SparklineValueType.DateTime).

Numeric Value Type (Default)

For numeric X-axis values, set ValueType="SparklineValueType.Numeric" and configure XName and YName properties to map to numeric data fields:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@ExpenditureData" 
              TValue="ExpenditureInfo"
              XName="Year" 
              YName="Expense"
              ValueType="SparklineValueType.Numeric"
              Type="SparklineType.Column"
              Height="80px" 
              Width="300px">
</SfSparkline>

@code {
    public class ExpenditureInfo
    {
        public int Year { get; set; }
        public int Expense { get; set; }
    }

    public List<ExpenditureInfo> ExpenditureData = new List<ExpenditureInfo>
    {
        new ExpenditureInfo { Year = 2018, Expense = 190 },
        new ExpenditureInfo { Year = 2019, Expense = 165 },
        new ExpenditureInfo { Year = 2020, Expense = 158 },
        new ExpenditureInfo { Year = 2021, Expense = 175 },
        new ExpenditureInfo { Year = 2022, Expense = 200 },
        new ExpenditureInfo { Year = 2023, Expense = 180 }
    };
}

Category Value Type

For string-based X-axis values, set ValueType="SparklineValueType.Category" to interpret X-axis values as categories with properties XName and YName:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@EmployeeData" 
              TValue="WorkDetails"
              XName="EmployeeName" 
              YName="WorkHours"
              ValueType="SparklineValueType.Category"
              Type="SparklineType.Column"
              Height="80px" 
              Width="350px">
</SfSparkline>

@code {
    public class WorkDetails
    {
        public string EmployeeName { get; set; }
        public double WorkHours { get; set; }
    }

    public List<WorkDetails> EmployeeData = new List<WorkDetails>
    {
        new WorkDetails { EmployeeName = "Robert", WorkHours = 60 },
        new WorkDetails { EmployeeName = "Andrew", WorkHours = 65 },
        new WorkDetails { EmployeeName = "Suyama", WorkHours = 70 },
        new WorkDetails { EmployeeName = "Michael", WorkHours = 80 },
        new WorkDetails { EmployeeName = "Janet", WorkHours = 55 }
    };
}

DateTime Value Type

For date/time X-axis values, set ValueType="SparklineValueType.DateTime" to handle temporal data with XName and YName properties mapping to DateTime and numeric fields respectively:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@TimeSeriesData" 
              TValue="TimeSeriesPoint"
              XName="Date" 
              YName="Value"
              ValueType="SparklineValueType.DateTime"
              Type="SparklineType.Line"
              Height="80px" 
              Width="350px">
</SfSparkline>

@code {
    public class TimeSeriesPoint
    {
        public DateTime Date { get; set; }
        public double Value { get; set; }
    }

    public List<TimeSeriesPoint> TimeSeriesData = new List<TimeSeriesPoint>
    {
        new TimeSeriesPoint { Date = new DateTime(2026, 1, 1), Value = 150 },
        new TimeSeriesPoint { Date = new DateTime(2026, 1, 8), Value = 165 },
        new TimeSeriesPoint { Date = new DateTime(2026, 1, 15), Value = 158 },
        new TimeSeriesPoint { Date = new DateTime(2026, 1, 22), Value = 172 },
        new TimeSeriesPoint { Date = new DateTime(2026, 1, 29), Value = 180 }
    };
}

Axis Line Customization

Display and customize the axis line (typically at Y=0) using the SparklineAxisSettings container and LineSettings property with options like Visible, Color, Width, and DashArray:

Basic Axis Line

Set Value property to specify the axis line position and use LineSettings with Visible="true" to display it:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@ProfitLossData" 
              Type="SparklineType.Column"
              Height="80px" 
              Width="300px">
    <SparklineAxisSettings Value="0"
                           LineSettings="new SparklineAxisLineSettings { Visible = true }">
    </SparklineAxisSettings>
</SfSparkline>

@code {
    public int[] ProfitLossData = new int[] { 12, -5, 8, -3, 15, -8, 10, 6 };
}

Styled Axis Line

Customize axis line appearance using SparklineAxisLineSettings with properties Color, Width, and DashArray:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@TemperatureData" 
              Type="SparklineType.Line"
              Height="80px" 
              Width="300px">
    <SparklineAxisSettings Value="0">
        <SparklineAxisLineSettings Visible="true"
                                   Color="#ff0000"
                                   Width="2"
                                   DashArray = "5,3">
        </SparklineAxisLineSettings>
    </SparklineAxisSettings>
</SfSparkline>

@code {
    public double[] TemperatureData = new double[] { -2.5, 1.2, -0.5, 3.1, 2.8, -1.5, 0.8 };
}

Axis Line Properties:

• Visible - Show/hide axis line
• Color - Line color
• Width - Line thickness
• DashArray - Dash pattern (e.g., "5,3" for dashed line)

Min and Max Values

Control the data range displayed on both X and Y axes using the SparklineAxisSettings properties MinY, MaxY, MinX, and MaxX:

Y-Axis Min/Max

Set MinY and MaxY properties in SparklineAxisSettings to define the Y-axis value range:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@ScoreData" 
              Type="SparklineType.Line"
              Height="80px" 
              Width="300px"
              LineWidth="2">
    <SparklineAxisSettings MinY="0" MaxY="100">
    </SparklineAxisSettings>
</SfSparkline>

@code {
    public int[] ScoreData = new int[] { 65, 72, 68, 85, 78, 92, 88 };
}

Use case: Display percentage data with fixed 0-100 range for consistency.

X-Axis Min/Max

Set MinX, MaxX, MinY, and MaxY properties to control both X and Y axis ranges simultaneously:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@SimpleData" 
              Type="SparklineType.Line"
              Height="80px" 
              Width="300px">
    <SparklineAxisSettings MinX="-1" MaxX="8" MinY="-1" MaxY="8">
    </SparklineAxisSettings>
</SfSparkline>

@code {
    public int[] SimpleData = new int[] { 0, 6, 4, 1, 3, 2, 5 };
}

Use case: Add padding around data by extending min/max beyond actual data range.

Dynamic Range Calculation

Calculate MinY and MaxY properties dynamically in the component lifecycle using OnInitialized() method:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@DynamicData" 
              Type="SparklineType.Area"
              Height="80px" 
              Width="300px">
    <SparklineAxisSettings MinY="@minValue" MaxY="@maxValue">
    </SparklineAxisSettings>
</SfSparkline>

@code {
    public double[] DynamicData = new double[] { 12.5, 18.2, 15.7, 22.3, 19.8 };
    
    private double minValue;
    private double maxValue;

    protected override void OnInitialized()
    {
        // Calculate min/max with 10% padding
        var dataMin = DynamicData.Min();
        var dataMax = DynamicData.Max();
        var range = dataMax - dataMin;
        
        minValue = dataMin - (range * 0.1);
        maxValue = dataMax + (range * 0.1);
    }
}

Axis Value Display

Zero-Based Axis

Display axis at Y=0 to show positive/negative values by setting the Value property to "0" in SparklineAxisSettings:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@ChangeData" 
              Type="SparklineType.Column"
              Height="80px" 
              Width="300px"
              Fill="#4CAF50" NegativePointColor ="#F44336 >
    <SparklineAxisSettings Value="0">

    <SparklineAxisLineSettings Visible="true"
                                   Color="#333"
                                   Width="1">
        </SparklineAxisLineSettings>

    </SparklineAxisSettings>
</SfSparkline>

@code {
    public int[] ChangeData = new int[] { 5, -3, 8, -6, 4, -2, 7, 3, -4, 6 };
}

Custom Axis Value

Set the Value property in SparklineAxisSettings to a specific Y-value (e.g., target threshold) to display a reference line:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@PerformanceData" 
              Type="SparklineType.Line"
              Height="80px" 
              Width="300px">
    <SparklineAxisSettings Value="75">

        <SparklineAxisLineSettings Visible="true"
                                   Color="#ff9800"
                                   Width="2"
                                   DashArray="5,5">
        </SparklineAxisLineSettings>

    </SparklineAxisSettings>
</SfSparkline>

@code {
    public int[] PerformanceData = new int[] { 65, 72, 78, 85, 80, 88, 92 };
}

Use case: Show target line at 75% performance threshold.

Complete Example: Multiple Axis Features

@using Syncfusion.Blazor.Charts

<div class="sparkline-container">
    <h4>Sales Performance vs Target</h4>
    
    <SfSparkline DataSource="@SalesPerformance" 
                  TValue="SalesData"
                  XName="Month" 
                  YName="Amount"
                  ValueType="SparklineValueType.Category"
                  Type="SparklineType.Column"
                  Height="100px" 
                  Width="400px"
                  Fill="#2196F3">
        
        <!-- Set Y-axis range to 0-120K -->
        <SparklineAxisSettings MinY="0" 
                               MaxY="120000"
                               Value="80000" >
        <SparklineAxisLineSettings Visible="true"
                                   Color="#4CAF50"
                                   Width="2"
                                   DashArray="5,3">
        </SparklineAxisLineSettings>
        </SparklineAxisSettings>
        
        <!-- Highlight high/low points -->
        <SparklineHighPointColor>#FFD700</SparklineHighPointColor>
        <SparklineLowPointColor>#FF6B6B</SparklineLowPointColor>
        
        <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.High, VisibleType.Low }" 
                                 Size="6">
        </SparklineMarkerSettings>
        
        <SparklineTooltipSettings TValue="SalesData" 
                                  Visible="true" 
                                  Format="${Month}: ${Amount:C}">
        </SparklineTooltipSettings>
    </SfSparkline>
    
    <p><em>Green dashed line shows $80K target</em></p>
</div>

@code {
    public class SalesData
    {
        public string Month { get; set; }
        public double Amount { get; set; }
    }

    public List<SalesData> SalesPerformance = new List<SalesData>
    {
        new SalesData { Month = "Jan", Amount = 65000 },
        new SalesData { Month = "Feb", Amount = 78000 },
        new SalesData { Month = "Mar", Amount = 85000 },
        new SalesData { Month = "Apr", Amount = 92000 },
        new SalesData { Month = "May", Amount = 88000 },
        new SalesData { Month = "Jun", Amount = 95000 }
    };
}

Common Patterns

Pattern: Percentage Charts

Always use 0-100 range for percentages by setting MinY="0" and MaxY="100" properties:

<SparklineAxisSettings MinY="0" MaxY="100">
</SparklineAxisSettings>

Pattern: Symmetric Range

For data centered around zero, use MinY="-@maxAbsValue" and MaxY="@maxAbsValue" properties for balanced display:

@using Syncfusion.Blazor.Charts

<SparklineAxisSettings MinY="-@maxAbsValue" MaxY="@maxAbsValue">
</SparklineAxisSettings>

@code {
    private double maxAbsValue = 50; // Calculated from data
}

Pattern: Fixed Baseline

Show consistent baseline across multiple sparklines by using Value, MinY, and MaxY properties consistently:

<SparklineAxisSettings Value="0" MinY="0" MaxY="1000">
</SparklineAxisSettings>

Axis customization ensures sparklines display data in the most meaningful context.

Chart Types

Table of Contents

• Overview
• Line Sparkline
• Area Sparkline
• Column Sparkline
• WinLoss Sparkline
• Pie Sparkline
• Type Selection Guide

Overview

Syncfusion Blazor Sparkline supports five chart types, each optimized for different data visualization scenarios. Change the type using the Type property set to SparklineType.Line, SparklineType.Area, SparklineType.Column, SparklineType.WinLoss, or SparklineType.Pie.

Available Types:

• Line - Default, shows continuous trends with connected points
• Area - Filled line chart, emphasizes magnitude
• Column - Vertical bars, ideal for comparing discrete values
• WinLoss - Binary outcomes (win/loss/tie)
• Pie - Proportional segments showing part-to-whole relationships

Line Sparkline

The default chart type that connects data points with a line, perfect for showing trends over time. Set Type="SparklineType.Line" and use properties XName and YName for data mapping, with optional LineWidth for customization.

Basic Line Sparkline

Create a line sparkline using Type="SparklineType.Line" with TValue, XName, and YName properties for data binding:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@PopulationData" 
              TValue="PopulationReport" 
              XName="Year" 
              YName="Population" 
              Type="SparklineType.Line"
              Width="200px" 
              Height="60px">
</SfSparkline>

@code {
    public class PopulationReport
    {
        public int Year { get; set; }
        public int Population { get; set; }
    }

    private List<PopulationReport> PopulationData = new List<PopulationReport> 
    {
        new PopulationReport { Year = 2005, Population = 20090440 },
        new PopulationReport { Year = 2006, Population = 20264080 },
        new PopulationReport { Year = 2007, Population = 20434180 },
        new PopulationReport { Year = 2008, Population = 21007310 },
        new PopulationReport { Year = 2009, Population = 21262640 },
        new PopulationReport { Year = 2010, Population = 21515750 },
        new PopulationReport { Year = 2011, Population = 21766710 },
        new PopulationReport { Year = 2012, Population = 22015580 }
    };
}

Styled Line Sparkline

Customize line sparkline appearance using properties Fill, LineWidth, Opacity, along with SparklineAxisSettings for range control and SparklineMarkerSettings for marker visibility:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@StockPrices" 
              Type="SparklineType.Line"
              Height="50px" 
              Width="250px"
              Fill="#2196F3"
              LineWidth="2">
    <SparklineAxisSettings MinY="90" MaxY="110"></SparklineAxisSettings>
    <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.All }" 
                             Size="4">
    </SparklineMarkerSettings>
</SfSparkline>

@code {
    public double[] StockPrices = new double[] { 95.5, 98.2, 97.8, 102.3, 100.5, 104.7, 103.2 };
}

When to use Line:

• Continuous data over time
• Stock prices, temperatures, metrics
• Showing trends and patterns
• Data with many points (10+)

Area Sparkline

A filled line chart that emphasizes the magnitude of values by filling the area beneath the line. Set Type="SparklineType.Area" with customization properties Fill and Opacity for appearance control.

Basic Area Sparkline

Create an area sparkline using Type="SparklineType.Area" with Fill property to set the fill color and Opacity for transparency control:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@SalesData" 
              Type="SparklineType.Area"
              Height="60px" 
              Width="200px"
              Fill="#4CAF50"
              Opacity="0.6">
</SfSparkline>

@code {
    public double[] SalesData = new double[] { 3000, 4200, 3800, 5100, 4700, 5500, 5200 };
}

Area with Gradient Effect

Enhance area sparkline with data binding using TValue, XName, YName properties and SparklineTooltipSettings for interactive tooltips:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@RevenueData" 
              TValue="RevenueInfo"
              XName="Quarter"
              YName="Amount"
              Type="SparklineType.Area"
              Height="80px" 
              Width="300px"
              Fill="4CAF50">
    <SparklineTooltipSettings TValue="RevenueInfo" 
                              Visible="true" 
                              Format="${Quarter}: ${Amount}">
    </SparklineTooltipSettings>
</SfSparkline>

@code {
    public class RevenueInfo
    {
        public string Quarter { get; set; }
        public double Amount { get; set; }
    }

    public List<RevenueInfo> RevenueData = new List<RevenueInfo>
    {
        new RevenueInfo { Quarter = "Q1", Amount = 250000 },
        new RevenueInfo { Quarter = "Q2", Amount = 320000 },
        new RevenueInfo { Quarter = "Q3", Amount = 290000 },
        new RevenueInfo { Quarter = "Q4", Amount = 380000 }
    };
}

When to use Area:

• Cumulative or total values over time
• Revenue, sales totals, accumulated metrics
• Emphasizing volume or magnitude
• Comparing filled areas visually

Column Sparkline

Displays data as vertical bars, ideal for comparing discrete values. Set Type="SparklineType.Column" with properties Fill for color and NegativePointColor for negative values.

Basic Column Sparkline

Create a column sparkline using Type="SparklineType.Column" with Fill property for bar color:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@MonthlySales" 
              Type="SparklineType.Column"
              Height="60px" 
              Width="250px"
              Fill="#FF9800">
</SfSparkline>

@code {
    public int[] MonthlySales = new int[] { 45, 67, 52, 78, 65, 82, 70, 88 };
}

Column with Negative Values

Display positive and negative values using NegativePointColor property and SparklineAxisSettings with Value="0" for axis baseline, along with SparklineAxisLineSettings for customization:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@ProfitLoss" 
              Type="SparklineType.Column"
              Height="80px" 
              Width="300px"
              Fill="#4CAF50" NegativePointColor ="#F44336">
    <SparklineAxisSettings Value="0" >
    
        <SparklineAxisLineSettings Visible="true"
                                   Color="#000"
                                   Width="1">
        </SparklineAxisLineSettings>

    </SparklineAxisSettings>
</SfSparkline>

@code {
    public int[] ProfitLoss = new int[] { 12, -5, 8, -3, 15, -8, 10, 6, -4, 11 };
}

Column with Custom Colors

Highlight specific data points using HighPointColor and LowPointColor properties along with SparklineMarkerSettings for marker visibility control:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@CategoryScores" 
              TValue="ScoreInfo"
              XName="Category"
              YName="Score"
              ValueType="SparklineValueType.Category"
              Type="SparklineType.Column"
              Height="80px" 
              Width="300px"
              HighPointColor="#FFD700"
              LowPointColor="#FF6B6B">
    <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.High, VisibleType.Low }">
    </SparklineMarkerSettings>
</SfSparkline>

@code {
    public class ScoreInfo
    {
        public string Category { get; set; }
        public int Score { get; set; }
    }

    public List<ScoreInfo> CategoryScores = new List<ScoreInfo>
    {
        new ScoreInfo { Category = "A", Score = 85 },
        new ScoreInfo { Category = "B", Score = 92 },
        new ScoreInfo { Category = "C", Score = 78 },
        new ScoreInfo { Category = "D", Score = 95 },
        new ScoreInfo { Category = "E", Score = 88 }
    };
}

When to use Column:

• Discrete, categorical data
• Monthly counts, category comparisons
• Showing individual values clearly
• Emphasizing specific data points
• Negative values (profit/loss scenarios)

WinLoss Sparkline

Specialized chart for binary outcomes: wins, losses, and ties. Set Type="SparklineType.WinLoss" with properties Fill for wins, NegativePointColor for losses, and TiePointColor for ties.

Basic WinLoss Sparkline

Create a WinLoss sparkline using Type="SparklineType.WinLoss" with color properties Fill, NegativePointColor, and TiePointColor:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@GameResults" 
              Type="SparklineType.WinLoss"
              Height="60px" 
              Width="300px"
              Fill="#4CAF50"
              TiePointColor="#FFC107" NegativePointColor="#F44336">
</SfSparkline>

@code {
    // 1 = Win, -1 = Loss, 0 = Tie
    public int[] GameResults = new int[] { 1, 1, -1, 1, 0, 1, -1, -1, 1, 1, 0, 1 };
}

WinLoss with Axis Line

Add axis baseline using SparklineAxisSettings with MinY, MaxY, and Value properties, along with SparklineAxisLineSettings for line customization:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@TradingOutcomes" 
              Type="SparklineType.WinLoss"
              Height="80px" 
              Width="400px"
              Fill="#28a745"
              TiePointColor="#ffc107" NegativePointColor="#dc3545">
    <SparklineAxisSettings MinY="-1" 
                           MaxY="1" 
                           Value="0">

        <SparklineAxisLineSettings Visible="true"
                                   Color="#333"
                                   Width="2">
        </SparklineAxisLineSettings>
    </SparklineAxisSettings>
    <SparklineTooltipSettings TValue="int" 
                              Visible="true" 
                              >
    </SparklineTooltipSettings>
</SfSparkline>

@code {
    public int[] TradingOutcomes = new int[] { 1, 1, -1, 0, 1, 1, 1, -1, 0, -1, 1, 1, -1, 1 };
}

Sports Team Performance

Create a team record visualization with Type="SparklineType.WinLoss" using Fill, NegativePointColor, and TiePointColor properties for visual distinction:

@using Syncfusion.Blazor.Charts
<div class="team-record">
    <h4>Season Record: 8-4-2</h4>
    <SfSparkline DataSource="@SeasonResults" 
                  Type="SparklineType.WinLoss"
                  Height="50px" 
                  Width="350px"
                  Fill="#0066cc"
                  TiePointColor="#999999" NegativePointColor="#cc0000">
    </SfSparkline>
</div>

@code {
    public int[] SeasonResults = new int[] 
    { 
        1, 1, -1, 1, 0, -1, 1, 1, 1, 0, -1, -1, 1, 1 
    };
}

When to use WinLoss:

• Binary outcomes (success/failure)
• Game results, trading outcomes
• Pass/fail scenarios
• Up/down trends
• Quality control (pass/fail tests)

Data Values:

• 1 = Win/Success/Positive (uses Fill color)
• -1 = Loss/Failure/Negative (uses NegativePointColor)
• 0 = Tie/Neutral (uses TiePointColor)

Pie Sparkline

Displays data as proportional segments in a circular chart, showing part-to-whole relationships. Set Type="SparklineType.Pie" with optional SparklineDataLabelSettings for label display.

Basic Pie Sparkline

Create a pie sparkline using Type="SparklineType.Pie" with Height and Width properties to define chart dimensions:

<SfSparkline DataSource="@MarketShare" 
              Type="SparklineType.Pie"
              Height="100px" 
              Width="100px">
</SfSparkline>

@code {
    public double[] MarketShare = new double[] { 35, 28, 20, 17 };
}

Pie with Labels

Add data labels using SparklineDataLabelSettings with Visible property to display segment information alongside XName and YName for data mapping:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@BudgetAllocation" 
              TValue="BudgetItem"
              XName="Category"
              YName="Amount"
              Type="SparklineType.Pie"
              Height="120px" 
              Width="120px">
    <SparklineDataLabelSettings Visible="new List<VisibleType> { VisibleType.All }">
    </SparklineDataLabelSettings>
</SfSparkline>

@code {
    public class BudgetItem
    {
        public string Category { get; set; }
        public double Amount { get; set; }
    }

    public List<BudgetItem> BudgetAllocation = new List<BudgetItem>
    {
        new BudgetItem { Category = "Marketing", Amount = 45000 },
        new BudgetItem { Category = "Development", Amount = 65000 },
        new BudgetItem { Category = "Sales", Amount = 38000 },
        new BudgetItem { Category = "Support", Amount = 22000 }
    };
}

When to use Pie:

• Proportional data (percentages, shares)
• Budget allocation, market share
• Distribution visualization
• Limited categories (3-6 segments ideal)
• Part-to-whole relationships

Note: Pie sparklines are less common than other types due to their larger footprint and reduced effectiveness at small sizes.

Type Selection Guide

Select the appropriate Type property value (SparklineType.Line, .Area, .Column, .WinLoss, or .Pie) based on your data characteristics and visualization needs.

Decision Matrix

By Data Characteristics

Use Type property value based on your data pattern distribution.

Continuous Data (many connected points):

• Use Line or Area
• Examples: Time series, temperatures, prices

Discrete Data (separate, countable items):

• Use Column
• Examples: Monthly totals, category counts

Binary Data (two or three outcomes):

• Use WinLoss
• Examples: Pass/fail, win/loss/tie

Proportional Data (parts of a whole):

• Use Pie
• Examples: Percentages, market share

Performance Considerations

Optimize rendering performance by considering data point count based on Type property selection.

Data Point Count:

• Line/Area: Efficient with 100+ points
• Column: Best with <50 points (visual clarity)
• WinLoss: Any count (equal-width bars)
• Pie: Best with 3-8 segments

Visual Clarity:

• Small spaces: Line or WinLoss
• Medium spaces: Column or Area
• Larger spaces: Any type, Pie requires most space

Mixing Types in a Dashboard

Display multiple sparklines with different Type property values (e.g., SparklineType.Area, .Column, .WinLoss) in a single dashboard for comprehensive insights:

@using Syncfusion.Blazor.Charts
<div class="metrics-dashboard">
    <div class="metric-card">
        <h5>Revenue Trend</h5>
        <SfSparkline DataSource="@Revenue" Type="SparklineType.Area" Height="50px" Width="150px">
        </SfSparkline>
    </div>
    
    <div class="metric-card">
        <h5>Monthly Orders</h5>
        <SfSparkline DataSource="@Orders" Type="SparklineType.Column" Height="50px" Width="150px">
        </SfSparkline>
    </div>
    
    <div class="metric-card">
        <h5>Conversion Success</h5>
        <SfSparkline DataSource="@Conversions" Type="SparklineType.WinLoss" Height="50px" Width="150px">
        </SfSparkline>
    </div>
</div>

@code {
    public double[] Revenue = new double[] { 25000, 28000, 26000, 31000, 29000, 33000 };
    public int[] Orders = new int[] { 450, 520, 480, 610, 550, 680 };
    public int[] Conversions = new int[] { 1, 1, -1, 1, 0, 1, -1, 1, 1, 0 };
}

Choose the type that best communicates your data story to users.

Data Binding

Table of Contents

• DataSource Property
• Simple Array Binding
• Numeric Arrays
• Integer Arrays
• Object Collection Binding
• Basic Object Binding
• Numeric X-Axis Objects
• DateTime X-Axis Objects
• ValueType Options
• SparklineValueType.Numeric (Default)
• SparklineValueType.Category
• SparklineValueType.DateTime
• Dynamic Data Updates
• Updating Data Source
• Real-Time Data Updates
• Async Data Loading
• Data Transformation
• Filtering Data
• Aggregating Data
• Common Data Binding Patterns
• Troubleshooting

This guide covers all data source configurations for Syncfusion Blazor Sparkline Charts, from simple arrays to complex object collections.

DataSource Property

The DataSource property accepts various data structures:

• Simple arrays: double[], int[], float[]
• Object collections: List<T>, IEnumerable<T>
• DataManager: For remote data binding

Simple Array Binding

Numeric Arrays

The simplest form - direct numeric array binding:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@SimpleData" 
              Height="50px" 
              Width="200px">
</SfSparkline>

@code {
    public double[] SimpleData = new double[] { 3, 6, 4, 1, 3, 2, 5 };
}

When to use: Quick prototyping, inline data, single value series.

Integer Arrays

```razor' @using Syncfusion.Blazor.Charts <SfSparkline DataSource="@DailyCounts" Height="50px" Width="250px" Type="SparklineType.Column"> </SfSparkline>

@code { public int[] DailyCounts = new int[] { 120, 156, 142, 189, 165, 178, 195 }; }

## Object Collection Binding

### Basic Object Binding

Bind to custom objects using `XName` and `YName`:

@using Syncfusion.Blazor.Charts <SfSparkline DataSource="@SalesData" TValue="SalesInfo" XName="Month" YName="Sales" ValueType="SparklineValueType.Category" Height="60px" Width="300px"> </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 } }; }

**Key Properties:**
- `TValue="SalesInfo"` - Generic type parameter
- `XName="Month"` - Property name for X-axis
- `YName="Sales"` - Property name for Y-axis
- `ValueType="Category"` - Required when X-axis is string-based

### Numeric X-Axis Objects

When X-axis values are numeric:

@using Syncfusion.Blazor.Charts <SfSparkline DataSource="@TemperatureData" TValue="TempReading" XName="Hour" YName="Temperature" Height="60px" Width="300px"> </SfSparkline>

@code { public class TempReading { public int Hour { get; set; } public double Temperature { get; set; } }

public List<TempReading> TemperatureData = new List<TempReading> { new TempReading { Hour = 0, Temperature = 18.5 }, new TempReading { Hour = 3, Temperature = 16.2 }, new TempReading { Hour = 6, Temperature = 15.8 }, new TempReading { Hour = 9, Temperature = 22.1 }, new TempReading { Hour = 12, Temperature = 28.4 }, new TempReading { Hour = 15, Temperature = 31.2 }, new TempReading { Hour = 18, Temperature = 26.7 }, new TempReading { Hour = 21, Temperature = 21.3 } }; }

**Note:** ValueType defaults to `Numeric` - no need to specify.

### DateTime X-Axis Objects

For time-series data with DateTime:

@using Syncfusion.Blazor.Charts <SfSparkline DataSource="@StockPrices" TValue="StockData" XName="Date" YName="Price" ValueType="SparklineValueType.DateTime" Height="60px" Width="350px"> <SparklineTooltipSettings TValue="StockData" Visible="true" Format="${Date:MMM dd}: $${Price}"> </SparklineTooltipSettings> </SfSparkline>

@code { public class StockData { public DateTime Date { get; set; } public double Price { get; set; } }

public List<StockData> StockPrices = new List<StockData> { new StockData { Date = new DateTime(2026, 1, 1), Price = 145.20 }, new StockData { Date = new DateTime(2026, 1, 2), Price = 147.50 }, new StockData { Date = new DateTime(2026, 1, 3), Price = 146.80 }, new StockData { Date = new DateTime(2026, 1, 6), Price = 149.30 }, new StockData { Date = new DateTime(2026, 1, 7), Price = 151.00 }, new StockData { Date = new DateTime(2026, 1, 8), Price = 148.90 } }; }

## ValueType Options

The `ValueType` property determines how X-axis values are interpreted:

### SparklineValueType.Numeric (Default)

For numeric X-axis values:

@using Syncfusion.Blazor.Charts <SfSparkline DataSource="@data" TValue="DataPoint" XName="Index" YName="Value" Height="80px" Width="400px" LineWidth="2" ValueType="SparklineValueType.Numeric"> </SfSparkline>

@code { private List<DataPoint> data = new() { new DataPoint { Index = 1, Value = 10 }, new DataPoint { Index = 2, Value = 20 }, new DataPoint { Index = 3, Value = 15 }, new DataPoint { Index = 4, Value = 30 } };

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

**Use when:** X-axis is int, double, float, decimal

### SparklineValueType.Category

For string/category X-axis values:

@using Syncfusion.Blazor.Charts <SfSparkline DataSource="@data" TValue="DataPoint" XName="Category" YName="Value" Height="80px" Width="400px" LineWidth="2" ValueType="SparklineValueType.Category"> </SfSparkline>

@code { private List<DataPoint> data = new() { new DataPoint { Category = "Jan", Value = 10 }, new DataPoint { Category = "Feb", Value = 20 }, new DataPoint { Category = "Mar", Value = 15 }, new DataPoint { Category = "Apr", Value = 30 }, new DataPoint { Category = "May", Value = 18 } };

public class DataPoint { public string Category { get; set; } = string.Empty; public double Value { get; set; } } }

**Use when:** X-axis is string (months, names, categories)

### SparklineValueType.DateTime

For date/time X-axis values:

@using Syncfusion.Blazor.Charts <SfSparkline DataSource="@data" TValue="DataPoint" XName="Timestamp" YName="Value" Height="80px" Width="400px" LineWidth="3 ValueType="SparklineValueType.DateTime"> </SfSparkline> @code { private List<DataPoint> data = new() { new DataPoint { Timestamp = DateTime.Now.AddMinutes(-20), Value = 10 }, new DataPoint { Timestamp = DateTime.Now.AddMinutes(-15), Value = 25 }, new DataPoint { Timestamp = DateTime.Now.AddMinutes(-10), Value = 15 }, new DataPoint { Timestamp = DateTime.Now.AddMinutes(-5), Value = 35 }, new DataPoint { Timestamp = DateTime.Now, Value = 20 } };

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

**Use when:** X-axis is DateTime

## Dynamic Data Updates

### Updating Data Source

Replace the entire data source:

@using Syncfusion.Blazor.Charts <button @onclick="UpdateData">Refresh Data</button>

<SfSparkline @ref="sparklineObj" DataSource="@CurrentData" Height="50px" Width="250px"> </SfSparkline>

@code { private SfSparkline<double> sparklineObj; public double[] CurrentData = new double[] { 3, 6, 4, 1, 3, 2, 5 };

private void UpdateData() { Random random = new Random(); CurrentData = Enumerable.Range(1, 7) .Select(_ => random.Next(1, 10)) .Select(x => (double)x) .ToArray(); StateHasChanged(); } }

### Real-Time Data Updates

Add new points incrementally:

@using Syncfusion.Blazor.Charts <button @onclick="AddDataPoint">Add Point</button>

<SfSparkline DataSource="@LiveData" Height="50px" Width="300px" LineWidth="2"> </SfSparkline>

@code { private List<double> LiveData = new List<double> { 5, 7, 4, 8, 6 };

private void AddDataPoint() { Random random = new Random(); var newData = LiveData.ToList(); newData.Add(random.Next(1, 10));

// Keep only last 20 points if (newData.Count > 20) { newData.RemoveAt(0); } LiveData = newData; StateHasChanged(); } }

### Async Data Loading

Load data asynchronously from API:

@using Syncfusion.Blazor.Charts @if (isLoading) { <p>Loading data...</p> } else { <SfSparkline DataSource="@ApiData" TValue="MetricData" XName="Timestamp" YName="Value" Height="60px" Width="300px"> </SfSparkline> }

@code { public class MetricData { public DateTime Timestamp { get; set; } public double Value { get; set; } }

private bool isLoading = true; private List<MetricData> ApiData = new List<MetricData>();

protected override async Task OnInitializedAsync() { await LoadDataAsync(); }

private async Task LoadDataAsync() { isLoading = true;

// Simulate API call await Task.Delay(1000);

ApiData = FetchDataFromApi(); isLoading = false; StateHasChanged(); }

private List<MetricData> FetchDataFromApi() { // Replace with actual API call return Enumerable.Range(0, 10) .Select(i => new MetricData { Timestamp = DateTime.Now.AddHours(-i), Value = new Random().Next(50, 100) }) .Reverse() .ToList(); } }

## Data Transformation

### Filtering Data

Show only relevant data points:

@using Syncfusion.Blazor.Charts <button @onclick="() => FilterByThreshold(50)">Show Above 50</button> <button @onclick="ShowAllData">Show All</button>

<SfSparkline DataSource="@FilteredData" Height="50px" Width="250px"> </SfSparkline>

@code { private double[] AllData = new double[] { 30, 65, 42, 78, 55, 38, 82, 45, 70 }; private double[] FilteredData;

protected override void OnInitialized() { FilteredData = AllData; }

private void FilterByThreshold(double threshold) { FilteredData = AllData.Where(x => x >= threshold).ToArray(); StateHasChanged(); }

private void ShowAllData() { FilteredData = AllData; StateHasChanged(); } }

### Aggregating Data

Group and aggregate before displaying:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@MonthlyAverages" TValue="MonthlyData" XName="Month" YName="Average" ValueType="SparklineValueType.Category" Height="60px" Width="300px"> </SfSparkline>

@code { public class DailyReading { public DateTime Date { get; set; } public double Value { get; set; } }

public class MonthlyData { public string Month { get; set; } public double Average { get; set; } }

private List<DailyReading> DailyData = new List<DailyReading>(); // Populated elsewhere private List<MonthlyData> MonthlyAverages;

protected override void OnInitialized() { // Group by month and calculate averages MonthlyAverages = DailyData .GroupBy(d => d.Date.ToString("MMM yyyy")) .Select(g => new MonthlyData { Month = g.Key, Average = g.Average(d => d.Value) }) .ToList(); } }

## Common Data Binding Patterns

### Pattern 1: Database Entity Binding

Bind directly to EF Core entities:

@using Syncfusion.Blazor.Charts @inject ApplicationDbContext DbContext

<SfSparkline DataSource="@orders" TValue="Order" XName="OrderDate" YName="TotalAmount" ValueType="SparklineValueType.DateTime" Height="60px" Width="300px"> </SfSparkline>

@code { private List<Order> orders;

protected override async Task OnInitializedAsync() { orders = await DbContext.Orders .Where(o => o.OrderDate >= DateTime.Now.AddMonths(-1)) .OrderBy(o => o.OrderDate) .ToListAsync(); } }

### Pattern 2: JSON API Data

Deserialize and bind JSON data:

@inject HttpClient Http @using Syncfusion.Blazor.Charts <SfSparkline DataSource="@metrics" TValue="ApiMetric" XName="Date" YName="Count" Height="60px" Width="300px"> </SfSparkline>

@code { public class ApiMetric { public string Date { get; set; } public int Count { get; set; } }

private List<ApiMetric> metrics;

protected override async Task OnInitializedAsync() { metrics = await Http.GetFromJsonAsync<List<ApiMetric>>("api/metrics"); } }

### Pattern 3: Computed Properties

Use calculated fields for Y-axis:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@products" TValue="Product" XName="Name" YName="ProfitMargin" ValueType="SparklineValueType.Category" Height="60px" Width="300px"> </SfSparkline>

@code { public class Product { public string Name { get; set; } public double Cost { get; set; } public double Price { get; set; }

// Computed property for sparkline public double ProfitMargin => ((Price - Cost) / Price) * 100; }

private List<Product> products = new List<Product> { new Product { Name = "Widget A", Cost = 25, Price = 50 }, new Product { Name = "Widget B", Cost = 35, Price = 60 }, new Product { Name = "Widget C", Cost = 40, Price = 70 } }; }

## Troubleshooting

### Issue: No Data Displayed

**Symptoms:** Sparkline renders but shows no line/bars

**Solutions:**
1. Verify DataSource is not null or empty
2. Check XName/YName match property names exactly (case-sensitive)
3. Ensure ValueType matches X-axis data type
4. Provide TValue for object collections
5. Check data values are not all the same (no variation)

### Issue: "Cannot implicitly convert type"

**Symptoms:** Compilation error with DataSource

**Solutions:**
1. Ensure TValue matches your data model type
2. Use correct array type (double[], int[], etc.)
3. Check generic type parameters

### Issue: DateTime Not Rendering Correctly

**Symptoms:** DateTime X-axis shows incorrectly

**Solutions:**
1. Set `ValueType="SparklineValueType.DateTime"`
2. Ensure XName property is actually DateTime type
3. Check DateTime values are valid and sequential

**Data binding is the foundation of sparklines - ensure it's configured correctly for optimal results.**

Dimensions and Appearance

Table of Contents

• Overview
• Sizing
• Container-Based Sizing
• Explicit Width and Height
• Responsive Design
• Padding Configuration
• Border Customization
• Background and Fill
• Line Width
• RTL Support
• Container Area Styling
• Complete Examples
• Best Practices

Overview

Controlling dimensions and appearance is crucial for creating visually appealing and functional Sparkline charts. Syncfusion Blazor Sparkline provides comprehensive options for sizing, styling, and layout customization using properties like Width, Height, SparklinePadding, SparklineContainerAreaBorder, Fill, Opacity, LineWidth, and EnableRtl.

Key Customization Areas:

• Width and Height configuration
• Padding for internal spacing
• Border styling
• Background colors
• Line width for line-based charts
• Right-to-left (RTL) layout support
• Container area appearance

Sizing

Control sparkline dimensions using Width and Height properties with pixel, percentage, or container-based sizing options. The Width property defines the horizontal span while Height property defines the vertical span of the sparkline.

Container-Based Sizing

The sparkline automatically adapts to its container's dimensions when explicit Width and Height properties are not specified. When Width and Height are omitted, the SfSparkline component will inherit the dimensions from its parent container element.

@using Syncfusion.Blazor.Charts

<div style="width: 650px; height: 350px;">
    <SfSparkline XName="Year" 
                  YName="Population" 
                  TValue="PopulationReport" 
                  DataSource="@PopulationData">
    </SfSparkline>
</div>

@code {
    public class PopulationReport
    {
        public int Year { get; set; }
        public int Population { get; set; }
    }
    
    private List<PopulationReport> PopulationData = new List<PopulationReport> 
    {
        new PopulationReport { Year = 2005, Population = 20090440 },
        new PopulationReport { Year = 2006, Population = 20264080 },
        new PopulationReport { Year = 2007, Population = 20434180 },
        new PopulationReport { Year = 2008, Population = 21007310 },
        new PopulationReport { Year = 2009, Population = 21262640 },
        new PopulationReport { Year = 2010, Population = 21515750 },
        new PopulationReport { Year = 2011, Population = 21766710 },
        new PopulationReport { Year = 2012, Population = 22015580 }
    };
}

Explicit Width and Height

Set specific dimensions using the Width and Height properties for precise control.

Pixel-Based Sizing

Specify exact pixel dimensions using the Width property with pixel units (e.g., "350px") and the Height property with pixel units (e.g., "150px") for precise control over the sparkline size:

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@SalesData" 
              Width="350px" 
              Height="150px"
              Type="SparklineType.Line">
</SfSparkline>

@code {
    public double[] SalesData = new double[] 
    { 
        120, 145, 132, 168, 155, 178, 165 
    };
}

Percentage-Based Sizing

Size relative to the container using percentage values for the Width property (e.g., "80%") and Height property (e.g., "70%") to maintain responsiveness:

@using Syncfusion.Blazor.Charts

<div style="width: 650px; height: 350px;">
    <SfSparkline DataSource="@RevenueData" 
                  Width="80%" 
                  Height="70%"
                  Type="SparklineType.Area"
                  Fill="#E3F2FD">
    </SfSparkline>
</div>

@code {
    public int[] RevenueData = new int[] 
    { 
        250, 320, 290, 380, 350, 420, 395 
    };
}

Multiple Sizes Example

Demonstrate multiple sparkline sizes using different combinations of the Width and Height properties to achieve small, medium, and large sparkline layouts:

@using Syncfusion.Blazor.Charts

<div class="sparkline-sizes">
    <!-- Small -->
    <div class="size-demo">
        <h5>Small (200x60)</h5>
        <SfSparkline DataSource="@Data" 
                      Width="200px" 
                      Height="60px"
                      Type="SparklineType.Line">
        </SfSparkline>
    </div>
    
    <!-- Medium -->
    <div class="size-demo">
        <h5>Medium (350x100)</h5>
        <SfSparkline DataSource="@Data" 
                      Width="350px" 
                      Height="100px"
                      Type="SparklineType.Line">
        </SfSparkline>
    </div>
    
    <!-- Large -->
    <div class="size-demo">
        <h5>Large (500x150)</h5>
        <SfSparkline DataSource="@Data" 
                      Width="500px" 
                      Height="150px"
                      Type="SparklineType.Line">
        </SfSparkline>
    </div>
</div>

@code {
    public int[] Data = new int[] { 3, 6, 4, 8, 5, 9, 7, 11, 8, 10 };
}

Responsive Design

Create responsive sparklines that adapt to screen size using the Width property set to "100%" combined with CSS max-width constraints and the SparklineBorder property for visual definition:

@using Syncfusion.Blazor.Charts

<div class="responsive-container" style="width: 100%; max-width: 800px;">
    <SfSparkline DataSource="@MetricsData" 
                  Width="100%" 
                  Height="120px"
                  Type="SparklineType.Area"
                  Fill="#FFF3E0"
                  LineWidth="2">
        <SparklineBorder Color="#FF9800" Width="2">
        </SparklineBorder>
    </SfSparkline>
</div>

@code {
    public double[] MetricsData = new double[] 
    { 
        95.5, 98.2, 97.8, 102.3, 100.5, 104.7, 103.2, 101.8 
    };
}

CSS Grid Layout

Create responsive grid layouts with sparklines using CSS Grid combined with the Width property set to "100%" for flexible component sizing within grid cells:

@using Syncfusion.Blazor.Charts

<style>
    .sparkline-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        padding: 20px;
    }
    
    .sparkline-card {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
    }
</style>

<div class="sparkline-grid">
    <div class="sparkline-card">
        <h5>Revenue</h5>
        <SfSparkline DataSource="@Revenue" Width="100%" Height="80px">
        </SfSparkline>
    </div>
    
    <div class="sparkline-card">
        <h5>Orders</h5>
        <SfSparkline DataSource="@Orders" Width="100%" Height="80px">
        </SfSparkline>
    </div>
    
    <div class="sparkline-card">
        <h5>Customers</h5>
        <SfSparkline DataSource="@Customers" Width="100%" Height="80px">
        </SfSparkline>
    </div>
</div>

@code {
    public double[] Revenue = new double[] { 250, 280, 265, 310, 295, 335 };
    public int[] Orders = new int[] { 450, 520, 480, 610, 550, 680 };
    public int[] Customers = new int[] { 1200, 1450, 1380, 1620, 1550, 1780 };
}

Padding Configuration

Control spacing between the sparkline content and its container using the SparklinePadding component with its properties: Top for top spacing, Bottom for bottom spacing, Left for left spacing, and Right for right spacing.

Basic Padding

Apply uniform padding using the SparklinePadding component with the Left, Right, Bottom, and Top properties set to the same value to create equal spacing on all sides:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 3, 6, 4, 1, 3, 2, 5 }" 
              Type="SparklineType.Area" 
              Height="200px" 
              Width="350px" 
              Fill="#B2CFFF" 
              LineWidth="1">
    <SparklineContainerArea>
        <SparklineContainerAreaBorder Color="#033E96" Width="2">
        </SparklineContainerAreaBorder>
    </SparklineContainerArea>
    <SparklineBorder Color="#033E96" Width="1">
    </SparklineBorder>
    <SparklinePadding Left="20" Right="20" Bottom="20" Top="20">
    </SparklinePadding>
</SfSparkline>

Individual Side Padding

Set different padding values for each side using the SparklinePadding component with individual property settings: Top property controls top padding, Bottom property controls bottom padding, Left property controls left padding, and Right property controls right padding:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@ChartData" 
              Type="SparklineType.Line" 
              Height="180px" 
              Width="450px"
              LineWidth="2">
    <SparklineDataLabelSettings Visible="new List<VisibleType> { VisibleType.All }">
    </SparklineDataLabelSettings>
    <SparklinePadding Top="35" Bottom="10" Left="15" Right="15">
    </SparklinePadding>
</SfSparkline>

@code {
    public int[] ChartData = new int[] { 42, 55, 48, 62, 58, 67, 61 };
}

Padding for Data Labels

When using the SparklineDataLabelSettings component with the Visible property, add extra top padding using the SparklinePadding component with its Top property to prevent label clipping:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@LabeledData" 
              Type="SparklineType.Column" 
              Height="180px" 
              Width="450px"
              Fill="#4CAF50">
    <SparklineDataLabelSettings Visible="new List<VisibleType> { VisibleType.All }">
        <SparklineFont Size="12" FontWeight="600">
        </SparklineFont>
    </SparklineDataLabelSettings>
    <SparklinePadding Top="40" Bottom="15" Left="10" Right="10">
    </SparklinePadding>
</SfSparkline>

@code {
    public int[] LabeledData = new int[] { 85, 92, 78, 95, 88, 91, 87 };
}

Asymmetric Padding

Create asymmetric padding by setting different values for each side using the SparklinePadding component with its Top, Bottom, Left, and Right properties configured with distinct values:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@AsymmetricData" 
              Type="SparklineType.Area" 
              Height="160px" 
              Width="400px"
              Fill="#FFE0B2">
    <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.All }">
    </SparklineMarkerSettings>
    <SparklinePadding Top="25" Bottom="10" Left="30" Right="10">
    </SparklinePadding>
</SfSparkline>

@code {
    public int[] AsymmetricData = new int[] { 12, 18, 15, 22, 19, 25, 21 };
}

Border Customization

Style the sparkline's container border using the SparklineContainerAreaBorder component with the Color property for border color and the Width property for border thickness, or use the SparklineBorder component for styling the data series border.

Basic Border

Add a border to the sparkline container using the SparklineContainerArea component with the SparklineContainerAreaBorder child component, configuring the Color property for border color and the Width property for border thickness:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 3, 6, 4, 1, 3, 2, 5 }" 
              Type="SparklineType.Area" 
              Height="200px" 
              Width="350px" 
              Fill="#B2CFFF" 
              LineWidth="1">
    <SparklineContainerArea>
        <SparklineContainerAreaBorder Color="#033E96" Width="1">
        </SparklineContainerAreaBorder>
    </SparklineContainerArea>
</SfSparkline>

Thick Border with Padding

Combine the SparklineContainerAreaBorder component with a higher Width property value and the SparklinePadding component with its Top, Bottom, Left, and Right properties for enhanced visual separation:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@BorderedData" 
              Type="SparklineType.Column" 
              Height="180px" 
              Width="400px"
              Fill="#FF9800">
    <SparklineContainerArea>
        <SparklineContainerAreaBorder Color="#E65100" Width="3">
        </SparklineContainerAreaBorder>
    </SparklineContainerArea>
    <SparklinePadding Top="15" Bottom="15" Left="15" Right="15">
    </SparklinePadding>
</SfSparkline>

@code {
    public int[] BorderedData = new int[] { 45, 58, 52, 68, 55, 72, 65 };
}

Colored Border Variations

Create different border colors using the SparklineContainerAreaBorder component with the Color property set to various color values to achieve different visual styles:

@using Syncfusion.Blazor.Charts

<div class="border-examples">
    <!-- Solid Blue Border -->
    <SfSparkline DataSource="@Data" Height="100px" Width="250px" Fill="#E3F2FD">
        <SparklineContainerArea>
            <SparklineContainerAreaBorder Color="#2196F3" Width="2">
            </SparklineContainerAreaBorder>
        </SparklineContainerArea>
        <SparklinePadding Top="10" Bottom="10" Left="10" Right="10">
        </SparklinePadding>
    </SfSparkline>
    
    <!-- Solid Green Border -->
    <SfSparkline DataSource="@Data" Height="100px" Width="250px" Fill="#E8F5E9">
        <SparklineContainerArea>
            <SparklineContainerAreaBorder Color="#4CAF50" Width="2">
            </SparklineContainerAreaBorder>
        </SparklineContainerArea>
        <SparklinePadding Top="10" Bottom="10" Left="10" Right="10">
        </SparklinePadding>
    </SfSparkline>
    
    <!-- Solid Red Border -->
    <SfSparkline DataSource="@Data" Height="100px" Width="250px" Fill="#FFEBEE">
        <SparklineContainerArea>
            <SparklineContainerAreaBorder Color="#F44336" Width="2">
            </SparklineContainerAreaBorder>
        </SparklineContainerArea>
        <SparklinePadding Top="10" Bottom="10" Left="10" Right="10">
        </SparklinePadding>
    </SfSparkline>
</div>

@code {
    public int[] Data = new int[] { 3, 6, 4, 8, 5, 9, 7 };
}

SparklineBorder vs ContainerAreaBorder

Compare the SparklineBorder component (border around data series) with the SparklineContainerAreaBorder component (border around entire container), both using the Color property for color and the Width property for thickness:

@using Syncfusion.Blazor.Charts

<!-- SparklineBorder: Border around the data series -->
<SfSparkline DataSource="@Data" Height="120px" Width="300px"
              Type="SparklineType.Area" Fill="#E3F2FD">
    <SparklineBorder Color="#2196F3" Width="2">
    </SparklineBorder>
</SfSparkline>

<!-- SparklineContainerAreaBorder: Border around entire container -->
<SfSparkline DataSource="@Data" Height="120px" Width="300px"
              Type="SparklineType.Area" Fill="#E3F2FD">
    <SparklineContainerArea>
        <SparklineContainerAreaBorder Color="#1976D2" Width="2">
        </SparklineContainerAreaBorder>
    </SparklineContainerArea>
</SfSparkline>

<!-- Both Borders -->
<SfSparkline DataSource="@Data" Height="120px" Width="300px"
              Type="SparklineType.Area" Fill="#E3F2FD">
    <SparklineBorder Color="#2196F3" Width="2">
    </SparklineBorder>
    <SparklineContainerArea>
        <SparklineContainerAreaBorder Color="#1976D2" Width="3">
        </SparklineContainerAreaBorder>
    </SparklineContainerArea>
    <SparklinePadding Top="10" Bottom="10" Left="10" Right="10">
    </SparklinePadding>
</SfSparkline>

@code {
    public int[] Data = new int[] { 3, 6, 4, 8, 5, 9, 7 };
}

Background and Fill

Control the colors of the sparkline using the Fill property for data series color, the Opacity property for transparency level, and the SparklineContainerArea component with the Background property for container background color.

Container Background

Set the background color of the sparkline container area using the SparklineContainerArea component with the Background property to define the container's background color:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{ 3, 6, 4, 1, 3, 2, 5 }" 
              Type="SparklineType.Area" 
              Height="200px" 
              Width="350px" 
              Fill="#B2CFFF" 
              LineWidth="1">
    <SparklineContainerArea Background="#EFF1F4">
        <SparklineContainerAreaBorder Color="#033E96" Width="2">
        </SparklineContainerAreaBorder>
    </SparklineContainerArea>
    <SparklineBorder Color="#033E96" Width="1">
    </SparklineBorder>
    <SparklinePadding Left="20" Right="20" Bottom="20" Top="20">
    </SparklinePadding>
</SfSparkline>

Chart Fill Color

The Fill property sets the color of the data series, with the optional Opacity property controlling the transparency level (0 for fully transparent, 1 for fully opaque).

Line Chart Fill

Set the Fill property color for line sparklines to control the color of the line in a Line type sparkline:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@LineData" 
              Type="SparklineType.Line" 
              Height="120px" 
              Width="350px"
              Fill="#2196F3"
              LineWidth="2">
</SfSparkline>

@code {
    public int[] LineData = new int[] { 3, 6, 4, 8, 5, 9, 7 };
}

Area Chart Fill

Set the Fill property color and the Opacity property for area sparklines to control the area color and transparency:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@AreaData" 
              Type="SparklineType.Area" 
              Height="120px" 
              Width="350px"
              Fill="#4CAF50"
              Opacity="0.6">
</SfSparkline>

@code {
    public int[] AreaData = new int[] { 3, 6, 4, 8, 5, 9, 7 };
}

Column Chart Fill

Set the Fill property for column sparkline bars to control the color of each column in a Column type sparkline:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@ColumnData" 
              Type="SparklineType.Column" 
              Height="120px" 
              Width="350px"
              Fill="#FF9800">
</SfSparkline>

@code {
    public int[] ColumnData = new int[] { 45, 58, 52, 68, 55, 72, 65 };
}

Background Color Combinations

Combine the Fill property for series color, the Opacity property for transparency, the LineWidth property for line thickness, and the SparklineContainerArea component with the Background property for contrast effects:

@using Syncfusion.Blazor.Charts

<div class="color-combinations">
    <!-- Light Background -->
    <SfSparkline DataSource="@Data" Height="100px" Width="280px"
                  Type="SparklineType.Area" Fill="#2196F3" Opacity="0.6">
        <SparklineContainerArea Background="#F5F5F5">
        </SparklineContainerArea>
    </SfSparkline>
    
    <!-- Dark Background -->
    <SfSparkline DataSource="@Data" Height="100px" Width="280px"
                  Type="SparklineType.Line" Fill="#FFC107" LineWidth="2">
        <SparklineContainerArea Background="#263238">
        </SparklineContainerArea>
    </SfSparkline>
    
    <!-- Colored Background -->
    <SfSparkline DataSource="@Data" Height="100px" Width="280px"
                  Type="SparklineType.Area" Fill="#FFFFFF" LineWidth="2">
        <SparklineContainerArea Background="#1976D2">
        </SparklineContainerArea>
        <SparklineBorder Color="#FFFFFF" Width="2">
        </SparklineBorder>
    </SfSparkline>
</div>

@code {
    public int[] Data = new int[] { 3, 6, 4, 8, 5, 9, 7 };
}

Line Width

Control the thickness of line-based sparklines using the LineWidth property with numeric values (1, 2, 3, etc.) to adjust the thickness of the sparkline line:

Line Width Variations

Demonstrate different LineWidth property values (1, 2, 4) with numeric values to show the visual differences in line thickness for line and area sparklines:

@using Syncfusion.Blazor.Charts

<div class="line-width-demo">
    <!-- Thin Line -->
    <div>
        <h5>LineWidth: 1</h5>
        <SfSparkline DataSource="@Data" 
                      Type="SparklineType.Line" 
                      Height="80px" 
                      Width="250px"
                      LineWidth="1"
                      Fill="#2196F3">
        </SfSparkline>
    </div>
    
    <!-- Medium Line -->
    <div>
        <h5>LineWidth: 2</h5>
        <SfSparkline DataSource="@Data" 
                      Type="SparklineType.Line" 
                      Height="80px" 
                      Width="250px"
                      LineWidth="2"
                      Fill="#2196F3">
        </SfSparkline>
    </div>
    
    <!-- Thick Line -->
    <div>
        <h5>LineWidth: 4</h5>
        <SfSparkline DataSource="@Data" 
                      Type="SparklineType.Line" 
                      Height="80px" 
                      Width="250px"
                      LineWidth="4"
                      Fill="#2196F3">
        </SfSparkline>
    </div>
</div>

@code {
    public int[] Data = new int[] { 3, 6, 4, 8, 5, 9, 7, 10, 8, 11 };
}

Line Width for Area Charts

Apply the LineWidth property to control line thickness and the SparklineBorder component with its Color and Width properties to area sparklines for enhanced visual definition:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@AreaChartData" 
              Type="SparklineType.Area" 
              Height="140px" 
              Width="400px"
              Fill="#E8F5E9"
              LineWidth="3"
              Opacity="0.6">
    <SparklineBorder Color="#4CAF50" Width="3">
    </SparklineBorder>
</SfSparkline>

@code {
    public double[] AreaChartData = new double[] 
    { 
        95.5, 98.2, 97.8, 102.3, 100.5, 104.7, 103.2 
    };
}

RTL Support

Enable right-to-left rendering for internationalization and localization using the EnableRtl property set to "true" to support Arabic, Hebrew, and other right-to-left languages.

Basic RTL Configuration

Configure RTL support using the EnableRtl property set to "true" along with optional properties like Format, Height, and Width:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new double[]{ 300.00, 600.00, 400.21, 100.20, 300.70, 200.04, 500.00 }" 
              Height="200px" 
              Width="350px" 
              Format="c2" 
              EnableRtl="true">
    <SparklineDataLabelSettings Visible="new List<VisibleType> { VisibleType.All }" 
                                EdgeLabelMode="EdgeLabelMode.Shift">
    </SparklineDataLabelSettings>
    <SparklinePadding Top="25">
    </SparklinePadding>
</SfSparkline>

RTL with Arabic Text

Support Arabic text and RTL layout using the EnableRtl property combined with HTML dir="rtl" attribute, and use the ValueType property to define the value type as Category:

@using Syncfusion.Blazor.Charts

<div dir="rtl">
    <h4>مخطط الأداء الشهري</h4>
    <SfSparkline DataSource="@MonthlyData" 
                  TValue="MonthData"
                  XName="MonthName"
                  YName="Value"
                  ValueType="SparklineValueType.Category"
                  Height="150px" 
                  Width="450px"
                  EnableRtl="true"
                  LineWidth="2">
        <SparklineTooltipSettings TValue="MonthData" 
                                  Visible="true" 
                                  Format="${MonthName}: ${Value}">
        </SparklineTooltipSettings>
    </SfSparkline>
</div>

@code {
    public class MonthData
    {
        public string MonthName { get; set; }
        public int Value { get; set; }
    }

    public List<MonthData> MonthlyData = new List<MonthData>
    {
        new MonthData { MonthName = "يناير", Value = 120 },
        new MonthData { MonthName = "فبراير", Value = 145 },
        new MonthData { MonthName = "مارس", Value = 132 },
        new MonthData { MonthName = "أبريل", Value = 168 }
    };
}

Container Area Styling

Comprehensive container styling for professional appearance using the SparklineContainerArea component with the Background property and the SparklineContainerAreaBorder component with Color and Width properties for complete visual customization.

Complete Container Customization

Apply complete customization to the container using the Fill property for data color, the LineWidth property for line thickness, the Opacity property for transparency, and the SparklineContainerArea component with the Background property, combined with the SparklineContainerAreaBorder component with Color and Width properties:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@ProfessionalData" 
              Type="SparklineType.Area" 
              Height="180px" 
              Width="450px"
              Fill="#42A5F5"
              LineWidth="2"
              Opacity="0.7">
    <SparklineContainerArea Background="#FAFAFA">
        <SparklineContainerAreaBorder Color="#1976D2" Width="2">
        </SparklineContainerAreaBorder>
    </SparklineContainerArea>
    <SparklineBorder Color="#1976D2" Width="2">
    </SparklineBorder>
    <SparklinePadding Top="20" Bottom="20" Left="20" Right="20">
    </SparklinePadding>
    <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.All }"
                             Size="5"
                             Fill="#FFFFFF">
        <SparklineMarkerBorder Color="#1976D2" Width="2">
        </SparklineMarkerBorder>
    </SparklineMarkerSettings>
</SfSparkline>

@code {
    public double[] ProfessionalData = new double[] 
    { 
        125.5, 148.2, 132.8, 165.3, 155.5, 178.7, 168.2 
    };
}

Complete Examples

Dashboard Card Design

Create a dashboard card design using the Type property set to SparklineType.Area, the Height and Width properties for sizing, the Fill property for color, the LineWidth property for line thickness, the SparklineBorder component with Color and Width properties, the SparklineContainerArea component with Background property, the SparklinePadding component with its spacing properties, and the SparklineMarkerSettings component with the Visible property:

@using Syncfusion.Blazor.Charts

<style>
    .metric-card {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 20px;
        margin: 10px;
    }
    
    .metric-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }
    
    .metric-title {
        font-size: 14px;
        color: #666;
        font-weight: 500;
    }
    
    .metric-value {
        font-size: 28px;
        font-weight: bold;
        color: #333;
    }
    
    .metric-change {
        font-size: 14px;
        color: #4CAF50;
    }
</style>

<div class="metric-card">
    <div class="metric-header">
        <div class="metric-title">Monthly Revenue</div>
    </div>
    <div class="metric-value">$458,230</div>
    <div class="metric-change">+12.5% from last month</div>
    <SfSparkline DataSource="@RevenueData" 
                  Type="SparklineType.Area" 
                  Height="80px" 
                  Width="100%"
                  Fill="#E8F5E9"
                  LineWidth="2">
        <SparklineBorder Color="#4CAF50" Width="2">
        </SparklineBorder>
        <SparklineContainerArea Background="transparent">
        </SparklineContainerArea>
        <SparklinePadding Top="10" Bottom="5" Left="0" Right="0">
        </SparklinePadding>
        <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.End }"
                                 Size="6"
                                 Fill="#4CAF50">
        </SparklineMarkerSettings>
    </SfSparkline>
</div>

@code {
    public double[] RevenueData = new double[] 
    { 
        385000, 412000, 398000, 445000, 428000, 458230 
    };
}

Bordered Panel Style

Create a bordered panel using the Type property for line charts, the Height and Width properties for sizing, the LineWidth property for thickness, the Fill property for color, the SparklineContainerArea component with Background property, the SparklineContainerAreaBorder component with Color and Width properties, the SparklinePadding component for spacing, the SparklineMarkerSettings component with Visible property, and the SparklineAxisSettings component for axis customization:

@using Syncfusion.Blazor.Charts

<div style="background: #f5f5f5; padding: 30px;">
    <h3 style="margin-bottom: 20px; color: #333;">Performance Metrics</h3>
    <SfSparkline DataSource="@PerformanceData" 
                  Type="SparklineType.Line" 
                  Height="180px" 
                  Width="600px"
                  LineWidth="3"
                  Fill="#FF5722">
        <SparklineContainerArea Background="#FFFFFF">
            <SparklineContainerAreaBorder Color="#E0E0E0" Width="1">
            </SparklineContainerAreaBorder>
        </SparklineContainerArea>
        <SparklinePadding Top="25" Bottom="25" Left="25" Right="25">
        </SparklinePadding>
        <SparklineMarkerSettings Visible="new List<VisibleType> 
                                          { 
                                              VisibleType.High, 
                                              VisibleType.Low 
                                          }"
                                 Size="8">
            <SparklineMarkerBorder Color="#FFFFFF" Width="2">
            </SparklineMarkerBorder>
        </SparklineMarkerSettings>
        <SparklineAxisSettings MinY="0" MaxY="100">
        </SparklineAxisSettings>
    </SfSparkline>
</div>

@code {
    public int[] PerformanceData = new int[] 
    { 
        65, 72, 68, 85, 78, 92, 88, 95, 87, 90 
    };
}

Minimalist Design

Create a minimalist design using the Type property for line charts, the Height and Width properties for compact sizing, the LineWidth property set to 1 for subtle lines, the Fill property for color, and the SparklineContainerArea component with Background property set to "transparent":

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@MinimalData" 
              Type="SparklineType.Line" 
              Height="60px" 
              Width="200px"
              LineWidth="1"
              Fill="#9E9E9E">
    <SparklineContainerArea Background="transparent">
    </SparklineContainerArea>
</SfSparkline>

@code {
    public int[] MinimalData = new int[] { 3, 6, 4, 8, 5, 9, 7 };
}

Best Practices

Sizing Guidelines

Small Sparklines (Inline):

• Width: 100-200px
• Height: 40-60px
• Use: Table cells, inline metrics

Medium Sparklines (Cards):

• Width: 250-400px
• Height: 80-120px
• Use: Dashboard cards, metric panels

Large Sparklines (Features):

• Width: 450-600px
• Height: 150-200px
• Use: Hero sections, detailed charts

Padding Recommendations

Apply padding recommendations based on component configuration using the SparklinePadding component with Top, Bottom, Left, and Right properties to accommodate data labels, markers, and minimal designs:

@using Syncfusion.Blazor.Charts

<!-- With Data Labels -->
<SfSparkline DataSource="@Data" Height="150px" Width="400px">
    <SparklineDataLabelSettings Visible="new List<VisibleType> { VisibleType.All }">
    </SparklineDataLabelSettings>
    <SparklinePadding Top="35" Bottom="15" Left="10" Right="10">
    </SparklinePadding>
</SfSparkline>

<!-- With Markers Only -->
<SfSparkline DataSource="@Data" Height="150px" Width="400px">
    <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.All }">
    </SparklineMarkerSettings>
    <SparklinePadding Top="15" Bottom="15" Left="10" Right="10">
    </SparklinePadding>
</SfSparkline>

<!-- Minimal -->
<SfSparkline DataSource="@Data" Height="80px" Width="200px">
    <SparklinePadding Top="5" Bottom="5" Left="5" Right="5">
    </SparklinePadding>
</SfSparkline>

Line Width Selection

Color Contrast

Achieve proper color contrast using the Fill property for the sparkline color and the SparklineContainerArea component with the Background property for the container color, following these guidelines:

Background vs Fill:

• Light background → Dark or vibrant fill
• Dark background → Light or bright fill
• Colored background → White or contrasting fill

@using Syncfusion.Blazor.Charts
<!-- Good Contrast Examples -->

<!-- Light on Dark -->
<SfSparkline DataSource="@Data" Height="100px" Width="300px"
              Fill="#FFFFFF" LineWidth="2">
    <SparklineContainerArea Background="#263238">
    </SparklineContainerArea>
</SfSparkline>

<!-- Dark on Light -->
<SfSparkline DataSource="@Data" Height="100px" Width="300px"
              Fill="#1976D2" LineWidth="2">
    <SparklineContainerArea Background="#FAFAFA">
    </SparklineContainerArea>
</SfSparkline>

<!-- Vibrant on Neutral -->
<SfSparkline DataSource="@Data" Height="100px" Width="300px"
              Fill="#FF5722" LineWidth="2">
    <SparklineContainerArea Background="#F5F5F5">
    </SparklineContainerArea>
</SfSparkline>

Responsive Considerations

Create responsive designs using the Width property set to "100%" for fluid sizing and media queries to adjust the Height property based on screen size:

<!-- Desktop -->
@using Syncfusion.Blazor.Charts

<div class="sparkline-wrapper">
    <SfSparkline DataSource="@Data"
                 Width="100%"
                 Height="100%">
    </SfSparkline>
</div>

@code {
    private List<double> Data = new()
    {
        10, 25, 15, 30, 20, 35, 28
    };
}

<style>
@@media (min-width: 768px) {
    .sparkline-wrapper {
        width: 400px;
        height: 120px;
    }
}

@@media (min-width: 480px) and (max-width: 767px) {
    .sparkline-wrapper {
        width: 100%;
        height: 100px;
    }
}

@@media (max-width: 479px) {
    .sparkline-wrapper {
        width: 100%;
        height: 80px;
    }
}
</style>

Accessibility

• Ensure sufficient color contrast using the Fill property and SparklineContainerArea with Background property (WCAG AA: 4.5:1)
• Use the SparklineContainerAreaBorder component with Color and Width properties to improve definition
• Add the SparklinePadding component with Top, Bottom, Left, and Right properties for better touch targets
• Provide alternative text descriptions through proper semantic HTML structure

Proper dimensions and appearance styling using the `Width`, `Height`, `SparklinePadding`, `SparklineContainerAreaBorder`, `Fill`, `Opacity`, and `LineWidth` properties create professional, accessible, and visually appealing Sparkline charts that enhance data communication and user experience.

Getting Started with Sparkline Charts

Table of Contents

• Installation
• NuGet Package
• Prerequisites
• Configuration
• Step 1: Import Namespaces
• Step 2: Register Services
• Step 3: Add Script Reference
• Step 4: Add Theme Stylesheet (Optional)
• Basic Implementation
• Minimal Sparkline
• Sparkline with Object Data
• First Complete Example
• Common Setup Issues
• WebAssembly vs Server Considerations
• Next Steps
• Quick Reference

This guide covers the essential steps to install and implement Syncfusion Blazor Sparkline Charts in your application.

Installation

NuGet Package

Install the Syncfusion.Blazor.Sparkline NuGet package:

Visual Studio Package Manager:

Install-Package Syncfusion.Blazor.Sparkline

.NET CLI:

dotnet add package Syncfusion.Blazor.Sparkline
dotnet restore

Prerequisites

• .NET SDK (latest version recommended)
• Blazor WebAssembly or Server project
• Visual Studio, VS Code, or any preferred IDE

Configuration

Step 1: Import Namespaces

Add the required namespaces to _Imports.razor:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts

Step 2: Register Services

Register Syncfusion Blazor services in Program.cs:

Blazor WebAssembly:

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { 
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) 
});

// Register Syncfusion Blazor service
builder.Services.AddSyncfusionBlazor();

await builder.Build().RunAsync();

Blazor Server:

using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

// Register Syncfusion Blazor service
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();
// ... rest of configuration

Step 3: Add Script Reference

Add the Syncfusion script in the <head> section of index.html (WebAssembly) or _Host.cshtml (Server):

<head>
    <!-- ... other head content ... -->
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

Step 4: Add Theme Stylesheet (Optional)

Include a Syncfusion theme for styled components:

<head>
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

Available themes: bootstrap5, material, fabric, tailwind, fluent, highcontrast

Basic Implementation

Minimal Sparkline

The simplest sparkline with just data:

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

<h3>Basic Sparkline</h3>

<SfSparkline DataSource="@SimpleData" Height="50px" Width="200px">
</SfSparkline>

@code {
    public double[] SimpleData = new double[] { 3, 6, 4, 1, 3, 2, 5 };
}

Result: A line sparkline showing the data trend.

Sparkline with Object Data

Using custom objects with field mapping:

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

<h3>Monthly Sales Sparkline</h3>

<SfSparkline DataSource="@SalesData" 
              XName="Month" 
              YName="Sales"
              ValueType="SparklineValueType.Category"
              TValue="SalesInfo"
              Height="60px" 
              Width="250px">
</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 }
    };
}

Key Properties:

• DataSource - Your data collection
• XName - Field name for X-axis values
• YName - Field name for Y-axis values
• ValueType - Data type: Numeric (default) or Category
• TValue - Generic type of your data model

First Complete Example

A fully-configured sparkline with common features:

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

<div class="sparkline-container">
    <h4>Temperature Trend (Last 12 Months)</h4>
    
    <SfSparkline DataSource="@TemperatureData"
                 TValue="WeatherReport"
                 XName="Month"
                 YName="Celsius"
                 ValueType="SparklineValueType.Category"
                 Type="SparklineType.Line"
                 Height="80px"
                 Width="300px"
                 Fill="#2196F3"
                 LineWidth="2">
        
        <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.All }" 
                                 Size="5" 
                                 Fill="#ffffff"
                                 Border="new SparklineMarkerBorder { Color = \"#2196F3\", Width = 2 }">
        </SparklineMarkerSettings>
        
        <SparklineDataLabelSettings Visible="new List<VisibleType> { VisibleType.Start, VisibleType.End }">
        </SparklineDataLabelSettings>
        
        <SparklineTooltipSettings TValue="WeatherReport" 
                                  Visible="true"
                                  Format="${Month}: ${Celsius}°C">
        </SparklineTooltipSettings>
        
        <SparklinePadding Left="10" Right="10" Top="10" Bottom="10"></SparklinePadding>
        
    </SfSparkline>
</div>

@code {
    public class WeatherReport
    {
        public string Month { get; set; }
        public double Celsius { get; set; }
    }

    public List<WeatherReport> TemperatureData = new List<WeatherReport>
    {
        new WeatherReport { Month = "Jan", Celsius = 34 },
        new WeatherReport { Month = "Feb", Celsius = 36 },
        new WeatherReport { Month = "Mar", Celsius = 32 },
        new WeatherReport { Month = "Apr", Celsius = 35 },
        new WeatherReport { Month = "May", Celsius = 40 },
        new WeatherReport { Month = "Jun", Celsius = 38 },
        new WeatherReport { Month = "Jul", Celsius = 33 },
        new WeatherReport { Month = "Aug", Celsius = 37 },
        new WeatherReport { Month = "Sep", Celsius = 34 },
        new WeatherReport { Month = "Oct", Celsius = 31 },
        new WeatherReport { Month = "Nov", Celsius = 30 },
        new WeatherReport { Month = "Dec", Celsius = 29 }
    };
}

This example includes:

• Data binding with custom objects
• Markers on all data points
• Data labels on start and end points
• Tooltips with custom format
• Padding for visual spacing
• Custom colors and line width

Common Setup Issues

Issue: Component Not Rendering

Symptoms: Empty space where sparkline should appear, no errors

Solutions: 1. Verify AddSyncfusionBlazor() is registered in Program.cs 2. Check script reference in index.html/_Host.cshtml 3. Ensure namespaces are imported in _Imports.razor 4. Verify DataSource is not null or empty

Issue: "Type or namespace name 'Syncfusion' could not be found"

Symptoms: Build errors, red squiggles in IDE

Solutions: 1. Verify NuGet package is installed: Syncfusion.Blazor.Sparkline 2. Run dotnet restore or rebuild solution 3. Check package version compatibility with your .NET version 4. Clear NuGet cache: dotnet nuget locals all --clear

Issue: Data Not Displaying

Symptoms: Sparkline renders but shows no data

Solutions: 1. Ensure XName and YName match your data model property names (case-sensitive) 2. Set ValueType to Category if X-axis is string-based 3. Provide TValue generic type when using objects 4. Check data source has valid values (not all zeros or nulls)

Issue: Script Load Errors

Symptoms: Console errors about "Syncfusion is not defined"

Solutions: 1. Verify script path: _content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js 2. Check script is in <head> section, not <body> 3. Ensure Syncfusion.Blazor.Core package is installed 4. Clear browser cache and rebuild

WebAssembly vs Server Considerations

Blazor WebAssembly

Characteristics:

• Runs entirely in browser
• Initial load includes all assemblies
• No server connection after load

Best practices:

• Keep data sources reasonable size (<1000 points)
• Use async data loading for large datasets
• Consider data aggregation for performance

Blazor Server

Characteristics:

• Maintains SignalR connection to server
• Smaller initial payload
• Real-time data updates easier

Best practices:

• Leverage server-side data processing
• Use StateHasChanged() for dynamic updates
• Handle connection interruptions gracefully

Next Steps

After basic setup, explore these features:

1. Chart Types: references/chart-types.md - Line, Area, Column, WinLoss, Pie 2. Markers & Labels: references/markers-and-data-labels.md - Visual data indicators 3. Tooltips: references/user-interaction-and-events.md - Interactive hover details 4. Styling: references/dimensions-and-appearance.md - Colors, sizes, borders

Quick Reference

Essential Props:

<SfSparkline DataSource="@data"          @* Required: Your data *@
              TValue="YourType"           @* Required for objects *@
              XName="PropName"            @* X-axis field *@
              YName="PropName"            @* Y-axis field *@
              ValueType="Category"        @* If X is string *@
              Type="Line"                 @* Chart type *@
              Height="50px"               @* Height *@
              Width="200px">              @* Width *@
</SfSparkline>

Common Value Types:

• SparklineValueType.Numeric (default)
• SparklineValueType.Category
• SparklineValueType.DateTime

You're now ready to implement sparklines in your Blazor application!

Globalization and Accessibility

Table of Contents

• Globalization Overview
• Number and Currency Formatting
• Date and Time Formatting
• Right-to-Left (RTL) Support
• Accessibility Overview
• WCAG Compliance
• Keyboard Navigation
• Screen Reader Support
• ARIA Attributes
• Color Contrast

Globalization Overview

Globalization enables sparklines to adapt to different cultures, languages, and regions through localized number, currency, and date formatting.

Number and Currency Formatting

Currency Formatting

Display values in currency format with culture-specific symbols:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@RevenueData" 
              Height="60px" 
              Width="250px"
              Format="C">
    <SparklineTooltipSettings TValue="double" Visible="true">
    </SparklineTooltipSettings>
</SfSparkline>

@code {
    public double[] RevenueData = new double[] { 300.00, 600.00, 400.21, 100.20, 300.70, 200.04, 500.00 };
}

Result: Displays "$300.00", "$600.00", etc. (based on current culture)

Custom Currency Format

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@SalesData" 
              Height="60px" 
              Width="250px"
              Format="C2">
    <SparklineDataLabelSettings Visible="new List<VisibleType> { VisibleType.Start, VisibleType.End }">
    </SparklineDataLabelSettings>
    <SparklineTooltipSettings TValue="double" Visible="true">
    </SparklineTooltipSettings>
</SfSparkline>

@code {
    public double[] SalesData = new double[] { 45000.5, 52000.75, 48000.25, 55000.00 };
}

Format codes:

• C or C2 - Currency with 2 decimal places
• C0 - Currency without decimals
• C3 - Currency with 3 decimal places

Number Formatting with Grouping

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@LargeNumbers" 
              Height="60px" 
              Width="300px"
              Format="N0"
              EnableGroupingSeparator="true">
    <SparklineTooltipSettings TValue="int" Visible="true">
    </SparklineTooltipSettings>
</SfSparkline>

@code {
    public int[] LargeNumbers = new int[] { 30000, 60000, 40000, 10000, 30000, 20000, 50000 };
}

Result: Displays "30,000", "60,000", etc.

Format codes:

• N or N2 - Number with 2 decimal places and grouping
• N0 - Integer with grouping separator
• P - Percentage format
• P0 - Percentage without decimals

Percentage Formatting

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@PercentageData" 
              Height="60px" 
              Width="250px"
              Format="P1">
    <SparklineTooltipSettings TValue="double" Visible="true">
    </SparklineTooltipSettings>
</SfSparkline>

@code {
    public double[] PercentageData = new double[] { 0.15, 0.28, 0.22, 0.35, 0.30 };
}

Result: Displays "15.0%", "28.0%", etc.

Date and Time Formatting

DateTime Value Formatting

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@TimeSeriesData" 
              TValue="TimeData"
              XName="Date" 
              YName="Value"
              ValueType="SparklineValueType.DateTime"
              Height="60px" 
              Width="350px">
    <SparklineTooltipSettings TValue="TimeData" 
                              Visible="true"
                              Format="${Date:MMM dd, yyyy}: ${Value}">
    </SparklineTooltipSettings>
</SfSparkline>

@code {
    public class TimeData
    {
        public DateTime Date { get; set; }
        public double Value { get; set; }
    }

    public List<TimeData> TimeSeriesData = new List<TimeData>
    {
        new TimeData { Date = new DateTime(2026, 1, 1), Value = 145 },
        new TimeData { Date = new DateTime(2026, 2, 1), Value = 162 },
        new TimeData { Date = new DateTime(2026, 3, 1), Value = 178 }
    };
}

Date format codes:

• MMM dd, yyyy - "Jan 01, 2026"
• MM/dd/yyyy - "01/01/2026"
• yyyy-MM-dd - "2026-01-01"
• dd MMM - "01 Jan"

Culture-Specific Formatting

Configure culture in Program.cs:

using System.Globalization;
using Microsoft.AspNetCore.Localization;

var builder = WebApplication.CreateBuilder(args);

// Configure localization
builder.Services.Configure<RequestLocalizationOptions>(options =>
{
    var supportedCultures = new[]
    {
        new CultureInfo("en-US"),
        new CultureInfo("de-DE"),
        new CultureInfo("fr-FR"),
        new CultureInfo("ja-JP")
    };
    
    options.DefaultRequestCulture = new RequestCulture("en-US");
    options.SupportedCultures = supportedCultures;
    options.SupportedUICultures = supportedCultures;
});

builder.Services.AddSyncfusionBlazor();

var app = builder.Build();
app.UseRequestLocalization();

Culture-specific examples:

• de-DE: "1.234,56 €" (German)
• en-US: "$1,234.56" (US)
• fr-FR: "1 234,56 €" (French)
• ja-JP: "¥1,234" (Japanese)

Right-to-Left (RTL) Support

Enable RTL

For right-to-left languages (Arabic, Hebrew, etc.):

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@SalesData" 
              EnableRtl="true"
              Height="60px" 
              Width="300px"
              Format="C2">
    <SparklineDataLabelSettings Visible="new List<VisibleType> { VisibleType.All }" 
                                EdgeLabelMode="EdgeLabelMode.Shift">
    </SparklineDataLabelSettings>
    <SparklinePadding Top="25" Left="10" Right="10"></SparklinePadding>
</SfSparkline>

@code {
    public double[] SalesData = new double[] { 300.00, 600.00, 400.21, 100.20, 300.70, 200.04, 500.00 };
}

RTL Effects:

• Sparkline renders right-to-left
• Data labels positioned for RTL reading
• Tooltip text aligned right

RTL with Arabic Numerals

@using System.Globalization
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@Data" 
              EnableRtl="true"
              Height="60px" 
              Width="300px">
    <SparklineTooltipSettings TValue="double" Visible="true">
    </SparklineTooltipSettings>
</SfSparkline>

@code {
    public double[] Data = new double[] { 50, 75, 60, 90, 80 };
    
    protected override void OnInitialized()
    {
        CultureInfo.CurrentCulture = new CultureInfo("ar-SA");
        CultureInfo.CurrentUICulture = new CultureInfo("ar-SA");
    }
}

Accessibility Overview

Syncfusion Blazor Sparkline meets international accessibility standards:

Compliance:

• ✅ WCAG 2.2 Level AA
• ✅ Section 508
• ✅ ADA compliance
• ✅ Screen reader support
• ✅ Keyboard navigation
• ✅ Color contrast requirements
• ✅ Mobile device support

WCAG Compliance

Color Contrast

Ensure sufficient contrast between sparkline and background:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@Data" 
              Fill="#0066cc"
              LineWidth="2"
              Height="60px" 
              Width="250px">
    <SparklineContainerArea>
        <SparklineContainerAreaBackground Color="#ffffff"></SparklineContainerAreaBackground>
    </SparklineContainerArea>
</SfSparkline>

@code {
    public int[] Data = new int[] { 3, 6, 4, 1, 3, 2, 5 };
}

WCAG AA Requirements:

• Normal text: 4.5:1 contrast ratio
• Large text: 3:1 contrast ratio
• Non-text elements: 3:1 contrast ratio

Recommended combinations:

• Dark blue (#0066cc) on white
• Dark green (#2e7d32) on white
• Black/dark gray (#333) on white
• White on dark blue (#003d82)

High Contrast Mode

Support users with high contrast preferences:

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="@Data" 
              Fill="#000000"
              LineWidth="3"
              Height="60px" 
              Width="250px">
    <SparklineContainerArea>
        <SparklineContainerAreaBackground Color="#ffffff"></SparklineContainerAreaBackground>
        <SparklineContainerAreaBorder Color="#000000" Width="2"></SparklineContainerAreaBorder>
    </SparklineContainerArea>
</SfSparkline>

@code {
    public int[] Data = new int[] { 3, 6, 4, 1, 3, 2, 5 };
}

Keyboard Navigation

Sparkline supports full keyboard accessibility:

Keyboard Shortcuts

Enable Keyboard Navigation

Ensure sparkline is focusable:

@using Syncfusion.Blazor.Charts

<SfSparkline @ref="sparklineRef"
              DataSource="@Data" 
              Height="60px" 
              Width="250px"
              >
    <SparklineTooltipSettings TValue="int" Visible="true">
    </SparklineTooltipSettings>
</SfSparkline>

@code {
    private SfSparkline<int> sparklineRef;
    public int[] Data = new int[] { 3, 6, 4, 1, 3, 2, 5 };
}

Screen Reader Support

ARIA Labels

Provide meaningful descriptions for screen readers:

@using Syncfusion.Blazor.Charts

<div role="region" aria-label="Monthly Sales Trend Chart">
    <SfSparkline DataSource="@SalesData" 
                  Height="60px" 
                  Width="300px">
        <SparklineTooltipSettings TValue="int" Visible="true" Format="Sales: ${y}">
        </SparklineTooltipSettings>
    </SfSparkline>
</div>

@code {
    public int[] SalesData = new int[] { 45, 52, 48, 55, 60, 58, 65 };
}

Descriptive Context

Add text alternatives for screen reader users:

@using Syncfusion.Blazor.Charts

<div class="sparkline-container">
    <h4 id="sparkline-title">Revenue Trend Q1 2026</h4>
    <p class="sr-only">Line chart showing revenue increasing from $45K to $65K over 7 months</p>
    
    <SfSparkline DataSource="@RevenueData" 
                  Height="60px" 
                  Width="300px">
    </SfSparkline>
</div>

<style>
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }
</style>

@code {
    public int[] RevenueData = new int[] { 45, 52, 48, 55, 60, 58, 65 };
}

ARIA Attributes

Sparkline uses these ARIA attributes automatically:

Role Attributes:

• role="img" - Identifies sparkline as an image
• role="region" - Marks sparkline container as a landmark

ARIA Properties:

• aria-label - Provides text description
• aria-hidden - Hides decorative elements from screen readers
• aria-pressed - Indicates toggle state for interactive features

Color Contrast

Verify Contrast Ratios

Tools for checking:

• WebAIM Contrast Checker
• Chrome DevTools Lighthouse
• axe DevTools browser extension

Accessible Color Palettes

Safe combinations:

@using Syncfusion.Blazor.Charts

<!-- High contrast: Dark on light -->
<SfSparkline DataSource="@Data" Fill="#003d82" LineWidth="2"></SfSparkline>

<!-- High contrast: Light on dark -->
<SfSparkline DataSource="@Data" Fill="#ffffff" LineWidth="2">
    <SparklineContainerArea Background="#1a1a1a">
    </SparklineContainerArea>
</SfSparkline>

<!-- Accessible brand colors -->
<SfSparkline DataSource="@Data" Fill="#0077b6" LineWidth="2"></SfSparkline>
@code {
    private SfSparkline<int> sparklineRef;
    public int[] Data = new int[] { 3, 6, 4, 1, 3, 2, 5 };
}

Multiple Sparklines with Contrast

@using Syncfusion.Blazor.Charts

<div class="dashboard" style="background-color: #f5f5f5;">
    <SfSparkline DataSource="@Data1" Fill="#0066cc" LineWidth="2" Height="50px" Width="150px">
    </SfSparkline>
    
    <SfSparkline DataSource="@Data2" Fill="#2e7d32" LineWidth="2" Height="50px" Width="150px">
    </SfSparkline>
    
    <SfSparkline DataSource="@Data3" Fill="#d32f2f" LineWidth="2" Height="50px" Width="150px">
    </SfSparkline>
</div>

@code {
    public int[] Data1 = { 3, 6, 4, 1, 3, 2, 5 };
    public int[] Data2 = { 2, 4, 6, 8, 6, 4, 2 };
    public int[] Data3 = { 5, 3, 4, 6, 2, 1, 3 };
}

All colors meet WCAG AA standards against #f5f5f5 background.

Complete Accessible Example

@using Syncfusion.Blazor.Charts

<div role="region" 
     aria-label="Quarterly Performance Dashboard" 
     class="accessible-sparkline-container">
    
    <div class="metric-card">
        <h3 id="revenue-title">Revenue Trend</h3>
        <p class="sr-only">Line chart showing quarterly revenue from Q1 to Q4 2026, ranging from $250K to $380K</p>
        
        <SfSparkline DataSource="@RevenueData" 
                      TValue="QuarterData"
                      XName="Quarter"
                      YName="Amount"
                      ValueType="SparklineValueType.Category"
                      Type="SparklineType.Area"
                      Height="60px" 
                      Width="250px"
                      Fill="#0066cc"
                      Opacity="0.6"
                      EnableRtl="false"
                      Format="C0"
                     EnableGroupingSeparator="true">
            
            <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.All }" 
                                     Size="5"
                                     Fill="#ffffff">
                <SparklineMarkerBorder Color="#0066cc" Width="2" />
            </SparklineMarkerSettings>
            <SparklineTooltipSettings TValue="QuarterData" 
                                      Visible="true"
                                      Format="${Quarter}: ${Amount:C0}">
            </SparklineTooltipSettings>
            
            <SparklineContainerArea Background="#ffffff">
                <SparklineContainerAreaBorder Color="#d0d0d0" Width="1"></SparklineContainerAreaBorder>
            </SparklineContainerArea>
            
            <SparklinePadding Top="10" Right="10" Bottom="10" Left="10"></SparklinePadding>
        </SfSparkline>
        
        <p class="metric-summary">
            <strong>$380K</strong> in Q4 2026 
            <span class="change positive" aria-label="15% increase">+15%</span>
        </p>
    </div>
</div>

<style>
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }
    
    .metric-card {
        border: 1px solid #d0d0d0;
        border-radius: 4px;
        padding: 16px;
        background: #ffffff;
    }
    
    .metric-summary {
        margin-top: 12px;
        font-size: 14px;
    }
    
    .change {
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 12px;
        font-weight: bold;
    }
    
    .change.positive {
        background-color: #e8f5e9;
        color: #2e7d32;
    }
</style>

@code {
    public class QuarterData
    {
        public string Quarter { get; set; }
        public double Amount { get; set; }
    }

    public List<QuarterData> RevenueData = new List<QuarterData>
    {
        new QuarterData { Quarter = "Q1", Amount = 250000 },
        new QuarterData { Quarter = "Q2", Amount = 320000 },
        new QuarterData { Quarter = "Q3", Amount = 290000 },
        new QuarterData { Quarter = "Q4", Amount = 380000 }
    };
}

This example demonstrates:

• ✅ ARIA labels and roles
• ✅ Screen reader-friendly descriptions
• ✅ High contrast colors (WCAG AA compliant)
• ✅ Keyboard navigation support
• ✅ Semantic HTML structure
• ✅ Currency formatting with grouping separators
• ✅ Visible focus indicators
• ✅ Clear visual hierarchy

Best Practices

Accessibility Checklist

• [ ] Add aria-label or aria-labelledby to sparklines
• [ ] Provide text alternatives for screen readers
• [ ] Ensure color contrast meets WCAG AA (4.5:1)
• [ ] Test keyboard navigation (Tab, Arrow keys, Esc)
• [ ] Enable tooltips for detailed information
• [ ] Use semantic HTML structure
• [ ] Test with screen readers (NVDA, JAWS, VoiceOver)
• [ ] Support high contrast modes
• [ ] Provide context with headings and labels
• [ ] Test on mobile devices

Globalization Checklist

• [ ] Use Format property for number/currency/date formatting
• [ ] Set appropriate culture in Program.cs
• [ ] Enable UseGroupingSeparator for large numbers
• [ ] Set EnableRtl="true" for RTL languages
• [ ] Test with multiple cultures (en-US, de-DE, ar-SA, ja-JP)
• [ ] Verify date formats match culture expectations
• [ ] Check decimal separators and grouping
• [ ] Test currency symbols display correctly

Accessibility and globalization ensure sparklines work for all users worldwide.