syncfusion-react-charts

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion React Charts

实现Syncfusion React Charts

When to Use This Skill

何时使用本技能

Use this skill when you need to:

Create and render charts (area, bar, column, line, scatter, etc.)
Configure chart axes and customize their appearance
Bind local data, remote data (DataManager), or use OData/WebAPI/custom adaptors
Dynamically add, remove, or replace data points (
```
addPoint
```
,
```
removePoint
```
,
```
setData
```
)
Customize chart appearance (colors, labels, legends, annotations)
Configure data labels (must be placed inside
```
marker.dataLabel
```
, not directly on the series)
Implement user interactions (selection, zooming, tooltips)
Add financial indicators and technical analysis
Handle accessibility and internationalization
Troubleshoot chart rendering or data issues

在以下场景中使用本技能：

创建并渲染图表（面积图、柱状图、列图、折线图、散点图等）
配置图表坐标轴并自定义其外观
绑定本地数据、远程数据（DataManager）或使用OData/WebAPI/自定义适配器
动态添加、删除或替换数据点（
```
addPoint
```
、
```
removePoint
```
、
```
setData
```
）
自定义图表外观（颜色、标签、图例、注释）
配置数据标签（必须放置在
```
marker.dataLabel
```
内，不能直接在系列上设置）
实现用户交互（选择、缩放、提示框）
添加财务指标和技术分析功能
处理无障碍和国际化需求
排查图表渲染或数据相关问题

Component Overview

组件概述

Syncfusion React Chart is a powerful data visualization component that supports 20+ chart types with extensive customization options. It's designed for building professional dashboards, reports, and analytics applications with interactive features like zooming, selection, and tooltips.

Key Capabilities:

20+ chart types (cartesian, polar, radar, pie, doughnut, and more)
Multiple axes (category, numeric, date-time, logarithmic)
Financial indicators and candlestick charts
Advanced interactions (zoom, pan, crosshair, tooltip)
Responsive design and accessibility support
Print and export functionality

Syncfusion React Chart是一款功能强大的数据可视化组件，支持20余种图表类型，具备丰富的自定义选项。它专为构建专业仪表板、报表和分析应用而设计，提供缩放、选择、提示框等交互功能。

核心功能：

20余种图表类型（笛卡尔图、极坐标图、雷达图、饼图、环形图等）
多坐标轴（分类轴、数值轴、日期时间轴、对数轴）
财务图表类型和技术指标
高级交互功能（缩放、平移、十字准线、提示框）
响应式设计和无障碍支持
打印和导出功能

Documentation and Navigation Guide

文档与导航指南

API Reference

API参考

📄 Read: references/api-reference.md

Complete ChartComponent properties reference
All methods and events documentation
SeriesDirective properties
Model interfaces (AxisModel, ZoomSettingsModel, etc.)
Module services (series types, features, indicators)
Official API documentation links

📄 阅读： references/api-reference.md

完整的ChartComponent属性参考
所有方法和事件文档
SeriesDirective属性
模型接口（AxisModel、ZoomSettingsModel等）
模块服务（系列类型、功能、指标）
官方API文档链接

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation and package setup
Creating your first chart
CSS imports and theme configuration
Rendering basic chart examples
Package structure overview

📄 阅读： references/getting-started.md

安装和包配置
创建你的第一个图表
CSS导入和主题配置
渲染基础图表示例
包结构概述

Chart Types

图表类型

📄 Read: references/chart-types.md

Overview of 20+ supported chart types
When to use each chart type
Basic examples for common types (Line, Bar, Column, Area, Scatter)
Type-specific configurations
Choosing the right chart for your data

📄 阅读： references/chart-types.md

20余种支持的图表类型概述
每种图表类型的适用场景
常见类型（折线图、柱状图、列图、面积图、散点图）的基础示例
特定类型的配置
为你的数据选择合适的图表

Axes and Customization

坐标轴与自定义

📄 Read: references/axes-and-customization.md

Category, numeric, date-time, and logarithmic axes
Axis labels and formatting
Multiple axes configuration
Range and interval settings
Axis crossing and positioning

📄 阅读： references/axes-and-customization.md

分类轴、数值轴、日期时间轴和对数轴
坐标轴标签和格式化
多坐标轴配置
范围和间隔设置
坐标轴交叉和定位

Series and Data Binding

系列与数据绑定

📄 Read: references/series-and-data.md

