syncfusion-react-sparkline

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion React Sparklines

实现Syncfusion React Sparkline组件

A comprehensive guide for implementing Syncfusion React Sparkline components - lightweight, compact charts designed to visualize data trends in minimal space without axes or coordinates.

本指南全面介绍如何实现Syncfusion React Sparkline组件——这是一种轻量级、紧凑型图表，旨在以最小空间可视化数据趋势，无需坐标轴或坐标信息。

When to Use This Skill

何时使用此技能

Use this skill when you need to:

Create compact data visualizations in dashboards or grids
Display trend indicators inline with data
Implement mini charts that consume minimal space
Show data patterns in table cells or small containers
Create any of the 5 sparkline types: Line, Column, Area, Win-Loss, or Pie
Add tooltips, markers, or data labels to sparklines
Customize sparkline appearance with themes and colors
Implement accessible, responsive sparkline visualizations
Integrate sparklines with grids or other components
Highlight specific data ranges with range bands

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

在仪表板或网格中创建紧凑型数据可视化
与数据内联展示趋势指示器
实现占用最小空间的小型图表
在表格单元格或小型容器中展示数据模式
创建以下5种迷你图类型：折线图（Line）、柱状图（Column）、面积图（Area）、盈亏图（Win-Loss）或饼图（Pie）
为迷你图添加工具提示、标记点或数据标签
通过主题和颜色自定义迷你图外观
实现可访问、响应式的迷你图可视化
将迷你图与网格或其他组件集成
使用范围带突出显示特定数据范围

Component Overview

组件概述

The Syncfusion React Sparkline is a highly condensed chart component that presents data in a simple, compact format. Key features include:

5 Sparkline Types: Line, Column, Area, Win-Loss, and Pie
Interactive Features: Tooltips with customization and templates, track lines
Visual Markers: Highlight start, end, high, low, and negative points
Data Labels: Display values at specific points with formatting
Range Bands: Highlight specific value ranges along the y-axis
Axis Customization: Support for Numeric, Category, and DateTime value types
Themes: Material, Fabric, Bootstrap, and Highcontrast themes
Accessibility: WCAG 2.2, Section 508 compliance with WAI-ARIA support
Grid Integration: Designed to work seamlessly within grid cells
Localization: Support for internationalization

Syncfusion React Sparkline是一种高度精简的图表组件，以简洁、紧凑的格式呈现数据。主要特性包括：

5种迷你图类型：折线图、柱状图、面积图、盈亏图和饼图
交互特性：可自定义的工具提示及模板、跟踪线
可视化标记点：突出显示起始点、结束点、最高点、最低点和负值点
数据标签：在特定点显示格式化后的值
范围带：沿Y轴突出显示特定值范围
轴自定义：支持数值型、分类型和日期时间型值类型
主题：Material、Fabric、Bootstrap和Highcontrast主题
可访问性：符合WCAG 2.2、Section 508标准，支持WAI-ARIA
网格集成：专为在网格单元格内无缝工作设计
本地化：支持国际化

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Dependencies and package installation (
```
@syncfusion/ej2-react-charts
```
)
Creating React application with Vite
Adding SparklineComponent to project
Module injection for tooltip feature
Binding data source with dataSource property
Changing sparkline type (Line, Column, Area, Win-Loss, Pie)
Basic tooltip configuration
First working example

📄 阅读：references/getting-started.md

依赖项与包安装（
```
@syncfusion/ej2-react-charts
```
）
使用Vite创建React应用
向项目中添加SparklineComponent
工具提示功能的模块注入
使用dataSource属性绑定数据源
更改迷你图类型（折线图、柱状图、面积图、盈亏图、饼图）
基础工具提示配置
第一个可运行示例

Sparkline Types

迷你图类型

📄 Read: references/sparkline-types.md

Overview of all 5 sparkline types
Line type: Continuous trend visualization
Column type: Discrete value comparison
Area type: Filled trend visualization
Win-Loss type: Binary outcome representation
Pie type: Proportional data display
Type selection guide based on data and use case
Complete examples for each type

