syncfusion-angular-sparkline

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Sparkline Component

实现Syncfusion Angular Sparkline组件

When to Use This Skill

何时使用此技能

Use this skill when you need to:

Visualize compact data - Display small time-series datasets inline within tables, grids, or dashboards
Add sparkline charts - Render Line, Column, Area, Pie, or Win-Loss sparklines
Enhance data presentation - Add markers for key points (high, low, start, end, negative)
Display metrics inline - Show data labels and tooltips within sparklines
Customize appearance - Apply themes, styling, accessibility features, or range bands
Integrate into existing apps - Set up the Sparkline module with proper service injection
Migrate from legacy - Move from EJ1 Sparkline to EJ2 Angular Sparkline

当你需要以下操作时，可使用此技能：

可视化紧凑型数据 - 在表格、网格或仪表板内联显示小型时间序列数据集
添加迷你折线图 - 渲染Line、Column、Area、Pie或Win-Loss类型的迷你折线图
增强数据展示效果 - 为关键点（最高点、最低点、起点、终点、负值点）添加标记
内联显示指标 - 在迷你折线图内显示数据标签和工具提示
自定义外观 - 应用主题、样式、无障碍功能或范围带
集成到现有应用 - 通过正确的服务注入设置Sparkline模块
从旧版本迁移 - 从EJ1 Sparkline迁移到EJ2 Angular Sparkline

Component Overview

组件概述

The Syncfusion Angular Sparkline is a lightweight data visualization component that displays compact charts in a small space. Sparklines are ideal for:

Trend indicators within tables or dashboards
Visual representation of sequential data
Inline metrics showing performance or changes over time

Key characteristics:

Compact rendering - Fits within grid cells or inline metrics
Multiple types - Line, Column, Area, Pie, Win-Loss visualizations
Interactive features - Tooltips, markers, data labels
Customizable - Markers, colors, axis settings, themes
Accessible - WCAG support, keyboard navigation, RTL support

⚠️ CRITICAL: Multiple Sparklines Require Unique IDs
When using more than one sparkline component on the same page, you MUST provide a unique
id
attribute to each sparkline to ensure proper rendering.
html

<ejs-sparkline id="sparkline1" [dataSource]="data1"></ejs-sparkline>
<ejs-sparkline id="sparkline2" [dataSource]="data2"></ejs-sparkline>
<ejs-sparkline id="sparkline3" [dataSource]="data3"></ejs-sparkline>


<ejs-sparkline [dataSource]="data1"></ejs-sparkline>
<ejs-sparkline [dataSource]="data2"></ejs-sparkline>
Without unique IDs, sparklines may:

Not render at all

Render with incorrect data

Overlap or conflict with each other

Display inconsistent styles

Syncfusion Angular Sparkline是一款轻量级数据可视化组件，可在狭小空间内显示紧凑型图表。迷你折线图适用于：

表格或仪表板内的趋势指示器
序列数据的可视化表示
内联展示性能或随时间变化的指标

核心特性：

紧凑型渲染 - 可嵌入网格单元格或内联指标中
多种类型 - Line、Column、Area、Pie、Win-Loss可视化类型
交互功能 - 工具提示、标记、数据标签
可自定义 - 标记、颜色、轴设置、主题
无障碍支持 - 符合WCAG标准、键盘导航、RTL支持

⚠️ 重要提示：多个迷你折线图需设置唯一ID
当在同一页面使用多个迷你折线图组件时，必须为每个组件提供唯一的
id
属性，以确保正确渲染。
html

<ejs-sparkline id="sparkline1" [dataSource]="data1"></ejs-sparkline>
<ejs-sparkline id="sparkline2" [dataSource]="data2"></ejs-sparkline>
<ejs-sparkline id="sparkline3" [dataSource]="data3"></ejs-sparkline>


<ejs-sparkline [dataSource]="data1"></ejs-sparkline>
<ejs-sparkline [dataSource]="data2"></ejs-sparkline>
若不设置唯一ID，迷你折线图可能会：

完全无法渲染

渲染错误的数据

互相重叠或冲突

显示不一致的样式

Documentation and Navigation Guide

文档与导航指南

This skill guides you through implementing sparklines. Here are the key topics:

本技能将指导你实现迷你折线图。以下是核心主题：

Getting Started

入门指南

📄 Read: references/getting-started.md