Series configuration and properties
Local data binding patterns
Remote data binding using
```
DataManager
```
Data adaptors:
```
ODataAdaptor
```
,
```
ODataV4Adaptor
```
,
```
WebApiAdaptor
```
, custom adaptors
Offline mode and lazy loading
Dynamic data updates via
```
addPoint
```
,
```
removePoint
```
,
```
setData
```
, or React state
Multiple series handling
Data validation and edge cases

📄 阅读： references/series-and-data.md

系列配置和属性
本地数据绑定模式
使用
```
DataManager
```
进行远程数据绑定
数据适配器：
```
ODataAdaptor
```
、
```
ODataV4Adaptor
```
、
```
WebApiAdaptor
```
、自定义适配器
离线模式和懒加载
通过
```
addPoint
```
、
```
removePoint
```
、
```
setData
```
或React状态实现动态数据更新
多系列处理
数据验证和边缘情况处理

Appearance and Styling

外观与样式

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

Legend configuration and positioning
Data labels and formatting
Chart annotations
Gradients and color customization
Title, subtitle, and description styling

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

图例配置和定位
数据标签和格式化
图表注释
渐变和颜色自定义
标题、副标题和描述样式

User Interactions

用户交互

📄 Read: references/user-interaction.md

Selection and highlighting
Zooming and panning
Tooltip and crosshair configuration
Synchronized charts
Event handling patterns

📄 阅读： references/user-interaction.md

选择和高亮
缩放和平移
提示框和十字准线配置
同步图表
事件处理模式

Advanced Features

高级功能

📄 Read: references/advanced-features.md

Financial chart types (candlestick, HLOC, high-low)
Technical indicators (moving average, trend lines, etc.)
Multiple panes and indicator panes
Accessibility (WCAG compliance, keyboard navigation)
Internationalization and localization

📄 阅读： references/advanced-features.md

财务图表类型（K线图、HLOC图、高低图）
技术指标（移动平均线、趋势线等）
多窗格和指标窗格
无障碍（WCAG合规、键盘导航）
国际化和本地化

Quick Start Example

快速入门示例

jsx

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, Category, Legend, Tooltip } from '@syncfusion/ej2-react-charts';

export default function BasicChart() {
  const data = [
    { x: 'Jan', y: 35 },
    { x: 'Feb', y: 28 },
    { x: 'Mar', y: 34 },
    { x: 'Apr', y: 32 },
    { x: 'May', y: 40 }
  ];

  return (
    <ChartComponent id='charts'>
      <Inject services={[LineSeries, Category, Legend, Tooltip]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}

jsx

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, Category, Legend, Tooltip } from '@syncfusion/ej2-react-charts';

export default function BasicChart() {
  const data = [
    { x: 'Jan', y: 35 },
    { x: 'Feb', y: 28 },
    { x: 'Mar', y: 34 },
    { x: 'Apr', y: 32 },
    { x: 'May', y: 40 }
  ];

  return (
    <ChartComponent id='charts'>
      <Inject services={[LineSeries, Category, Legend, Tooltip]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}

Common Patterns

常见模式

Pattern 1: Multi-Series Chart

模式1：多系列图表

When displaying multiple datasets that share the same axes, add multiple

SeriesDirective

components within

SeriesCollectionDirective

jsx

<SeriesCollectionDirective>
  <SeriesDirective dataSource={salesData} xName='month' yName='revenue' type='Column' />
  <SeriesDirective dataSource={profitData} xName='month' yName='profit' type='Column' />
</SeriesCollectionDirective>

当显示共享同一坐标轴的多个数据集时，在

SeriesCollectionDirective

中添加多个

SeriesDirective

组件：

jsx

<SeriesCollectionDirective>
  <SeriesDirective dataSource={salesData} xName='month' yName='revenue' type='Column' />
  <SeriesDirective dataSource={profitData} xName='month' yName='profit' type='Column' />
</SeriesCollectionDirective>

Pattern 2: Dynamic Data Updates

模式2：动态数据更新

Three approaches depending on the use case:

a) React state (simple re-render):

jsx

const [data, setData] = useState(initialData);

const handleDataUpdate = () => {
  setData(prev => [...prev, { x: 'Jun', y: 45 }]);
};

<SeriesDirective dataSource={data} xName='x' yName='y' type='Line' />

b)
addPoint
/
removePoint
/
setData
(imperative, with animation):

jsx

const chartRef = useRef(null);

// Add a point
chartRef.current.series[0].addPoint({ x: 'Jun', y: 45 }, 300);

// Remove first point
chartRef.current.series[0].removePoint(0, 300);

// Replace all data
chartRef.current.series[0].setData(newDataArray, 500);

<ChartComponent ref={chartRef} ...>
  <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' />
</ChartComponent>

根据使用场景有三种方法：

a) React状态（简单重渲染）：