📄 阅读：references/sparkline-types.md

所有5种迷你图类型概述
折线图：连续趋势可视化
柱状图：离散值对比
面积图：填充式趋势可视化
盈亏图：二元结果展示
饼图：比例数据显示
根据数据和使用场景选择类型的指南
每种类型的完整示例

Appearance Customization

外观自定义

📄 Read: references/appearance-customization.md

Sparkline border configuration with containerArea
Padding customization (left, right, top, bottom)
Container background color
Theme selection (Material, Fabric, Bootstrap, Highcontrast)
Color and styling best practices
Visual design guidelines

📄 阅读：references/appearance-customization.md

使用containerArea配置迷你图边框
内边距自定义（左、右、上、下）
容器背景颜色
主题选择（Material、Fabric、Bootstrap、Highcontrast）
颜色与样式最佳实践
视觉设计指南

Data Labels

数据标签

📄 Read: references/data-labels.md

Enabling data labels for specific points
Visibility options: All, Start, End, High, Low, Negative
Customizing fill color, border, opacity, and text styles
Formatting data label text with format property
Displaying x and y values together
Data label positioning and readability

📄 阅读：references/data-labels.md

为特定点启用数据标签
可见性选项：全部、起始点、结束点、最高点、最低点、负值点
自定义填充颜色、边框、透明度和文本样式
使用format属性格式化数据标签文本
同时显示X和Y值
数据标签定位与可读性

Markers

标记点

📄 Read: references/markers.md

Adding markers to sparkline points
Marker visibility options: All, Start, End, High, Low, Negative
Special point marker configuration
Customizing marker fill, border, size, and opacity
Combining markers with other features
Best practices for marker usage

📄 阅读：references/markers.md

为迷你图点添加标记点
标记点可见性选项：全部、起始点、结束点、最高点、最低点、负值点
特殊点标记点配置
自定义标记点填充色、边框、尺寸和透明度
标记点与其他特性的结合使用
标记点使用最佳实践

User Interaction

用户交互

📄 Read: references/user-interaction.md

Tooltip configuration and SparklineTooltip injection
Tooltip customization (fill, text styles, format, border)
Creating custom tooltip templates with HTML
Track line feature for mouse tracking
Track line color and styling
Interactive feature best practices

📄 阅读：references/user-interaction.md

工具提示配置与SparklineTooltip注入
工具提示自定义（填充色、文本样式、格式、边框）
使用HTML创建自定义工具提示模板
用于鼠标跟踪的跟踪线功能
跟踪线颜色与样式
交互特性最佳实践

Advanced Features

高级特性

📄 Read: references/advanced-features.md

Axis customization with valueType (Numeric, Category, DateTime)
Setting min/max values (minX, maxX, minY, maxY)
Axis line customization (color, width, opacity, dashArray)
Range bands for highlighting value ranges
Multiple range band configuration
Special points customization (start, end, positive, negative, low)
Tie point color for Win-Loss sparklines
Sparkline dimensions (container, pixel, percentage sizing)
Localization and culture support

📄 阅读：references/advanced-features.md

使用valueType自定义轴（数值型、分类型、日期时间型）
设置最小/最大值（minX、maxX、minY、maxY）
轴线自定义（颜色、宽度、透明度、dashArray）
用于突出显示值范围的范围带
多范围带配置
特殊点自定义（起始点、结束点、正值点、负值点、最低点）
盈亏迷你图的平局点颜色
迷你图尺寸（容器、像素、百分比 sizing）
本地化与文化支持

Accessibility

可访问性

📄 Read: references/accessibility.md

WCAG 2.2 and Section 508 compliance
WAI-ARIA attributes (img role, aria-label, aria-hidden)
Keyboard interaction (Ctrl + P for printing)
Screen reader support
Right-to-left (RTL) support
Color contrast guidelines
Mobile device support
Accessibility testing tools

📄 阅读：references/accessibility.md