Installation and package setup for Angular 19+
Basic sparkline component implementation
Module injection for SparklineTooltipService
Data binding with dataSource, xName, and yName
Enabling tooltips and running the application
When to read: Before implementing your first sparkline

📄 阅读： references/getting-started.md

Angular 19+的安装与包配置
基础迷你折线图组件实现
SparklineTooltipService的模块注入
使用dataSource、xName和yName进行数据绑定
启用工具提示并运行应用
阅读时机：在实现第一个迷你折线图之前

Sparkline Types

迷你折线图类型

📄 Read: references/sparkline-types.md

Line type (default, line chart visualization)
Column type (vertical bar representation)
Area type (filled area charts)
Pie type (proportional/compositional data)
Win-Loss type (binary outcomes: success/failure)
Type comparison and selection criteria
When to read: Choose which sparkline type best represents your data

📄 阅读： references/sparkline-types.md

Line类型（默认，折线图可视化）
Column类型（垂直条形图表示）
Area类型（填充区域图表）
Pie类型（比例/组成数据）
Win-Loss类型（二元结果：成功/失败）
类型对比与选择标准
阅读时机：选择最适合你数据的迷你折线图类型时

Markers

标记

📄 Read: references/markers.md

Enabling markers for all points or specific points
Marker options: All, Start, End, High, Low, Negative
Customizing marker appearance (fill, border, size, opacity)
Combining multiple marker types
When to read: Highlight key data points (peaks, valleys, start/end)

📄 阅读： references/markers.md

为所有点或特定点启用标记
标记选项：All、Start、End、High、Low、Negative
自定义标记外观（填充色、边框、大小、透明度）
组合多种标记类型
阅读时机：需要突出显示关键数据点（峰值、谷值、起点/终点）时

Data Labels

数据标签

📄 Read: references/data-labels.md

Enabling data labels for specific points
Label options: All, Start, End, High, Low, Negative
Customizing label styling (fill, border, text color)
Formatting label text with custom formats
Displaying x and y values in labels
When to read: Add numeric or formatted values directly on the sparkline

📄 阅读： references/data-labels.md

为特定点启用数据标签
标签选项：All、Start、End、High、Low、Negative
自定义标签样式（填充色、边框、文字颜色）
使用自定义格式格式化标签文本
在标签中显示x和y值
阅读时机：需要在迷你折线图上直接添加数值或格式化值时

Advanced Features

高级功能

📄 Read: references/advanced-features.md

Range band visualization (shaded background regions)
Axis customization (min, max, interval settings)
User interactions (tooltip configuration, event handling)
Special points customization (high/low point colors)
Container sizing and responsive dimensions
RTL (Right-to-Left) support
When to read: Implement complex features like range bands, axis control, or events

📄 阅读： references/advanced-features.md

范围带可视化（阴影背景区域）
轴自定义（最小值、最大值、间隔设置）
用户交互（工具提示配置、事件处理）
特殊点自定义（最高点/最低点颜色）
容器尺寸与响应式维度
RTL（从右到左）布局支持
阅读时机：需要实现范围带、轴控制或事件等复杂功能时

Appearance and Accessibility

外观与无障碍访问

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

CSS themes and theme switching
Appearance customization with CSS classes
Localization (locale-specific formatting)
WCAG accessibility compliance
Keyboard navigation support
Responsive design for different screen sizes
When to read: Style the sparkline, support multiple locales, or ensure accessibility

📄 阅读： references/appearance-and-accessibility.md

CSS主题与主题切换
使用CSS类自定义外观
本地化（特定区域设置的格式化）
符合WCAG无障碍标准
键盘导航支持
针对不同屏幕尺寸的响应式设计
阅读时机：需要设置迷你折线图样式、支持多语言区域或确保无障碍访问时

Migration Guide

迁移指南

📄 Read: references/migration-guide.md

Migrating from EJ1 Sparkline to EJ2
API property mapping and changes
Breaking changes and deprecated features
Finding equivalents for legacy functionality
When to read: You're upgrading from an older Syncfusion version

📄 阅读： references/migration-guide.md

从EJ1 Sparkline迁移到EJ2
API属性映射与变更
破坏性变更与已弃用功能
查找旧版功能的等效替代方案
阅读时机：你正在升级旧版Syncfusion版本时

Quick Start Example

快速入门示例

Here's a minimal example to render a basic sparkline:

typescript

import { SparklineModule } from '@syncfusion/ej2-angular-charts'
import { Component } from '@angular/core';