jsx

const [data, setData] = useState(initialData);

const handleDataUpdate = () => {
  setData(prev => [...prev, { x: 'Jun', y: 45 }]);
};

<SeriesDirective dataSource={data} xName='x' yName='y' type='Line' />

b)
addPoint
/
removePoint
/
setData
（命令式，带动画）：

jsx

const chartRef = useRef(null);

// 添加一个数据点
chartRef.current.series[0].addPoint({ x: 'Jun', y: 45 }, 300);

// 删除第一个数据点
chartRef.current.series[0].removePoint(0, 300);

// 替换所有数据
chartRef.current.series[0].setData(newDataArray, 500);

<ChartComponent ref={chartRef} ...>
  <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' />
</ChartComponent>

Pattern 3: Remote Data Binding

模式3：远程数据绑定

Use

DataManager

with an adaptor to bind data from a REST API or OData service:

jsx

import { DataManager, Query, WebApiAdaptor } from '@syncfusion/ej2-data';

const dataManager = new DataManager({
  url: 'https://services.syncfusion.com/react/production/api/orders',
  adaptor: new WebApiAdaptor()
});

<SeriesDirective dataSource={dataManager} xName='CustomerID' yName='Freight' type='Column' query={new Query()} />

Other adaptors:

ODataAdaptor

(OData v3),

ODataV4Adaptor

(OData v4), custom adaptor by extending

ODataAdaptor

使用

DataManager

和适配器绑定来自REST API或OData服务的数据：

jsx

import { DataManager, Query, WebApiAdaptor } from '@syncfusion/ej2-data';

const dataManager = new DataManager({
  url: 'https://services.syncfusion.com/react/production/api/orders',
  adaptor: new WebApiAdaptor()
});

<SeriesDirective dataSource={dataManager} xName='CustomerID' yName='Freight' type='Column' query={new Query()} />

其他适配器：

ODataAdaptor

（OData v3）、

ODataV4Adaptor

（OData v4）、通过继承

ODataAdaptor

实现的自定义适配器。

Pattern 4: Data Labels (inside marker)

模式4：数据标签（在marker内）

Data labels must be placed inside

marker.dataLabel

, not directly on the series. Inject

DataLabel

service:

jsx

<Inject services={[LineSeries, Category, DataLabel]} />

<SeriesDirective
  dataSource={data}
  xName='x'
  yName='y'
  type='Line'
  marker={{
    visible: true,
    dataLabel: { visible: true, position: 'Top' }
  }}
/>

数据标签必须放置在

marker.dataLabel

内，不能直接在系列上设置。注入

DataLabel

服务：

jsx

<Inject services={[LineSeries, Category, DataLabel]} />

<SeriesDirective
  dataSource={data}
  xName='x'
  yName='y'
  type='Line'
  marker={{
    visible: true,
    dataLabel: { visible: true, position: 'Top' }
  }}
/>

Pattern 5: Custom Tooltips

模式5：自定义提示框

Enhance user experience with formatted tooltip templates:

jsx

<ChartComponent tooltip={{ enable: true, template: '<div>${point.x}: ${point.y}</div>' }}>

通过格式化提示框模板提升用户体验：

jsx

<ChartComponent tooltip={{ enable: true, template: '<div>${point.x}: ${point.y}</div>' }}>

Pattern 6: Responsive Design

模式6：响应式设计

Use container styling to make charts responsive:

jsx

<ChartComponent id='charts' width='100%' height='400px'>
  {/* chart content */}
</ChartComponent>

使用容器样式使图表具备响应式：

jsx

<ChartComponent id='charts' width='100%' height='400px'>
  {/* 图表内容 */}
</ChartComponent>

Key Props Reference

关键属性参考

ChartComponent