符合WCAG 2.2和Section 508标准
WAI-ARIA属性（img角色、aria-label、aria-hidden）
键盘交互（Ctrl + P用于打印）
屏幕阅读器支持
从右到左（RTL）支持
颜色对比度指南
移动设备支持
可访问性测试工具

API Reference

API参考

📄 Read: references/api-reference.md

Complete API reference for
```
SparklineComponent
```
: props, events, methods, child directives, and a usage example (based on the official Syncfusion React Sparkline API).

📄 阅读：references/api-reference.md

```
SparklineComponent
```
的完整API参考：属性、事件、方法、子指令，以及一个使用示例（基于官方Syncfusion React Sparkline API）。

Quick Start

快速开始

Installation

安装

bash

npm install @syncfusion/ej2-react-charts --save

bash

npm install @syncfusion/ej2-react-charts --save

Basic Sparkline

基础迷你图

javascript

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
    />
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('charts'));

javascript

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
    />
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('charts'));

Sparkline with Tooltip

带工具提示的迷你图

javascript

import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      tooltipSettings={{ visible: true, format: '${x} : ${y}' }}
    >
      <Inject services={[SparklineTooltip]} />
    </SparklineComponent>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('charts'));

javascript

import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      tooltipSettings={{ visible: true, format: '${x} : ${y}' }}
    >
      <Inject services={[SparklineTooltip]} />
    </SparklineComponent>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('charts'));

Common Patterns

常见模式

Column Sparkline with Markers

带标记点的柱状迷你图

javascript

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function ColumnSparkline() {
  const data = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      markerSettings={{ visible: ['High', 'Low'] }}
      highPointColor="green"
      lowPointColor="red"
    />
  );
}

export default ColumnSparkline;
ReactDOM.render(<ColumnSparkline />, document.getElementById('charts'));

javascript

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function ColumnSparkline() {
  const data = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      markerSettings={{ visible: ['High', 'Low'] }}
      highPointColor="green"
      lowPointColor="red"
    />
  );
}

export default ColumnSparkline;
ReactDOM.render(<ColumnSparkline />, document.getElementById('charts'));

Win-Loss Sparkline

盈亏迷你图

javascript

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function WinLossSparkline() {
  const data = [12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="WinLoss"
      height="150px"
      width="300px"
      tiePointColor="blue"
    />
  );
}

export default WinLossSparkline;
ReactDOM.render(<WinLossSparkline />, document.getElementById('charts'));

javascript

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function WinLossSparkline() {
  const data = [12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="WinLoss"
      height="150px"
      width="300px"
      tiePointColor="blue"
    />
  );
}

export default WinLossSparkline;
ReactDOM.render(<WinLossSparkline />, document.getElementById('charts'));

Sparkline with Data Labels

带数据标签的迷你图

javascript

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function SparklineWithLabels() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      dataLabelSettings={{
        visible: ['Start', 'End'],
        border: { color: 'blue', width: 1 },
        fill: 'blue',
        opacity: 0.4,
        textStyle: { color: 'white' }
      }}
    />
  );
}

export default SparklineWithLabels;
ReactDOM.render(<SparklineWithLabels />, document.getElementById('charts'));

javascript

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function SparklineWithLabels() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      dataLabelSettings={{
        visible: ['Start', 'End'],
        border: { color: 'blue', width: 1 },
        fill: 'blue',
        opacity: 0.4,
        textStyle: { color: 'white' }
      }}
    />
  );
}

export default SparklineWithLabels;
ReactDOM.render(<SparklineWithLabels />, document.getElementById('charts'));

Sparkline with Range Band

带范围带的迷你图

javascript

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function SparklineWithRangeBand() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      rangeBandSettings={[
        { startRange: 1, endRange: 3, color: '#bfd4fc', opacity: 0.4 }
      ]}
    />
  );
}

export default SparklineWithRangeBand;
ReactDOM.render(<SparklineWithRangeBand />, document.getElementById('charts'));

javascript

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function SparklineWithRangeBand() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      rangeBandSettings={[
        { startRange: 1, endRange: 3, color: '#bfd4fc', opacity: 0.4 }
      ]}
    />
  );
}

