👁 Image
Syncfusion.Blazor.Sparkline 33.2.13

Syncfusion® Blazor Sparkline Charts

The Syncfusion Blazor Sparkline Component displays lightweight, single-series data visualizations in a compact cell or inline format. Perfect for dashboards and data summaries, sparklines show trends at a glance without axis labels or legends.

Key features

• Multiple Sparkline Types - Supports five sparkline types—line, area, column, win‑loss, and pie—to visualize trends in minimal space.
• Compact Inline Visualization - Designed to display data trends inside small cells, tables, dashboards, and tight UI layouts without requiring a full chart.
• Extensive Customization - Customize markers (first, last, high, low, negative), data labels, range bands, axis styles, colors, backgrounds, and borders for fine‑tuned visual output.
• Interactive Tooltips & Track Lines - Provide detailed insights with hover/tap tooltips and optional track lines for precise data identification.
• Axis Configuration Options - Configure numeric, category, or date axes with adjustable min/max values, custom styling, and positioning.
• Responsive Design - Automatically adapts to container size and works smoothly across desktops, tablets, and mobile devices.
• Globalization & Localization - Automatically formats numbers, dates, and times based on culture settings, with full right‑to‑left (RTL) language support.
• Accessibility Support - Compliant with accessibility standards, including keyboard navigation and screen reader support using WAI‑ARIA.
• Dashboard‑Ready - Ideal for KPIs, summaries, and trend snapshots where space is limited but insights matter.
• Blazor Server & WebAssembly Compatible - Fully supported in both hosting models and easy to integrate into any Blazor application.

Add script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor file.
• For Blazor WebAssembly App, add these to wwwroot/index.html file.

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

Quick start

1. Register the Syncfusion® Blazor services in the Program.cs file.

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add Blazor Sparkline component to your Razor page.

@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="ClimateData"
 TValue="WeatherReport"
 XName="Month"
 YName="Celsius"
 ValueType="SparklineValueType.Category"
 Type="SparklineType.Area"
 Height="80px"
 Width="150px">
 <SparklineDataLabelSettings Visible="new List<VisibleType> { VisibleType.Start, VisibleType.End }"></SparklineDataLabelSettings>
 <SparklinePadding Left="10" Right="10"></SparklinePadding>
 <SparklineTooltipSettings TValue="WeatherReport" Visible="true"></SparklineTooltipSettings>
</SfSparkline>

@code {
 public class WeatherReport
 {
 public string Month { get; set; }
 public double Celsius { get; set; }
 };
 public List<WeatherReport> ClimateData = 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}
 };
}

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• API Reference
• Live Demos
• Video Tutorials

Support

• Support portal
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a 30-day free trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

• Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

| Toll Free: 1-888-9-DOTNET