@Component({
  imports: [SparklineModule],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-sparkline 
    id='sparkline-container'
    [dataSource]="data"
    xName="x"
    yName="y"
    type="Line">
  </ejs-sparkline>`
})
export class AppComponent {
  data = [
    { x: 'Jan', y: 2 },
    { x: 'Feb', y: 6 },
    { x: 'Mar', y: 4 },
    { x: 'Apr', y: 8 },
    { x: 'May', y: 5 }
  ]
}

Output: A simple line sparkline showing the trend across months.

以下是渲染基础迷你折线图的最简示例：

typescript

import { SparklineModule } from '@syncfusion/ej2-angular-charts'
import { Component } from '@angular/core';

@Component({
  imports: [SparklineModule],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-sparkline 
    id='sparkline-container'
    [dataSource]="data"
    xName="x"
    yName="y"
    type="Line">
  </ejs-sparkline>`
})
export class AppComponent {
  data = [
    { x: 'Jan', y: 2 },
    { x: 'Feb', y: 6 },
    { x: 'Mar', y: 4 },
    { x: 'Apr', y: 8 },
    { x: 'May', y: 5 }
  ]
}

输出： 一个简单的折线迷你图，展示了各月份的趋势变化。

Common Patterns

常见模式

Pattern 1: Sparkline in a Table Cell

模式1：表格单元格中的迷你折线图

Embed a sparkline within a grid or table to show trends for each row:

html

<table>
  <tr>
    <td>Product A</td>
    <td><ejs-sparkline [dataSource]="salesA" type="Column" height="50px" width="150px"></ejs-sparkline></td>
  </tr>
  <tr>
    <td>Product B</td>
    <td><ejs-sparkline [dataSource]="salesB" type="Column" height="50px" width="150px"></ejs-sparkline></td>
  </tr>
</table>

将迷你折线图嵌入网格或表格中，展示每一行的趋势：

html

<table>
  <tr>
    <td>产品A</td>
    <td><ejs-sparkline [dataSource]="salesA" type="Column" height="50px" width="150px"></ejs-sparkline></td>
  </tr>
  <tr>
    <td>产品B</td>
    <td><ejs-sparkline [dataSource]="salesB" type="Column" height="50px" width="150px"></ejs-sparkline></td>
  </tr>
</table>

Pattern 2: Highlight Key Points with Markers

模式2：使用标记突出关键点

Show markers on high and low points to emphasize performance peaks:

typescript

@Component({
  template: `<ejs-sparkline 
    [dataSource]="data"
    type="Line"
    [markerSettings]="markerSettings">
  </ejs-sparkline>`
})
export class HighlightComponent {
  data = [10, 25, 15, 35, 20, 30]
  markerSettings = {
    visible: ['High', 'Low'],
    fill: '#FF5733',
    size: 8,
    opacity: 1
  }
}

在最高点和最低点显示标记，以强调性能峰值：

typescript

@Component({
  template: `<ejs-sparkline 
    [dataSource]="data"
    type="Line"
    [markerSettings]="markerSettings">
  </ejs-sparkline>`
})
export class HighlightComponent {
  data = [10, 25, 15, 35, 20, 30]
  markerSettings = {
    visible: ['High', 'Low'],
    fill: '#FF5733',
    size: 8,
    opacity: 1
  }
}

Pattern 3: Add Tooltip for Details

模式3：添加工具提示显示详情

Enable tooltip to show exact values on hover with custom formatting:

typescript

import { SparklineModule, SparklineTooltipService } from '@syncfusion/ej2-angular-charts'

@Component({
  imports: [SparklineModule],
  standalone: true,
  providers: [SparklineTooltipService],
  template: `<ejs-sparkline 
    [dataSource]="data"
    xName="month"
    yName="sales"
    [tooltipSettings]="tooltipSettings">
  </ejs-sparkline>`
})
export class TooltipComponent {
  data = [
    { month: 'Jan', sales: 10000 },
    { month: 'Feb', sales: 15000 }
  ]
  tooltipSettings = { 
    visible: true,
    format: '${month}: ${sales} units'
  }
}

启用工具提示，在悬停时显示精确值并支持自定义格式化：

typescript

import { SparklineModule, SparklineTooltipService } from '@syncfusion/ej2-angular-charts'