Prop	Type	Purpose	When to Use
`id`	string	Unique identifier	Required for each chart
`width`	string	Chart width (px or %)	Control layout sizing
`height`	string	Chart height	Set explicit dimensions
`title`	string	Chart title	Display main heading
`tooltip`	object	Tooltip configuration	Interactive data inspection
`primaryXAxis`	object	Primary X-axis config	Define horizontal axis
`primaryYAxis`	object	Primary Y-axis config	Define vertical axis

属性	类型	用途	使用场景
`id`	string	唯一标识符	每个图表必填
`width`	string	图表宽度（px或%）	控制布局尺寸
`height`	string	图表高度	设置明确的尺寸
`title`	string	图表标题	显示主标题
`tooltip`	object	提示框配置	交互式数据查看
`primaryXAxis`	object	主X轴配置	定义水平轴
`primaryYAxis`	object	主Y轴配置	定义垂直轴

SeriesDirective

Prop	Type	Purpose	When to Use
`dataSource`	array \| DataManager	Data source	Bind local array or remote DataManager
`xName`	string	X-axis property	Map data field to X
`yName`	string	Y-axis property	Map data field to Y
`type`	string	Chart type	Select visualization type
`fill`	string	Series color	Customize series color
`marker`	object	Marker + data label config	Show point markers and/or data labels ( `marker.dataLabel` )
`name`	string	Series name	Display in legend
`query`	Query	DataManager query	Filter/sort/paginate remote data

属性	类型	用途	使用场景
`dataSource`	array \| DataManager	数据源	绑定本地数组或远程DataManager
`xName`	string	X轴属性	将数据字段映射到X轴
`yName`	string	Y轴属性	将数据字段映射到Y轴
`type`	string	图表类型	选择可视化类型
`fill`	string	系列颜色	自定义系列颜色
`marker`	object	标记点+数据标签配置	显示点标记和/或数据标签（ `marker.dataLabel` ）
`name`	string	系列名称	在图例中显示
`query`	Query	DataManager查询	对远程数据进行过滤/排序/分页

Common Use Cases

常见使用场景

Sales Dashboard: Combine column chart for revenue with line series for trends
Time Series Analysis: Use date-time axis with line chart for temporal data
Comparative Analysis: Multi-series column charts comparing categories
Financial Analysis: Candlestick chart with moving average indicators
Distribution Analysis: Histogram or box-whisker charts for statistical data
Real-time Monitoring: Use
```
addPoint
```
/
```
removePoint
```
for live feeds with smooth animation
Remote Data from REST API: Bind
```
DataManager
```
with
```
WebApiAdaptor
```
or
```
ODataAdaptor
```
directly to series
Server-side OData: Use
```
ODataV4Adaptor
```
with a
```
Query
```
to filter and paginate at the server

销售仪表板：将用于展示收入的列图与用于展示趋势的折线系列结合
时间序列分析：使用日期时间轴和折线图处理时间相关数据
对比分析：多系列列图对比不同类别
财务分析：带移动平均线指标的K线图
分布分析：直方图或箱线图用于统计数据
实时监控：使用
```
addPoint
```
/
```
removePoint
```
处理实时数据流并添加流畅动画
来自REST API的远程数据：直接将
```
DataManager
```
与
```
WebApiAdaptor
```
或
```
ODataAdaptor
```
绑定到系列
服务器端OData：使用
```
ODataV4Adaptor
```
和
```
Query
```
在服务器端进行过滤和分页

Next Steps

下一步

Choose the reference that matches your current need:

Need API details? → API Reference
Starting out? → Getting Started
Choosing chart type? → Chart Types
Configuring axes? → Axes and Customization
Binding data? → Series and Data
Styling appearance? → Appearance and Styling
Adding interactions? → User Interactions
Advanced features? → Advanced Features

选择符合你当前需求的参考文档：

需要API细节？ → API参考
刚入门？ → 快速入门
选择图表类型？ → 图表类型
配置坐标轴？ → 坐标轴与自定义
绑定数据？ → 系列与数据
样式定制？ → 外观与样式
添加交互？ → 用户交互
高级功能？ → 高级功能

External Resources

外部资源

Official API Documentation: https://ej2.syncfusion.com/react/documentation/api/chart/
Live Demos: https://ej2.syncfusion.com/react/demos/
GitHub Repository: https://github.com/syncfusion/ej2-react-ui-components

官方API文档： https://ej2.syncfusion.com/react/documentation/api/chart/
在线演示： https://ej2.syncfusion.com/react/demos/
GitHub仓库： https://github.com/syncfusion/ej2-react-ui-components