export default SparklineWithRangeBand;
ReactDOM.render(<SparklineWithRangeBand />, document.getElementById('charts'));

Key Props Reference

关键属性参考

Property	Type	Description
`dataSource`	object[]	Data for the sparkline
`type`	string	Sparkline type: 'Line', 'Column', 'Area', 'WinLoss', 'Pie'
`xName`	string	Property name for x-axis from dataSource
`yName`	string	Property name for y-axis from dataSource
`height`	string	Height of the sparkline
`width`	string	Width of the sparkline
`fill`	string	Color of the sparkline
`valueType`	string	Axis value type: 'Numeric', 'Category', 'DateTime'
`markerSettings`	object	Configuration for markers
`dataLabelSettings`	object	Configuration for data labels
`tooltipSettings`	object	Configuration for tooltips
`axisSettings`	object	Axis min/max and line customization
`rangeBandSettings`	object[]	Range band configurations
`theme`	string	Theme: 'Material', 'Fabric', 'Bootstrap', 'Highcontrast'
`padding`	object	Padding around sparkline (left, right, top, bottom)
`containerArea`	object	Border and background for sparkline area

属性	类型	描述
`dataSource`	object[]	迷你图的数据
`type`	string	迷你图类型：'Line'、'Column'、'Area'、'WinLoss'、'Pie'
`xName`	string	数据源中对应X轴的属性名
`yName`	string	数据源中对应Y轴的属性名
`height`	string	迷你图的高度
`width`	string	迷你图的宽度
`fill`	string	迷你图的颜色
`valueType`	string	轴值类型：'Numeric'、'Category'、'DateTime'
`markerSettings`	object	标记点的配置
`dataLabelSettings`	object	数据标签的配置
`tooltipSettings`	object	工具提示的配置
`axisSettings`	object	轴最小/最大值及轴线自定义
`rangeBandSettings`	object[]	范围带的配置
`theme`	string	主题：'Material'、'Fabric'、'Bootstrap'、'Highcontrast'
`padding`	object	迷你图周围的内边距（左、右、上、下）
`containerArea`	object	迷你图区域的边框和背景

Common Use Cases

常见使用场景

Dashboard Trend Indicators: Display KPI trends inline with metrics
Grid Integration: Show mini charts in table cells
Financial Data: Win-Loss sparklines for stock market gains/losses
Performance Monitoring: Quick visualization of server metrics or response times
Comparison Views: Multiple sparklines side-by-side for data comparison
Mobile Dashboards: Compact visualizations for small screens
Email Reports: Lightweight charts that render quickly
Real-time Monitoring: Simple, fast-updating visualizations

仪表板趋势指示器：与指标内联展示KPI趋势
网格集成：在表格单元格中显示小型图表
金融数据：用于股票市场涨跌的盈亏迷你图
性能监控：快速可视化服务器指标或响应时间
对比视图：多个迷你图并排用于数据对比
移动仪表板：针对小屏幕的紧凑型可视化
邮件报告：可快速渲染的轻量级图表
实时监控：简洁、快速更新的可视化

Next Steps

下一步

Start with Getting Started: Read
```
references/getting-started.md
```
for installation and basic setup
Choose Your Type: Read
```
references/sparkline-types.md
```
to select the right sparkline type
Customize Appearance: Read
```
references/appearance-customization.md
```
for styling
Add Interactivity: Read
```
references/user-interaction.md
```
for tooltips and track lines
Advanced Configuration: Read
```
references/advanced-features.md
```
for axis, range bands, and more

从入门开始：阅读
```
references/getting-started.md
```
了解安装和基础设置
选择类型：阅读
```
references/sparkline-types.md
```
选择合适的迷你图类型
自定义外观：阅读
```
references/appearance-customization.md
```
进行样式设置
添加交互性：阅读
```
references/user-interaction.md
```
了解工具提示和跟踪线
高级配置：阅读
```
references/advanced-features.md
```
了解轴、范围带等更多功能