@Component({
  imports: [SparklineModule],
  standalone: true,
  providers: [SparklineTooltipService],
  template: `<ejs-sparkline 
    [dataSource]="data"
    xName="month"
    yName="sales"
    [tooltipSettings]="tooltipSettings">
  </ejs-sparkline>`
})
export class TooltipComponent {
  data = [
    { month: 'Jan', sales: 10000 },
    { month: 'Feb', sales: 15000 }
  ]
  tooltipSettings = { 
    visible: true,
    format: '${month}: ${sales} units'
  }
}

Pattern 4: Range Bands for Thresholds

模式4：使用范围带显示阈值

Display shaded regions to show acceptable performance ranges:

typescript

@Component({
  template: `<ejs-sparkline 
    [dataSource]="data"
    type="Area"
    [rangeBandSettings]="rangeBandSettings">
  </ejs-sparkline>`
})
export class RangeBandComponent {
  data = [20, 30, 25, 35, 28, 32, 40]
  rangeBandSettings = [
    { startRange: 25, endRange: 35, color: '#90EE90', opacity: 0.3 },  // Good range
    { startRange: 15, endRange: 25, color: '#FFD700', opacity: 0.3 }   // Warning range
  ]
}

显示阴影区域以展示可接受的性能范围：

typescript

@Component({
  template: `<ejs-sparkline 
    [dataSource]="data"
    type="Area"
    [rangeBandSettings]="rangeBandSettings">
  </ejs-sparkline>`
})
export class RangeBandComponent {
  data = [20, 30, 25, 35, 28, 32, 40]
  rangeBandSettings = [
    { startRange: 25, endRange: 35, color: '#90EE90', opacity: 0.3 },  // 良好范围
    { startRange: 15, endRange: 25, color: '#FFD700', opacity: 0.3 }   // 警告范围
  ]
}

Pattern 5: Event Handling

模式5：事件处理

Handle sparkline events for user interactions:

typescript

@Component({
  template: `<ejs-sparkline 
    [dataSource]="data"
    (pointRegionMouseClick)="onPointClick($event)"
    (sparklineMouseClick)="onSparklineClick($event)">
  </ejs-sparkline>`
})
export class EventComponent {
  data = [10, 25, 15, 35, 20]
  
  onPointClick(args: any) {
    console.log('Point clicked:', args.pointIndex, args.value)
  }
  
  onSparklineClick(args: any) {
    console.log('Sparkline clicked')
  }
}

处理迷你折线图的用户交互事件：

typescript

@Component({
  template: `<ejs-sparkline 
    [dataSource]="data"
    (pointRegionMouseClick)="onPointClick($event)"
    (sparklineMouseClick)="onSparklineClick($event)">
  </ejs-sparkline>`
})
export class EventComponent {
  data = [10, 25, 15, 35, 20]
  
  onPointClick(args: any) {
    console.log('点击了数据点:', args.pointIndex, args.value)
  }
  
  onSparklineClick(args: any) {
    console.log('点击了迷你折线图')
  }
}

Key Props

核心属性

Property	Type	Default	Purpose
`dataSource`	Array	`[]`	Data array (primitives or objects) - binds data to sparkline
`xName`	string	-	Object property name for X values (e.g., 'month', 'date')
`yName`	string	-	Object property name for Y values (e.g., 'sales', 'count')
`type`	string	`'Line'`	Sparkline type: Line, Column, Area, Pie, WinLoss
`markerSettings`	object	-	Configure marker display and style (High, Low, Start, End, Negative, All) with fill, border, size, opacity properties
`dataLabelSettings`	object	-	Configure data label display with visible array, format string, fill color, border, textStyle, and edgeLabelMode
`tooltipSettings`	object	-	Tooltip configuration (visible, format with ${x}/${y} tokens, fill, border, textStyle, trackLineSettings)
`height`	string/number	`'100px'`	Container height in px (e.g., '150px') or percentage (e.g., '100%')
`width`	string/number	`'100%'`	Container width in px (e.g., '300px') or percentage (e.g., '100%')
`rangeBandSettings`	object/array	-	Configure background shading regions (startRange, endRange, color, opacity) - supports single object or array for multiple bands
`axisSettings`	object	-	Axis configuration (minX, maxX, minY, maxY, intervalX, intervalY, valueType: Numeric/Category/DateTime)
`highPointColor`	string	-	Color for highest point in data series (hex or named color)
`lowPointColor`	string	-	Color for lowest point in data series (hex or named color)
`startPointColor`	string	-	Color for first/start point in the series
`endPointColor`	string	-	Color for last/end point in the series
`negativePointColor`	string	-	Color for negative data values (below zero)
`fill`	string	-	Fill color for the sparkline area/column/bars (primary series color)
`lineWidth`	number	1	Thickness of line type sparkline (1-10 range recommended)
`opacity`	number	1	Opacity of the sparkline series (0-1 range)
`enableRtl`	boolean	false	Enable Right-to-Left layout for RTL languages (Arabic, Hebrew)
`valueType`	string	'Numeric'	Data type for axis values: Numeric, Category, DateTime
`format`	string	-	Number format for axis values (e.g., 'n2' for 2 decimals, 'c' for currency)
`useGroupingSeparator`	boolean	false	Enable thousand separator formatting (e.g., 1,000)
`theme`	string	'Material'	Visual theme: Material, Fabric, Bootstrap, HighContrast, etc.
`border`	object	-	Border configuration (color, width) for sparkline container
`containerArea`	object	-	Container customization (background color, border settings)
`padding`	object	-	Padding for sparkline (left, right, top, bottom in pixels)

属性	类型	默认值	用途
`dataSource`	数组	`[]`	数据数组（原始值或对象）- 为迷你折线图绑定数据
`xName`	字符串	-	X值对应的对象属性名（如'month'、'date'）
`yName`	字符串	-	Y值对应的对象属性名（如'sales'、'count'）
`type`	字符串	`'Line'`	迷你折线图类型：Line、Column、Area、Pie、WinLoss
`markerSettings`	对象	-	配置标记的显示与样式（High、Low、Start、End、Negative、All），包含填充色、边框、大小、透明度属性
`dataLabelSettings`	对象	-	配置数据标签的显示，包含可见数组、格式字符串、填充色、边框、文字样式、边缘标签模式
`tooltipSettings`	对象	-	工具提示配置（可见性、使用${x}/${y}标记的格式、填充色、边框、文字样式、跟踪线设置）
`height`	字符串/数字	`'100px'`	容器高度，单位为px（如'150px'）或百分比（如'100%'）
`width`	字符串/数字	`'100%'`	容器宽度，单位为px（如'300px'）或百分比（如'100%'）
`rangeBandSettings`	对象/数组	-	配置背景阴影区域（startRange、endRange、color、opacity）- 支持单个对象或多个对象组成的数组
`axisSettings`	对象	-	轴配置（minX、maxX、minY、maxY、intervalX、intervalY、valueType: Numeric/Category/DateTime）
`highPointColor`	字符串	-	数据系列中最高点的颜色（十六进制或命名颜色）
`lowPointColor`	字符串	-	数据系列中最低点的颜色（十六进制或命名颜色）
`startPointColor`	字符串	-	系列中第一个/起点的颜色
`endPointColor`	字符串	-	系列中最后一个/终点的颜色
`negativePointColor`	字符串	-	负数据值（低于零）的颜色
`fill`	字符串	-	迷你折线图区域/柱形/条形的填充色（主系列颜色）
`lineWidth`	数字	1	Line类型迷你折线图的线条粗细（建议范围1-10）
`opacity`	数字	1	迷你折线图系列的透明度（范围0-1）
`enableRtl`	布尔值	false	为RTL语言（阿拉伯语、希伯来语）启用从右到左布局
`valueType`	字符串	'Numeric'	轴值的数据类型：Numeric、Category、DateTime
`format`	字符串	-	轴值的数字格式（如'n2'表示保留两位小数，'c'表示货币格式）
`useGroupingSeparator`	布尔值	false	启用千位分隔符格式化（如1,000）
`theme`	字符串	'Material'	视觉主题：Material、Fabric、Bootstrap、HighContrast等
`border`	对象	-	迷你折线图容器的边框配置（颜色、宽度）
`containerArea`	对象	-	容器自定义（背景颜色、边框设置）
`padding`	对象	-	迷你折线图的内边距（左、右、上、下，单位为像素）

Common Use Cases

常见使用场景

Dashboard Metrics - Display mini charts showing KPI trends in real-time dashboards and metrics views. Ideal for executive dashboards with multiple metrics displayed in a compact grid layout.
Financial Data Visualization - Visualize stock prices, trading volumes, or currency trends with range bands for support/resistance zones. Use markers to highlight significant price points and tooltips for detailed values.
Performance Monitoring - Show system metrics (CPU, memory, disk usage, network throughput) monitored over 24-hour periods. Color-code negative spikes and use range bands to show acceptable operating ranges.
Data Table Integration - Embed sparklines within data grid cells to compare performance trends across multiple products, users, or regions in table rows. Each row shows its own mini trend visualization.
Win-Loss Analysis - Track success/failure outcomes (pass/fail, approved/rejected, win/loss) in a compact binary format using the WinLoss type. Perfect for game results, test outcomes, or approval workflows.
Time Series Condensed View - Display historical data in a condensed format with trend visualization. Show weekly, monthly, or yearly patterns without taking up significant screen space.
Sales Pipeline Tracking - Show monthly/quarterly sales trends by product category or sales territory. Use different sparkline types to represent different metrics (revenue as Area, units as Column).
User Activity Analytics - Track engagement metrics (page visits, active users, session duration) over specific time periods. Identify patterns and anomalies with marker highlighting.
Quality Metrics Dashboard - Display defect rates, uptime percentages, or quality scores across production batches. Use range bands to show acceptable quality zones and markers to flag outliers.
Resource Utilization Monitoring - Monitor bandwidth consumption, storage capacity trends, or license usage patterns at a glance. Set axis bounds to show capacity limits and use color-coded points for threshold breaches.
IoT Sensor Data - Display real-time sensor readings (temperature, humidity, pressure) in compact charts within IoT monitoring dashboards. Show 24-hour trends for each sensor in minimal space.
Social Media Analytics - Track follower growth, engagement rates, or post reach over time. Use Pie sparklines to show proportional engagement across different platforms.

Next Steps: Start with getting-started.md to install and render your first sparkline, then explore other reference guides based on your needs.

仪表板指标 - 在实时仪表板和指标视图中显示迷你图表，展示KPI趋势。非常适合在紧凑网格布局中展示多个指标的高管仪表板。
金融数据可视化 - 使用范围带显示支撑/阻力区域，可视化股票价格、交易量或货币趋势。使用标记突出重要价格点，工具提示显示详细数值。
性能监控 - 显示24小时内的系统指标（CPU、内存、磁盘使用、网络吞吐量）。为负峰值添加颜色标记，使用范围带展示可接受的运行范围。
数据表集成 - 将迷你折线图嵌入数据网格单元格，在表格行中比较多个产品、用户或区域的性能趋势。每行展示自己的迷你趋势可视化。
胜负分析 - 使用WinLoss类型以紧凑的二进制格式跟踪成功/失败结果（通过/失败、批准/拒绝、赢/输）。非常适合游戏结果、测试结果或审批流程。
时间序列精简视图 - 以精简格式显示历史数据并展示趋势。在不占用大量屏幕空间的情况下显示每周、每月或每年的模式。
销售管道跟踪 - 按产品类别或销售区域展示月度/季度销售趋势。使用不同类型的迷你折线图表示不同指标（收入用Area类型，销量用Column类型）。
用户活动分析 - 跟踪特定时间段内的参与度指标（页面访问量、活跃用户数、会话时长）。使用标记突出显示模式和异常值。
质量指标仪表板 - 展示各生产批次的缺陷率、正常运行时间百分比或质量分数。使用范围带展示可接受的质量区间，标记标记异常值。
资源利用率监控 - 快速查看带宽消耗、存储容量趋势或许可证使用模式。设置轴边界以显示容量限制，使用颜色编码点标记阈值突破情况。
IoT传感器数据 - 在IoT监控仪表板的紧凑图表中显示实时传感器读数（温度、湿度、压力）。为每个传感器显示24小时趋势，占用最小空间。
社交媒体分析 - 跟踪粉丝增长、参与率或帖子覆盖范围随时间的变化。使用Pie迷你折线图展示不同平台的参与度比例。

下一步： 从getting-started.md开始，安装并渲染你的第一个迷你折线图，然后根据需求探索其他参考指南。

API Reference

API参考

A concise API reference for the Syncfusion Angular

Sparkline

is available in the

references

folder. It includes property anchors, method links, and event argument types mapped to the official docs.

Read the API reference: references/api-reference.md

Syncfusion Angular

Sparkline

的简明API参考位于

references

文件夹中，包含属性锚点、方法链接以及与官方文档映射的事件参数类型。

阅读API参考：references/api-reference.md