syncfusion-react-stock-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion React Stock Charts

实现Syncfusion React股票图表

The Stock Chart component is a specialized financial chart for visualizing stock price movements over time. It provides essential features for financial data analysis including candlestick/OHLC visualization, period selectors for quick date range navigation, range selectors for precise data filtering, technical indicators, and interactive tools like tooltips and crosshair.

Stock Chart组件是一款专门用于可视化股票价格随时间变化的金融图表。它为金融数据分析提供了核心功能，包括K线/OHLC可视化、用于快速日期范围导航的周期选择器、用于精确数据筛选的范围选择器、技术指标，以及工具提示和十字线等交互式工具。

When to Use This Skill

何时使用该组件

Use this skill when you need to:

Visualize financial/stock data - Display stock prices, trading volumes, market movements
Display OHLC data - Show Open, High, Low, Close values with candlestick or Hilo charts
Implement period navigation - Add quick time range buttons (1D, 5D, 1M, 6M, YTD, 1Y, ALL)
Enable range selection - Allow users to select specific date ranges with thumb navigation
Add technical analysis - Include technical indicators (SMA, EMA, RSI, MACD, etc.)
Show stock events - Visualize earnings, dividends, splits, or other market events
Create financial dashboards - Build comprehensive stock analysis interfaces
Display time-series data - Any datetime-based financial or trading data

当你需要以下功能时，可使用该组件：

可视化金融/股票数据 - 展示股票价格、交易量、市场走势
显示OHLC数据 - 用K线图或高低图展示开盘价、最高价、最低价、收盘价
实现周期导航 - 添加快速时间范围按钮（1日、5日、1月、6月、年初至今、1年、全部）
启用范围选择 - 允许用户通过滑块导航选择特定日期范围
添加技术分析 - 包含技术指标（SMA、EMA、RSI、MACD等）
展示股票事件 - 可视化收益、分红、拆股或其他市场事件
创建金融仪表盘 - 构建全面的股票分析界面
显示时间序列数据 - 任何基于日期时间的金融或交易数据

Component Overview

组件概述

Package:

@syncfusion/ej2-react-charts

Component:

StockChartComponent

Key Features:

6 series types (Line, Spline, Hilo, HiloOpenClose, Candle, Hollow Candle)
Built-in period selector for quick date range navigation
Range navigator with thumb controls for precise selection
Technical indicators (20+ types) and
```
indicatorType
```
support
Stock event annotations (
```
stockEvents
```
) and
```
stockEventRender
```
Interactive tooltip, crosshair (trackball), and legend

Selection and interaction:

selectionMode

isMultiSelect

selectedDataIndexes

Zooming and panning (
```
zoomSettings
```
,
```
onZooming
```
)
Export to image/PDF and print capabilities (
```
exportType
```
,
```
Export
```
,
```
Print
```
)
Persistence and RTL support (
```
enablePersistence
```
,
```
enableRtl
```
)
Responsive and accessible (WCAG, ARIA, keyboard navigation)

包：

@syncfusion/ej2-react-charts

组件：

StockChartComponent

核心功能：

6种系列类型（折线图、样条线图、高低图、OHLC图、K线图、空心K线图）
内置周期选择器，用于快速日期范围导航
带滑块控件的范围导航器，用于精确选择
技术指标（20+种类型）和
```
indicatorType
```
支持
股票事件标注（
```
stockEvents
```
）和
```
stockEventRender
```
事件
交互式工具提示、十字线（追踪球）和图例

选择与交互：

selectionMode

、

isMultiSelect

、

selectedDataIndexes

缩放和平移（
```
zoomSettings
```
、
```
onZooming
```
）
导出为图片/PDF和打印功能（
```
exportType
```
、
```
Export
```
、
```
Print
```
）
状态持久化和RTL支持（
```
enablePersistence
```
、
```
enableRtl
```
）
响应式设计与可访问性（WCAG、ARIA、键盘导航）

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Read this first for initial setup:

Installing @syncfusion/ej2-react-charts package
Project setup with Vite or create-react-app
Basic StockChartComponent implementation
Module injection pattern (Inject services)
Creating first chart with sample data
Understanding data structure (x, open, high, low, close, volume)
Adding chart title and basic configuration

📄 阅读： references/getting-started.md

首次设置请先阅读本指南：

安装@syncfusion/ej2-react-charts包
使用Vite或create-react-app搭建项目
基础StockChartComponent实现
模块注入模式（注入服务）
使用示例数据创建第一个图表
理解数据结构（x、open、high、low、close、volume）
添加图表标题和基础配置

Axis Types and Configuration

轴类型与配置

📄 Read: references/configuration.md

For configuring and customizing axes:

DateTime Axis - Date/time based x-axis (most common for stock charts)
DateTimeCategory Axis - Business days only (excludes weekends/holidays)
Logarithmic Axis - Logarithmic scale for wide value ranges
Numeric Axis - Standard numeric axis for y-values
Axis title, labels, and formatting
Grid lines and tick customization
Multiple Y-axes for different data scales
Axis ranges and padding settings

📄 阅读： references/configuration.md

用于配置和自定义坐标轴：

日期时间轴 - 基于日期/时间的X轴（股票图表最常用）
日期时间分类轴 - 仅显示工作日（排除周末/节假日）
对数轴 - 适用于数值范围较大的场景
数值轴 - 标准数值轴，用于Y轴数值
轴标题、标签和格式化
网格线和刻度自定义
多Y轴支持，适配不同数据尺度
轴范围和内边距设置

Series Types and Visualization

系列类型与可视化

📄 Read: references/series-types.md

For choosing and configuring chart series:

Line series - Continuous price lines
Spline series - Smooth curves
Hilo series - High-low range bars
HiloOpenClose series - OHLC bars
Candle series - Traditional candlesticks (default for stock charts)
Hollow Candle series - Filled/hollow based on price movement
Bear/Bull fill colors for candlesticks
Series dropdown navigation and type switching
Module injection for each series type
When to use each type

📄 阅读： references/series-types.md

用于选择和配置图表系列：

折线系列 - 连续价格线
样条线系列 - 平滑曲线
高低系列 - 高低范围柱
OHLC系列 - OHLC柱
K线系列 - 传统K线图（股票图表默认类型）
空心K线系列 - 根据价格走势填充/空心显示
K线图的熊市/牛市填充颜色
系列下拉导航与类型切换
各系列类型的模块注入
各类型的适用场景

Period and Range Selectors

周期与范围选择器

📄 Read: references/selectors.md

For implementing time range navigation:

Period Selector: Quick navigation buttons (1D, 5D, 1M, etc.)
- Periods array configuration (interval, text, intervalType)
- IntervalType options (Years, Months, Weeks, Days, Hours, etc.)
- Enabling/disabling period selector
Range Selector: Precise range selection with thumbs
- Thumb navigation and dragging
- Label tapping for range selection
- Date range button integration
- Enabling/disabling range selector

📄 阅读： references/selectors.md

用于实现时间范围导航：

周期选择器： 快速导航按钮（1日、5日、1月等）
- 周期数组配置（interval、text、intervalType）
- IntervalType选项（年、月、周、日、小时等）
- 启用/禁用周期选择器
范围选择器： 精确范围选择滑块
- 滑块导航与拖拽
- 点击标签选择范围
- 日期范围按钮集成
- 启用/禁用范围选择器

Interactive Features and Events

交互功能与事件

📄 Read: references/interactive-features.md

For adding user interaction and visual feedback:

Legend: Display series information
- Position and alignment options (Top, Bottom, Left, Right, Custom)
- Customization (size, shape, colors, icons)
- Legend title and template
- Legend click/render events
Tooltip: Show point data on hover
- Format customization with tokens (${point.x}, ${point.open}, etc.)
- Position control (Auto, Nearest)
- Appearance styling (fill, border, textStyle)
- Shared tooltips for multi-series
- Header and custom formatting
Crosshair: Vertical/horizontal lines for precise value reading
- Crosshair tooltip for axis values on both axes
- Line customization (width, color, dashArray)
- Snap to data for cleaner interactions
- Trackball mode for shared tooltip across series
- Line type (Both, Vertical, Horizontal)
Mouse Events: Comprehensive interaction tracking
- pointClick, pointMove for data point interactions
- stockChartMouseMove, stockChartMouseClick, etc.
- stockChartMouseLeave for UI cleanup
- Range change events for selector updates

📄 阅读： references/interactive-features.md

用于添加用户交互和视觉反馈：

图例： 展示系列信息
- 位置与对齐选项（顶部、底部、左侧、右侧、自定义）
- 自定义设置（尺寸、形状、颜色、图标）
- 图例标题和模板
- 图例点击/渲染事件
工具提示： 悬停时显示数据点信息
- 使用令牌自定义格式（${point.x}、${point.open}等）
- 位置控制（自动、最近）
- 外观样式（填充色、边框、文本样式）
- 多系列共享工具提示
- 头部和自定义格式化
十字线： 垂直/水平线，用于精确读取数值
- 十字线工具提示，显示双轴的轴数值
- 线条自定义（宽度、颜色、虚线样式）
- 吸附到数据点，优化交互体验
- 追踪球模式，跨系列共享工具提示
- 线条类型（双轴、垂直、水平）
鼠标事件： 全面的交互追踪
- pointClick、pointMove用于数据点交互
- stockChartMouseMove、stockChartMouseClick等
- stockChartMouseLeave用于UI清理
- 范围变化事件，用于选择器更新

Technical Analysis Tools

技术分析工具

📄 Read: references/technical-analysis.md

For financial analysis features:

Stock Events: Annotate significant market events
- Event types (Flag, Circle, Square, Triangle, etc.)
- Event markers with customizable colors and shapes
- Event descriptions and tooltips
- Events for specific series targeting
- stockEventRender event for custom styling
- Event visibility control
Technical Indicators: Add analysis overlays
- 10+ indicator types:
  - Moving averages: SMA, EMA, TMA
  - Momentum: RSI, MACD, Stochastic, Momentum
  - Volume: Accumulation Distribution, ATR
  - Advanced: Bollinger Bands
- Indicator configuration and styling
- Multiple indicators on one chart
- Field selection (Open, High, Low, Close)
- Period and standard deviation customization
Trend Lines: Draw trend analysis lines
- 6 trendline types: Linear, Exponential, Logarithmic, Polynomial, Power, MovingAverage
- Line configuration (start/end points, series binding)
- Styling and customization (color, width, dashArray)
- Multiple trend lines per series
- Polynomial order customization
- Moving average period configuration

📄 阅读： references/technical-analysis.md

用于金融分析功能：

股票事件： 标注重要市场事件
- 事件类型（旗帜、圆形、方形、三角形等）
- 可自定义颜色和形状的事件标记
- 事件描述和工具提示
- 针对特定系列的事件
- stockEventRender事件，用于自定义样式
- 事件可见性控制
技术指标： 添加分析叠加层
- 10+种指标类型：
  - 移动平均线：SMA、EMA、TMA
  - 动量指标：RSI、MACD、随机指标、动量指标
  - 成交量指标：累积分布指标、ATR
  - 高级指标：布林带
- 指标配置与样式
- 单图表多指标
- 字段选择（开盘价、最高价、最低价、收盘价）
- 周期和标准差自定义
趋势线： 绘制趋势分析线
- 6种趋势线类型：线性、指数、对数、多项式、幂函数、移动平均线
- 线条配置（起始/结束点、系列绑定）
- 样式和自定义（颜色、宽度、虚线样式）
- 单系列多趋势线
- 多项式阶数自定义
- 移动平均线周期配置

Tooltip, Crosshair, and Axis Configuration

工具提示、十字线与轴配置

📄 Read: references/interactive-features.md and references/configuration.md

For tooltip and crosshair setup:

Tooltip Configuration: Point hover information
- Enable/disable with
```
enable
```
  property
- Format strings for OHLC data display
- Background color and border styling
- Text style customization
- Position modes (Auto, Nearest)
Crosshair Lines: Precise value reading
- Enable crosshair with
```
enable: true
```
- Line type: Both, Vertical, or Horizontal
- Line customization (width, color, dashArray)
- Snap to data point alignment
- Crosshair line styling
Axis Tooltips: Display axis values
- Enable on primaryXAxis via
```
crosshairTooltip
```
- Enable on primaryYAxis via
```
crosshairTooltip
```
- Fill color and text style customization
- Format axis value display

📄 阅读： references/interactive-features.md 和 references/configuration.md

用于工具提示和十字线设置：

工具提示配置： 点悬停信息
- 通过
```
enable
```
  属性启用/禁用
- OHLC数据显示的格式字符串
- 背景色和边框样式
- 文本样式自定义
- 位置模式（自动、最近）
十字线： 精确数值读取
- 通过
```
enable: true
```
  启用十字线
- 线条类型：双轴、垂直或水平
- 线条自定义（宽度、颜色、虚线样式）
- 吸附到数据点对齐
- 十字线样式设置
轴工具提示： 显示轴数值
- 在primaryXAxis上通过
```
crosshairTooltip
```
  启用
- 在primaryYAxis上通过
```
crosshairTooltip
```
  启用
- 填充色和文本样式自定义
- 轴数值显示格式化

Chart Configuration and Styling

图表配置与样式

📄 Read: references/configuration.md

For customizing chart appearance and behavior:

Axes Configuration: Setup X and Y axes
- Axis types: DateTime (default), DateTimeCategory, Logarithmic, Numeric
- Label formatting and intervals
- Multiple axes support with
```
axes
```
  array
- Axis ranges, padding, and grid lines
- Major/minor tick and grid customization
Chart Dimensions: Control size
- Width and height properties (pixels or percentage)
- Responsive sizing strategies
- Container-based sizing
Appearance: Theme and styling
- Built-in themes (Material, Fabric, Bootstrap, HighContrast, etc.)
- Background and border customization
- Chart area styling
- Margin and padding configuration
- Title and title styling
Gradient Fills: Advanced styling
- Linear gradients (x1, y1, x2, y2 stops)
- Radial gradients (cx, cy, r stops)
- Gradient for series fill
- SVG gradient definitions

📄 阅读： references/configuration.md

用于自定义图表外观和行为：

轴配置： 设置X轴和Y轴
- 轴类型：日期时间轴（默认）、日期时间分类轴、对数轴、数值轴
- 标签格式化和间隔
- 通过
```
axes
```
  数组支持多轴
- 轴范围、内边距和网格线
- 主次刻度和网格自定义
图表尺寸： 控制大小
- 宽度和高度属性（像素或百分比）
- 响应式尺寸策略
- 基于容器的尺寸设置
外观： 主题和样式
- 内置主题（Material、Fabric、Bootstrap、HighContrast等）
- 背景和边框自定义
- 图表区域样式
- 边距和内边距配置
- 标题和标题样式
渐变填充： 高级样式
- 线性渐变（x1、y1、x2、y2停止点）
- 径向渐变（cx、cy、r停止点）
- 系列填充渐变
- SVG渐变定义

Export, Print, and Accessibility

导出、打印与可访问性

📄 Read: references/utilities.md

For export functionality and accessibility:

Export: Save charts as files
- Export as PNG, JPEG, SVG
- Export as PDF
- Configuration options
Print: Print chart directly
- Print method and options
Accessibility: WCAG compliance
- Keyboard navigation
- ARIA attributes
- Screen reader support
- Accessible color schemes

📄 阅读： references/utilities.md

用于导出功能和可访问性：

导出： 将图表保存为文件
- 导出为PNG、JPEG、SVG
- 导出为PDF
- 配置选项
打印： 直接打印图表
- 打印方法和选项
可访问性： WCAG合规
- 键盘导航
- ARIA属性
- 屏幕阅读器支持
- 无障碍配色方案

Quick Start

快速开始

Basic Stock Chart

基础股票图表

typescript

import { StockChartComponent, StockChartSeriesCollectionDirective, 
         StockChartSeriesDirective, Inject, DateTime, Tooltip, 
         RangeTooltip, Crosshair, LineSeries, SplineSeries, 
         CandleSeries, HiloOpenCloseSeries, HiloSeries, 
         RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import * as React from 'react';

function App() {
  const data = [
    { x: new Date('2012-04-02'), open: 85.97, high: 90.58, low: 85.97, close: 90.58, volume: 660187068 },
    { x: new Date('2012-04-09'), open: 89.02, high: 92.50, low: 88.50, close: 92.90, volume: 490033264 },
    { x: new Date('2012-04-16'), open: 92.52, high: 93.00, low: 88.50, close: 92.52, volume: 450167016 },
    // ... more data
  ];

  return (
    <StockChartComponent
      id='stockchart'
      title='AAPL Stock Price'
      primaryXAxis={{ valueType: 'DateTime' }}
    >
      <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, 
                         SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, 
                         RangeAreaSeries, Trendlines]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={data} 
          type='Candle'
          xName='x'
          high='high' 
          low='low' 
          open='open' 
          close='close'
          volume='volume'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

export default App;

typescript

import { StockChartComponent, StockChartSeriesCollectionDirective, 
         StockChartSeriesDirective, Inject, DateTime, Tooltip, 
         RangeTooltip, Crosshair, LineSeries, SplineSeries, 
         CandleSeries, HiloOpenCloseSeries, HiloSeries, 
         RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import * as React from 'react';

function App() {
  const data = [
    { x: new Date('2012-04-02'), open: 85.97, high: 90.58, low: 85.97, close: 90.58, volume: 660187068 },
    { x: new Date('2012-04-09'), open: 89.02, high: 92.50, low: 88.50, close: 92.90, volume: 490033264 },
    { x: new Date('2012-04-16'), open: 92.52, high: 93.00, low: 88.50, close: 92.52, volume: 450167016 },
    // ... 更多数据
  ];

  return (
    <StockChartComponent
      id='stockchart'
      title='AAPL Stock Price'
      primaryXAxis={{ valueType: 'DateTime' }}
    >
      <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, 
                         SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, 
                         RangeAreaSeries, Trendlines]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={data} 
          type='Candle'
          xName='x'
          high='high' 
          low='low' 
          open='open' 
          close='close'
          volume='volume'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

export default App;

Stock Chart with Period Selector

带周期选择器的股票图表

typescript

import { StockChartComponent, StockChartSeriesCollectionDirective, 
         StockChartSeriesDirective, Inject, DateTime, Tooltip, 
         RangeTooltip, Crosshair, CandleSeries } from '@syncfusion/ej2-react-charts';

function App() {
  const data = [ /* stock data */ ];
  
  const periods = [
    { intervalType: 'Days', interval: 1, text: '1D' },
    { intervalType: 'Days', interval: 5, text: '5D' },
    { intervalType: 'Months', interval: 1, text: '1M' },
    { intervalType: 'Months', interval: 3, text: '3M' },
    { intervalType: 'Months', interval: 6, text: '6M' },
    { intervalType: 'Years', interval: 1, text: '1Y' },
    { text: 'All' }
  ];

  return (
    <StockChartComponent
      id='stockchart'
      title='Stock Analysis'
      primaryXAxis={{ valueType: 'DateTime' }}
      periods={periods}
      enablePeriodSelector={true}
    >
      <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, CandleSeries]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={data} 
          type='Candle'
          xName='x'
          high='high' 
          low='low' 
          open='open' 
          close='close'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

typescript

import { StockChartComponent, StockChartSeriesCollectionDirective, 
         StockChartSeriesDirective, Inject, DateTime, Tooltip, 
         RangeTooltip, Crosshair, CandleSeries } from '@syncfusion/ej2-react-charts';

function App() {
  const data = [ /* 股票数据 */ ];
  
  const periods = [
    { intervalType: 'Days', interval: 1, text: '1D' },
    { intervalType: 'Days', interval: 5, text: '5D' },
    { intervalType: 'Months', interval: 1, text: '1M' },
    { intervalType: 'Months', interval: 3, text: '3M' },
    { intervalType: 'Months', interval: 6, text: '6M' },
    { intervalType: 'Years', interval: 1, text: '1Y' },
    { text: 'All' }
  ];

  return (
    <StockChartComponent
      id='stockchart'
      title='Stock Analysis'
      primaryXAxis={{ valueType: 'DateTime' }}
      periods={periods}
      enablePeriodSelector={true}
    >
      <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, CandleSeries]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={data} 
          type='Candle'
          xName='x'
          high='high' 
          low='low' 
          open='open' 
          close='close'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

CSS Styling for Stock Chart

股票图表的CSS样式

For the Stock Chart period selector UI to work properly, you need to include the required CSS stylesheets in your HTML file. Add the following

<link>

tags to the

<head>

section of your

index.html

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Syncfusion Tailwind CSS for Stock Chart styling -->
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" />
    
    <!-- Bootstrap CSS for additional styling support -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    
    <title>Stock Chart App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Key CSS Stylesheets:

Syncfusion Tailwind CSS (
```
tailwind3.css
```
) - Required for Stock Chart components
- Version: 33.1.44 (update to match your Syncfusion version)
- Provides styling for period selector buttons, range navigator, tooltips, and other UI elements
- CDN URL:
```
https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css
```
Bootstrap CSS - Optional but recommended for additional styling support
- Version: 3.3.7
- Provides base styling and layout utilities
- CDN URL:
```
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
```

Important Notes:

Ensure the Syncfusion CSS version matches your
```
@syncfusion/ej2-react-charts
```
package version
If you're using a different theme (Material, Bootstrap, Fabric, HighContrast), use the corresponding CSS file from Syncfusion CDN
Place these stylesheets before other custom stylesheets to allow proper CSS cascade and overrides
Without these stylesheets, the period selector buttons, tooltips, and other UI elements may not render correctly

Alternative CSS URLs by Theme:

Material:

https://cdn.syncfusion.com/ej2/33.1.44/material.css

Bootstrap:

https://cdn.syncfusion.com/ej2/33.1.44/bootstrap.css

Fabric:

https://cdn.syncfusion.com/ej2/33.1.44/fabric.css

Tailwind:

https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css

HighContrast:

https://cdn.syncfusion.com/ej2/33.1.44/highcontrast.css

为了让股票图表的周期选择器UI正常工作，你需要在HTML文件中引入所需的CSS样式表。在

index.html

的

<head>

部分添加以下

<link>

标签：

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Syncfusion Tailwind CSS 用于股票图表样式 -->
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" />
    
    <!-- Bootstrap CSS 用于额外样式支持 -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    
    <title>Stock Chart App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

核心CSS样式表：

Syncfusion Tailwind CSS (
```
tailwind3.css
```
) - 股票图表组件必需
- 版本：33.1.44（请更新为与你的Syncfusion版本匹配）
- 为周期选择器按钮、范围导航器、工具提示和其他UI元素提供样式
- CDN地址：
```
https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css
```
Bootstrap CSS - 可选但推荐用于额外样式支持
- 版本：3.3.7
- 提供基础样式和布局工具
- CDN地址：
```
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
```

重要注意事项：

确保Syncfusion CSS版本与你的
```
@syncfusion/ej2-react-charts
```
包版本一致
如果你使用其他主题（Material、Bootstrap、Fabric、HighContrast），请使用Syncfusion CDN中对应的CSS文件
将这些样式表放在其他自定义样式表之前，以确保正确的CSS层叠和覆盖
如果没有这些样式表，周期选择器按钮、工具提示和其他UI元素可能无法正确渲染

按主题分类的替代CSS地址：

Material:

https://cdn.syncfusion.com/ej2/33.1.44/material.css

Bootstrap:

https://cdn.syncfusion.com/ej2/33.1.44/bootstrap.css

Fabric:

https://cdn.syncfusion.com/ej2/33.1.44/fabric.css

Tailwind:

https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css

HighContrast:

https://cdn.syncfusion.com/ej2/33.1.44/highcontrast.css

Axis Types Reference

轴类型参考

Stock Chart supports multiple axis types for different data scenarios:

股票图表支持多种轴类型，适配不同数据场景：

DateTime Axis (Default)

日期时间轴（默认）

Use for date-based stock data:

typescript

primaryXAxis={{ 
  valueType: 'DateTime',
  majorGridLines: { width: 0 },
  majorTickLines: { color: 'transparent' }
}}

Best for: Stock price data with dates Inject:

DateTime

module

用于基于日期的股票数据：

typescript

primaryXAxis={{ 
  valueType: 'DateTime',
  majorGridLines: { width: 0 },
  majorTickLines: { color: 'transparent' }
}}

最适合： 带日期的股票价格数据 注入：

DateTime

模块

DateTimeCategory Axis

日期时间分类轴

Displays only business days (excludes weekends/holidays):

typescript

primaryXAxis={{ 
  valueType: 'DateTimeCategory',
  majorGridLines: { width: 0 }
}}

Best for: Business day-only trading data Inject:

DateTimeCategory

module Note: Requires

DateTimeCategory

module import and injection

仅显示工作日（排除周末/节假日）：

typescript

primaryXAxis={{ 
  valueType: 'DateTimeCategory',
  majorGridLines: { width: 0 }
}}

最适合： 仅包含工作日的交易数据 注入：

DateTimeCategory

模块 注意： 需要导入并注入

DateTimeCategory

模块

Logarithmic Axis

对数轴

For Y-axis with logarithmic scale (useful for wide value ranges):

typescript

primaryYAxis={{
  valueType: 'Logarithmic',
  labelFormat: '${value}'
}}

Best for: Data spanning multiple orders of magnitude Inject:

Logarithmic

module Note: Cannot contain zero or negative values

用于Y轴的对数刻度（适用于数值范围较大的场景）：

typescript

primaryYAxis={{
  valueType: 'Logarithmic',
  labelFormat: '${value}'
}}

最适合： 跨越多个数量级的数据 注入：

Logarithmic

模块 注意： 不能包含零或负值

Numeric Axis (Y-axis default)

数值轴（Y轴默认）

Standard linear numeric scale:

typescript

primaryYAxis={{
  valueType: 'Double',
  labelFormat: '${value}',
  minimum: 0,
  maximum: 500,
  interval: 50
}}

Best for: Price values and general Y-axis No module injection required - This is the default

标准线性数值刻度：

typescript

primaryYAxis={{
  valueType: 'Double',
  labelFormat: '${value}',
  minimum: 0,
  maximum: 500,
  interval: 50
}}

最适合： 价格数值和通用Y轴 无需模块注入 - 这是默认设置

Multi-Axis Configuration

多轴配置

Use multiple Y-axes for different scales:

typescript

<StockChartComponent
  primaryXAxis={{ valueType: 'DateTime' }}
  primaryYAxis={{ title: 'Price', labelFormat: '${value}' }}
>
  {/* Additional axes using StockChartAxesDirective */}
  <StockChartAxesDirective>
    <StockChartAxisDirective
      name='volumeAxis'
      opposedPosition={true}
      title='Volume'
      labelFormat='{value}M'
    />
  </StockChartAxesDirective>
  
  {/* Series bind to respective axes */}
  <StockChartSeriesCollectionDirective>
    <StockChartSeriesDirective type='Candle' yAxisName='primaryYAxis' />
    <StockChartSeriesDirective type='Column' yAxisName='volumeAxis' />
  </StockChartSeriesCollectionDirective>
</StockChartComponent>

使用多个Y轴适配不同尺度：

typescript

<StockChartComponent
  primaryXAxis={{ valueType: 'DateTime' }}
  primaryYAxis={{ title: 'Price', labelFormat: '${value}' }}
>
  {/* 使用StockChartAxesDirective添加额外轴 */}
  <StockChartAxesDirective>
    <StockChartAxisDirective
      name='volumeAxis'
      opposedPosition={true}
      title='Volume'
      labelFormat='{value}M'
    />
  </StockChartAxesDirective>
  
  {/* 系列绑定到对应轴 */}
  <StockChartSeriesCollectionDirective>
    <StockChartSeriesDirective type='Candle' yAxisName='primaryYAxis' />
    <StockChartSeriesDirective type='Column' yAxisName='volumeAxis' />
  </StockChartSeriesCollectionDirective>
</StockChartComponent>

Common Patterns

常见模式

Pattern 1: Financial Dashboard with Multiple Features

模式1：包含多种功能的金融仪表盘

typescript

import { StockChartComponent, StockChartSeriesCollectionDirective, 
         StockChartSeriesDirective, Inject, DateTime, Tooltip, 
         RangeTooltip, Crosshair, CandleSeries, StockLegend, 
         Export, Print } from '@syncfusion/ej2-react-charts';

function FinancialDashboard() {
  const handlePointClick = (args) => {
    console.log(`Point clicked: ${args.x}, Value: ${args.y}`);
  };

  const handleMouseMove = (args) => {
    console.log('Mouse moved over chart');
  };

  const handleRangeChange = (args) => {
    console.log(`Range changed: ${args.start} to ${args.end}`);
  };

  return (
    <StockChartComponent
      id='stockchart'
      title='Comprehensive Stock Analysis'
      primaryXAxis={{ valueType: 'DateTime' }}
      tooltip={{ enable: true, shared: true }}
      crosshair={{ enable: true }}
      legendSettings={{ visible: true }}
      enablePeriodSelector={true}
      enableSelector={true}
      pointClick={handlePointClick}
      stockChartMouseMove={handleMouseMove}
      rangeChange={handleRangeChange}
    >
      <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, 
                         CandleSeries, StockLegend, Export, Print]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Candle'
          name='Apple Inc'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

typescript

import { StockChartComponent, StockChartSeriesCollectionDirective, 
         StockChartSeriesDirective, Inject, DateTime, Tooltip, 
         RangeTooltip, Crosshair, CandleSeries, StockLegend, 
         Export, Print } from '@syncfusion/ej2-react-charts';

function FinancialDashboard() {
  const handlePointClick = (args) => {
    console.log(`Point clicked: ${args.x}, Value: ${args.y}`);
  };

  const handleMouseMove = (args) => {
    console.log('Mouse moved over chart');
  };

  const handleRangeChange = (args) => {
    console.log(`Range changed: ${args.start} to ${args.end}`);
  };

  return (
    <StockChartComponent
      id='stockchart'
      title='Comprehensive Stock Analysis'
      primaryXAxis={{ valueType: 'DateTime' }}
      tooltip={{ enable: true, shared: true }}
      crosshair={{ enable: true }}
      legendSettings={{ visible: true }}
      enablePeriodSelector={true}
      enableSelector={true}
      pointClick={handlePointClick}
      stockChartMouseMove={handleMouseMove}
      rangeChange={handleRangeChange}
    >
      <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, 
                         CandleSeries, StockLegend, Export, Print]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Candle'
          name='Apple Inc'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

Pattern 2: Candlestick with Bear/Bull Colors and Animation

模式2：带熊市/牛市颜色和动画的K线图

typescript

function StyledCandleChart() {
  const stockData = [ /* stock data with open, high, low, close */ ];

  return (
    <StockChartComponent
      id='stockchart'
      primaryXAxis={{ valueType: 'DateTime' }}
      primaryYAxis={{ labelFormat: '${value}' }}
    >
      <Inject services={[DateTime, CandleSeries, Tooltip, RangeTooltip]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Candle'
          xName='x'
          open='open'
          high='high'
          low='low'
          close='close'
          bearFillColor='#ef5350'      // Red for downtrend
          bullFillColor='#26a69a'      // Green for uptrend
          animation={{ enable: true, duration: 500 }}
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

typescript

function StyledCandleChart() {
  const stockData = [ /* 包含开盘价、最高价、最低价、收盘价的股票数据 */ ];

  return (
    <StockChartComponent
      id='stockchart'
      primaryXAxis={{ valueType: 'DateTime' }}
      primaryYAxis={{ labelFormat: '${value}' }}
    >
      <Inject services={[DateTime, CandleSeries, Tooltip, RangeTooltip]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Candle'
          xName='x'
          open='open'
          high='high'
          low='low'
          close='close'
          bearFillColor='#ef5350'      // 下跌趋势用红色
          bullFillColor='#26a69a'      // 上涨趋势用绿色
          animation={{ enable: true, duration: 500 }}
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

Pattern 3: Technical Analysis Chart

模式3：技术分析图表

typescript

function TechnicalAnalysisChart() {
  const indicators = [
    {
      type: 'Sma',
      field: 'Close',
      period: 14,
      fill: 'blue'
    },
    {
      type: 'BollingerBands',
      field: 'Close',
      period: 20,
      standardDeviation: 2,
      upperLine: { color: '#ff0000', width: 1 },
      lowerLine: { color: '#ff0000', width: 1 }
    }
  ];

  return (
    <StockChartComponent
      id='stockchart'
      primaryXAxis={{ valueType: 'DateTime' }}
      indicators={indicators}
    >
      <Inject services={[DateTime, CandleSeries, Tooltip, 
                         LineSeries, RangeTooltip, SmaIndicator, BollingerBands]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Candle'
        />
      </StockChartSeriesCollectionDirective>
      <StockChartIndicatorsDirective>
        {/* Indicators can also be added here via directives */}
      </StockChartIndicatorsDirective>
    </StockChartComponent>
  );
}

typescript

function TechnicalAnalysisChart() {
  const indicators = [
    {
      type: 'Sma',
      field: 'Close',
      period: 14,
      fill: 'blue'
    },
    {
      type: 'BollingerBands',
      field: 'Close',
      period: 20,
      standardDeviation: 2,
      upperLine: { color: '#ff0000', width: 1 },
      lowerLine: { color: '#ff0000', width: 1 }
    }
  ];

  return (
    <StockChartComponent
      id='stockchart'
      primaryXAxis={{ valueType: 'DateTime' }}
      indicators={indicators}
    >
      <Inject services={[DateTime, CandleSeries, Tooltip, 
                         LineSeries, RangeTooltip, SmaIndicator, BollingerBands]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Candle'
        />
      </StockChartSeriesCollectionDirective>
      <StockChartIndicatorsDirective>
        {/* 也可以通过指令在此处添加指标 */}
      </StockChartIndicatorsDirective>
    </StockChartComponent>
  );
}

Pattern 4: Crosshair with Axis Tooltips

模式4：带轴工具提示的十字线

typescript

function CrosshairChart() {
  return (
    <StockChartComponent
      id='stockchart'
      primaryXAxis={{ 
        valueType: 'DateTime',
        majorGridLines: { width: 0 },
        majorTickLines: { color: 'transparent' },
        crosshairTooltip: { enable: true }  // X-axis tooltip
      }}
      primaryYAxis={{
        labelFormat: 'n0',
        majorTickLines: { width: 0 },
        crosshairTooltip: { enable: true }  // Y-axis tooltip
      }}
      crosshair={{ 
        enable: true,
        lineType: 'Both',
        line: { width: 1, color: '#0080ff' }
      }}
      tooltip={{ enable: true }}
    >
      <Inject services={[DateTime, CandleSeries, Crosshair, Tooltip, RangeTooltip]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Candle'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

typescript

function CrosshairChart() {
  return (
    <StockChartComponent
      id='stockchart'
      primaryXAxis={{ 
        valueType: 'DateTime',
        majorGridLines: { width: 0 },
        majorTickLines: { color: 'transparent' },
        crosshairTooltip: { enable: true }  // X轴工具提示
      }}
      primaryYAxis={{
        labelFormat: 'n0',
        majorTickLines: { width: 0 },
        crosshairTooltip: { enable: true }  // Y轴工具提示
      }}
      crosshair={{ 
        enable: true,
        lineType: 'Both',
        line: { width: 1, color: '#0080ff' }
      }}
      tooltip={{ enable: true }}
    >
      <Inject services={[DateTime, CandleSeries, Crosshair, Tooltip, RangeTooltip]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Candle'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

Pattern 5: Stock Events Visualization

模式5：股票事件可视化

typescript

function StockEventsChart() {
  const stockEvents = [
    {
      date: new Date('2012-04-01'),
      text: 'Q1 Earnings',
      description: 'Quarterly earnings release',
      type: 'Flag',
      background: '#6c757d'
    },
    {
      date: new Date('2012-07-01'),
      text: 'Dividend',
      description: 'Dividend payout',
      type: 'Circle',
      background: '#28a745'
    }
  ];

  return (
    <StockChartComponent
      id='stockchart'
      primaryXAxis={{ valueType: 'DateTime' }}
      stockEvents={stockEvents}
    >
      <Inject services={[DateTime, SplineSeries, Tooltip]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Spline'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

typescript

function StockEventsChart() {
  const stockEvents = [
    {
      date: new Date('2012-04-01'),
      text: 'Q1 Earnings',
      description: 'Quarterly earnings release',
      type: 'Flag',
      background: '#6c757d'
    },
    {
      date: new Date('2012-07-01'),
      text: 'Dividend',
      description: 'Dividend payout',
      type: 'Circle',
      background: '#28a745'
    }
  ];

  return (
    <StockChartComponent
      id='stockchart'
      primaryXAxis={{ valueType: 'DateTime' }}
      stockEvents={stockEvents}
    >
      <Inject services={[DateTime, SplineSeries, Tooltip]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Spline'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

Pattern 6: Export and Print

模式6：导出与打印

typescript

function ExportableChart() {
  const chartRef = useRef<StockChartComponent>(null);

  const handleExport = (type: string) => {
    if (chartRef.current) {
      chartRef.current.export(type, 'StockChart');
    }
  };

  const handlePrint = () => {
    if (chartRef.current) {
      chartRef.current.print();
    }
  };

  return (
    <div>
      <div>
        <button onClick={() => handleExport('PNG')}>Export PNG</button>
        <button onClick={() => handleExport('JPEG')}>Export JPEG</button>
        <button onClick={() => handleExport('SVG')}>Export SVG</button>
        <button onClick={() => handleExport('PDF')}>Export PDF</button>
        <button onClick={handlePrint}>Print Chart</button>
      </div>
      
      <StockChartComponent
        ref={chartRef}
        id='stockchart'
        primaryXAxis={{ valueType: 'DateTime' }}
        exportType={['PNG', 'JPEG', 'SVG', 'PDF']}
      >
        <Inject services={[DateTime, CandleSeries, Export]} />
        <StockChartSeriesCollectionDirective>
          <StockChartSeriesDirective 
            dataSource={stockData} 
            type='Candle'
          />
        </StockChartSeriesCollectionDirective>
      </StockChartComponent>
    </div>
  );
}

typescript

function ExportableChart() {
  const chartRef = useRef<StockChartComponent>(null);

  const handleExport = (type: string) => {
    if (chartRef.current) {
      chartRef.current.export(type, 'StockChart');
    }
  };

  const handlePrint = () => {
    if (chartRef.current) {
      chartRef.current.print();
    }
  };

  return (
    <div>
      <div>
        <button onClick={() => handleExport('PNG')}>Export PNG</button>
        <button onClick={() => handleExport('JPEG')}>Export JPEG</button>
        <button onClick={() => handleExport('SVG')}>Export SVG</button>
        <button onClick={() => handleExport('PDF')}>Export PDF</button>
        <button onClick={handlePrint}>Print Chart</button>
      </div>
      
      <StockChartComponent
        ref={chartRef}
        id='stockchart'
        primaryXAxis={{ valueType: 'DateTime' }}
        exportType={['PNG', 'JPEG', 'SVG', 'PDF']}
      >
        <Inject services={[DateTime, CandleSeries, Export]} />
        <StockChartSeriesCollectionDirective>
          <StockChartSeriesDirective 
            dataSource={stockData} 
            type='Candle'
          />
        </StockChartSeriesCollectionDirective>
      </StockChartComponent>
    </div>
  );
}

Key Props

核心属性

StockChartComponent

Prop	Type	Description
`primaryXAxis`	Object	X-axis configuration (typically DateTime)
`primaryYAxis`	Object	Y-axis configuration
`axes`	Array	Additional Y-axes for multi-axis scaling
`title`	string	Chart title
`titleStyle`	Object	Title font styling
`periods`	Array	Period selector buttons configuration
`enablePeriodSelector`	boolean	Show/hide period selector (default: true)
`enableSelector`	boolean	Show/hide range selector (default: true)
`enableCustomRange`	boolean	Enable custom date range selection
`tooltip`	Object	Tooltip configuration
`crosshair`	Object	Crosshair configuration
`legendSettings`	Object	Legend configuration
`stockEvents`	Array	Stock event markers
`indicators`	Array	Technical indicators
`height`	string	Chart height
`width`	string	Chart width
`margin`	Object	Chart margin configuration
`chartArea`	Object	Chart area styling
`background`	string	Chart background color
`border`	Object	Chart border configuration
`theme`	string	Chart theme
`zoomSettings`	Object	Zoom and pan configuration
`rows`	Array	Row definitions for multi-row layouts
`selectedDataIndexes`	Array	Programmatically select specific points
`selectionMode`	string	Selection mode (None, Point, Series, Cluster, DragXY, DragX, DragY)
`isMultiSelect`	boolean	Allow multiple data point selection
`exportType`	Array	Export formats (PNG, JPEG, SVG, PDF)
`enablePersistence`	boolean	Persist chart state between page reloads
`enableRtl`	boolean	Enable right-to-left rendering
`locale`	string	Override global culture/localization
`noDataTemplate`	string/Function	Template shown when no data available
`isTransposed`	boolean	Render chart in transposed manner
`seriesType`	Array	Available series types
`indicatorType`	Array	Available technical indicator types
`trendlineType`	Array	Available trendline types
`bearFillColor`	string	Fill color for downtrend (bear) candles
`bullFillColor`	string	Fill color for uptrend (bull) candles
`animation`	Object	Animation settings for series rendering
`pointClick`	Function	Event fired when a data point is clicked
`stockChartMouseMove`	Function	Event fired when mouse moves over chart
`stockChartMouseClick`	Function	Event fired when chart area is clicked
`stockChartMouseDown`	Function	Event fired on mouse down
`stockChartMouseUp`	Function	Event fired on mouse up
`stockChartMouseLeave`	Function	Event fired when cursor leaves chart
`tooltipRender`	Function	Event for customizing tooltip before display
`axisLabelRender`	Function	Event for customizing axis labels before rendering
`seriesRender`	Function	Event fired when series is rendered
`legendClick`	Function	Event fired when legend item is clicked
`legendRender`	Function	Event fired when legend items are rendered
`crosshairLabelRender`	Function	Event fired before crosshair tooltip is rendered
`selectorRender`	Function	Triggered when range selector renders
`onZooming`	Function	Event fired during zoom interactions
`load`	Function	Lifecycle event fired before chart is loaded
`loaded`	Function	Lifecycle event fired after chart is loaded
`beforeExport`	Function	Event fired before export operation
`stockEventRender`	Function	Customize stock event marker rendering
`rows`	Array	Row definitions for multi-row layouts
`isTransposed`	boolean	Render chart in transposed manner
`trendlines`	Array	Trend line configurations (StockChartTrendlinesDirective)

属性	类型	描述
`primaryXAxis`	Object	X轴配置（通常为日期时间类型）
`primaryYAxis`	Object	Y轴配置
`axes`	Array	额外的Y轴，用于多轴缩放
`title`	string	图表标题
`titleStyle`	Object	标题字体样式
`periods`	Array	周期选择器按钮配置
`enablePeriodSelector`	boolean	显示/隐藏周期选择器（默认：true）
`enableSelector`	boolean	显示/隐藏范围选择器（默认：true）
`enableCustomRange`	boolean	启用自定义日期范围选择
`tooltip`	Object	工具提示配置
`crosshair`	Object	十字线配置
`legendSettings`	Object	图例配置
`stockEvents`	Array	股票事件标记
`indicators`	Array	技术指标
`height`	string	图表高度
`width`	string	图表宽度
`margin`	Object	图表边距配置
`chartArea`	Object	图表区域样式
`background`	string	图表背景色
`border`	Object	图表边框配置
`theme`	string	图表主题
`zoomSettings`	Object	缩放和平移配置
`rows`	Array	多行布局的行定义
`selectedDataIndexes`	Array	以编程方式选择特定数据点
`selectionMode`	string	选择模式（None、Point、Series、Cluster、DragXY、DragX、DragY）
`isMultiSelect`	boolean	允许多个数据点选择
`exportType`	Array	导出格式（PNG、JPEG、SVG、PDF）
`enablePersistence`	boolean	在页面刷新之间保留图表状态
`enableRtl`	boolean	启用从右到左渲染
`locale`	string	覆盖全局文化/本地化设置
`noDataTemplate`	string/Function	无数据时显示的模板
`isTransposed`	boolean	以转置方式渲染图表
`seriesType`	Array	可用的系列类型
`indicatorType`	Array	可用的技术指标类型
`trendlineType`	Array	可用的趋势线类型
`bearFillColor`	string	下跌趋势（熊市）K线的填充色
`bullFillColor`	string	上涨趋势（牛市）K线的填充色
`animation`	Object	系列渲染的动画设置
`pointClick`	Function	数据点被点击时触发的事件
`stockChartMouseMove`	Function	鼠标在图表上移动时触发的事件
`stockChartMouseClick`	Function	图表区域被点击时触发的事件
`stockChartMouseDown`	Function	鼠标按下时触发的事件
`stockChartMouseUp`	Function	鼠标松开时触发的事件
`stockChartMouseLeave`	Function	光标离开图表时触发的事件
`tooltipRender`	Function	工具提示显示前自定义内容的事件
`axisLabelRender`	Function	轴标签渲染前自定义内容的事件
`seriesRender`	Function	系列渲染时触发的事件
`legendClick`	Function	图例项被点击时触发的事件
`legendRender`	Function	图例项渲染时触发的事件
`crosshairLabelRender`	Function	十字线工具提示渲染前触发的事件
`selectorRender`	Function	范围选择器渲染时触发的事件
`onZooming`	Function	缩放交互期间触发的事件
`load`	Function	图表加载前触发的生命周期事件
`loaded`	Function	图表加载后触发的生命周期事件
`beforeExport`	Function	导出操作前触发的事件
`stockEventRender`	Function	自定义股票事件标记渲染的事件
`rows`	Array	多行布局的行定义
`isTransposed`	boolean	以转置方式渲染图表
`trendlines`	Array	趋势线配置（StockChartTrendlinesDirective）

StockChartSeriesDirective

Prop	Type	Description
`dataSource`	Array	Stock data array
`type`	string	Series type (Candle, Line, Spline, Hilo, HiloOpenClose)
`xName`	string	Data field for x-axis (date)
`high`	string	Data field for high values
`low`	string	Data field for low values
`open`	string	Data field for open values
`close`	string	Data field for close values
`volume`	string	Data field for volume values
`name`	string	Series name for legend
`yName`	string	Data field for y-axis values
`yAxisName`	string	Name of Y-axis to bind this series to (for multi-axis)
`bearFillColor`	string	Fill color for downtrend candles/bars
`bullFillColor`	string	Fill color for uptrend candles/bars
`fill`	string	Series color or gradient fill (e.g., 'url(#gradient1)')
`width`	number	Line width for series
`opacity`	number	Opacity of series (0-1)
`border`	Object	Border configuration for series (width, color, dashArray)
`marker`	Object	Data point marker configuration (visible, size, shape, fill, border)
`animation`	Object	Animation settings (enable, duration, delay)
`legendShape`	string	Legend icon shape (Circle, Rectangle, Triangle, Diamond, etc.)
`tooltip`	Object	Series-specific tooltip configuration
`trendlines`	Array	Trend lines for this series
`cornerRadius`	number	Corner radius for rectangular shapes

属性	类型	描述
`dataSource`	Array	股票数据数组
`type`	string	系列类型（Candle、Line、Spline、Hilo、HiloOpenClose）
`xName`	string	X轴的数据字段（日期）
`high`	string	最高价的数据字段
`low`	string	最低价的数据字段
`open`	string	开盘价的数据字段
`close`	string	收盘价的数据字段
`volume`	string	成交量的数据字段
`name`	string	图例中的系列名称
`yName`	string	Y轴的数据字段
`yAxisName`	string	绑定该系列的Y轴名称（用于多轴）
`bearFillColor`	string	下跌趋势K线/柱的填充色
`bullFillColor`	string	上涨趋势K线/柱的填充色
`fill`	string	系列颜色或渐变填充（例如：'url(#gradient1)'）
`width`	number	系列线条宽度
`opacity`	number	系列透明度（0-1）
`border`	Object	系列边框配置（宽度、颜色、虚线样式）
`marker`	Object	数据点标记配置（可见性、尺寸、形状、填充色、边框）
`animation`	Object	动画设置（启用、时长、延迟）
`legendShape`	string	图例图标形状（Circle、Rectangle、Triangle、Diamond等）
`tooltip`	Object	系列专属的工具提示配置
`trendlines`	Array	该系列的趋势线
`cornerRadius`	number	矩形形状的圆角半径

Common Use Cases

常见用例

Stock Trading Platform - Display real-time or historical stock prices with candlestick charts
Financial Analytics Dashboard - Multi-chart layout with technical indicators and events
Portfolio Tracker - Visualize investment performance over time
Market Research Tool - Compare multiple stocks with different series types
Trading Algorithm Backtesting - Visualize strategy results with indicators and trend lines
Economic Data Visualization - Display time-series financial or economic data
Cryptocurrency Charts - Track crypto price movements with OHLC data

股票交易平台 - 用K线图显示实时或历史股票价格
金融分析仪表盘 - 多图表布局，包含技术指标和事件
投资组合追踪器 - 可视化投资随时间的表现
市场研究工具 - 用不同系列类型比较多只股票
交易算法回测 - 用指标和趋势线可视化策略结果
经济数据可视化 - 显示时间序列的金融或经济数据
加密货币图表 - 用OHLC数据追踪加密货币价格走势

Module Injection

模块注入

Stock Chart requires explicit module injection for features:

typescript

import { Inject, DateTime, DateTimeCategory, Logarithmic, 
         Tooltip, RangeTooltip, Crosshair, 
         LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, 
         HiloSeries, RangeAreaSeries, StockLegend, Trendlines, Export } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, 
         MomentumIndicator, SmaIndicator, AtrIndicator, 
         AccumulationDistributionIndicator, MacdIndicator, 
         StochasticIndicator } from '@syncfusion/ej2-react-charts';

<StockChartComponent>
  <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, 
                     CandleSeries, StockLegend, Trendlines, Export,
                     EmaIndicator, SmaIndicator, BollingerBands]} />
</StockChartComponent>

Common modules:

Axes:

DateTime - DateTime axis (required for stock charts)
DateTimeCategory - DateTime category axis for business days only
Logarithmic - Logarithmic scale axis

UI Features:

Tooltip - Hover tooltips for data points
RangeTooltip - Range selector tooltips
Crosshair - Crosshair lines with axis tooltips
StockLegend - Legend display for series

Series Types:

LineSeries, SplineSeries - Line charts
CandleSeries - Traditional candlestick chart
HiloOpenCloseSeries - OHLC bars
HiloSeries - High-Low bars
RangeAreaSeries - Range area visualization

Technical Analysis:

Trendlines - Trend line visualization (Linear, Exponential, Logarithmic, Polynomial, Power, Moving Average)
EmaIndicator, SmaIndicator, TmaIndicator - Moving average indicators
RsiIndicator, BollingerBands, MacdIndicator - Advanced indicators
StochasticIndicator, MomentumIndicator, AtrIndicator - Momentum indicators
AccumulationDistributionIndicator - Volume-based indicator

Export:

Export - Export to PNG, JPEG, SVG, PDF

股票图表需要显式注入模块以启用功能：

typescript

import { Inject, DateTime, DateTimeCategory, Logarithmic, 
         Tooltip, RangeTooltip, Crosshair, 
         LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, 
         HiloSeries, RangeAreaSeries, StockLegend, Trendlines, Export } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, 
         MomentumIndicator, SmaIndicator, AtrIndicator, 
         AccumulationDistributionIndicator, MacdIndicator, 
         StochasticIndicator } from '@syncfusion/ej2-react-charts';

<StockChartComponent>
  <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, 
                     CandleSeries, StockLegend, Trendlines, Export,
                     EmaIndicator, SmaIndicator, BollingerBands]} />
</StockChartComponent>

常见模块：

轴模块：

DateTime - 日期时间轴（股票图表必需）
DateTimeCategory - 仅包含工作日的日期时间分类轴
Logarithmic - 对数刻度轴

UI功能模块：

Tooltip - 数据点悬停工具提示
RangeTooltip - 范围选择器工具提示
Crosshair - 带轴工具提示的十字线
StockLegend - 系列图例显示

系列类型模块：

LineSeries, SplineSeries - 折线图
CandleSeries - 传统K线图
HiloOpenCloseSeries - OHLC柱图
HiloSeries - 高低柱图
RangeAreaSeries - 范围区域可视化

技术分析模块：

Trendlines - 趋势线可视化（线性、指数、对数、多项式、幂函数、移动平均线）
EmaIndicator, SmaIndicator, TmaIndicator - 移动平均线指标
RsiIndicator, BollingerBands, MacdIndicator - 高级指标
StochasticIndicator, MomentumIndicator, AtrIndicator - 动量指标
AccumulationDistributionIndicator - 成交量指标

导出模块：

Export - 导出为PNG、JPEG、SVG、PDF

Event Handling

事件处理

Stock Chart provides comprehensive event support for tracking user interactions and building custom behaviors:

股票图表提供全面的事件支持，用于追踪用户交互和构建自定义行为：

Data Point Events

数据点事件

typescript

// Point click event
const handlePointClick = (args) => {
  console.log('Point clicked:', args.pointIndex, args.seriesIndex);
  console.log('X:', args.x, 'Y:', args.y);
};

// Point move event (hover)
const handlePointMove = (args) => {
  console.log('Hovering over point:', args.x);
};

<StockChartComponent
  pointClick={handlePointClick}
  pointMove={handlePointMove}
>
  {/* ... */}
</StockChartComponent>

typescript

// 点点击事件
const handlePointClick = (args) => {
  console.log('Point clicked:', args.pointIndex, args.seriesIndex);
  console.log('X:', args.x, 'Y:', args.y);
};

// 点移动事件（悬停）
const handlePointMove = (args) => {
  console.log('Hovering over point:', args.x);
};

<StockChartComponent
  pointClick={handlePointClick}
  pointMove={handlePointMove}
>
  {/* ... */}
</StockChartComponent>

Mouse Events

鼠标事件

typescript

// Various mouse tracking events
const handleMouseMove = (args) => {
  console.log('Mouse position:', args.x, args.y);
};

const handleMouseLeave = (args) => {
  console.log('Mouse left chart area');
};

const handleMouseClick = (args) => {
  console.log('Chart clicked');
};

<StockChartComponent
  stockChartMouseMove={handleMouseMove}
  stockChartMouseLeave={handleMouseLeave}
  stockChartMouseClick={handleMouseClick}
  stockChartMouseDown={(args) => console.log('Mouse down')}
  stockChartMouseUp={(args) => console.log('Mouse up')}
>
  {/* ... */}
</StockChartComponent>

typescript

// 各种鼠标追踪事件
const handleMouseMove = (args) => {
  console.log('Mouse position:', args.x, args.y);
};

const handleMouseLeave = (args) => {
  console.log('Mouse left chart area');
};

const handleMouseClick = (args) => {
  console.log('Chart clicked');
};

<StockChartComponent
  stockChartMouseMove={handleMouseMove}
  stockChartMouseLeave={handleMouseLeave}
  stockChartMouseClick={handleMouseClick}
  stockChartMouseDown={(args) => console.log('Mouse down')}
  stockChartMouseUp={(args) => console.log('Mouse up')}
>
  {/* ... */}
</StockChartComponent>

Range and Selector Events

范围与选择器事件

typescript

// Range change event (period selector or range selector)
const handleRangeChange = (args) => {
  console.log('Range changed:', args.start, 'to', args.end);
  // Refresh data or update analysis
};

<StockChartComponent
  rangeChange={handleRangeChange}
>
  {/* ... */}
</StockChartComponent>

typescript

// 范围变化事件（周期选择器或范围选择器）
const handleRangeChange = (args) => {
  console.log('Range changed:', args.start, 'to', args.end);
  // 刷新数据或更新分析
};

<StockChartComponent
  rangeChange={handleRangeChange}
>
  {/* ... */}
</StockChartComponent>

Legend Events

图例事件

typescript

// Legend click event
const handleLegendClick = (args) => {
  console.log('Legend item clicked:', args.legendText);
};

// Legend render event (for customization)
const handleLegendRender = (args) => {
  if (args.legendText === 'AAPL') {
    args.fill = '#ff0000'; // Customize legend color
  }
};

<StockChartComponent
  legendClick={handleLegendClick}
  legendRender={handleLegendRender}
>
  {/* ... */}
</StockChartComponent>

typescript

// 图例点击事件
const handleLegendClick = (args) => {
  console.log('Legend item clicked:', args.legendText);
};

// 图例渲染事件（用于自定义）
const handleLegendRender = (args) => {
  if (args.legendText === 'AAPL') {
    args.fill = '#ff0000'; // 自定义图例颜色
  }
};

<StockChartComponent
  legendClick={handleLegendClick}
  legendRender={handleLegendRender}
>
  {/* ... */}
</StockChartComponent>

Tooltip Events

工具提示事件

typescript

// Customize tooltip before rendering
const handleTooltipRender = (args) => {
  args.text = `<b>Stock Price: ${args.text}</b>`;
};

<StockChartComponent
  tooltip={{ enable: true }}
  tooltipRender={handleTooltipRender}
>
  {/* ... */}
</StockChartComponent>

typescript

// 渲染前自定义工具提示
const handleTooltipRender = (args) => {
  args.text = `<b>Stock Price: ${args.text}</b>`;
};

<StockChartComponent
  tooltip={{ enable: true }}
  tooltipRender={handleTooltipRender}
>
  {/* ... */}
</StockChartComponent>

Stock Event Rendering

股票事件渲染事件

typescript

// Customize stock event markers
const handleStockEventRender = (args) => {
  // Customize event styling, position, etc.
  if (args.text === 'Earnings') {
    args.background = '#ff0000'; // Custom color for earnings
  }
};

<StockChartComponent
  stockEvents={stockEvents}
  stockEventRender={handleStockEventRender}
>
  {/* ... */}
</StockChartComponent>

typescript

// 自定义股票事件标记
const handleStockEventRender = (args) => {
  // 自定义事件样式、位置等
  if (args.text === 'Earnings') {
    args.background = '#ff0000'; // 收益事件自定义颜色
  }
};

<StockChartComponent
  stockEvents={stockEvents}
  stockEventRender={handleStockEventRender}
>
  {/* ... */}
</StockChartComponent>

Lifecycle Events

生命周期事件

typescript

// Load event (before rendering)
const handleLoad = (args) => {
  console.log('Chart loading');
};

// Loaded event (after rendering)
const handleLoaded = (args) => {
  console.log('Chart loaded');
};

<StockChartComponent
  load={handleLoad}
  loaded={handleLoaded}
>
  {/* ... */}
</StockChartComponent>

typescript

// 加载事件（渲染前）
const handleLoad = (args) => {
  console.log('Chart loading');
};

// 加载完成事件（渲染后）
const handleLoaded = (args) => {
  console.log('Chart loaded');
};

<StockChartComponent
  load={handleLoad}
  loaded={handleLoaded}
>
  {/* ... */}
</StockChartComponent>

API Reference

API参考

Below is a concise API reference derived from the official Syncfusion

StockChart

API. Include or expand these entries in

references/*

as needed.

Complete API Documentation:

Full Comprehensive API Reference: references/complete-api-reference.md - Master reference with all props, methods, events, directives, and modules
Concise API Summary: references/api.md - Quick reference for commonly used APIs
Official Syncfusion Docs: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default

以下是从官方Syncfusion

StockChart

API中提取的简明API参考。可根据需要在

references/*

中包含或扩展这些条目。

完整API文档：

全面API参考： references/complete-api-reference.md - 包含所有属性、方法、事件、指令和模块的主参考
简明API摘要： references/api.md - 常用API的快速参考
官方Syncfusion文档： https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default

Selected Props (StockChartComponent)

StockChartComponent精选属性

All props with official API links: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel

Data & Series:

```
dataSource
```
(Array | DataManager) — Source data for series (objects with
```
x, open, high, low, close, volume
```
). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#datasource
```
series
```
/
```
StockChartSeriesCollectionDirective
```
— Series definitions and types (Candle, Line, Spline, Hilo, HiloOpenClose). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model

Axes:

```
primaryXAxis
```
(Object) — X axis configuration (typically
```
valueType: 'DateTime'
```
|
```
'DateTimeCategory'
```
|
```
'Numeric'
```
). Supports
```
crosshairTooltip
```
,
```
majorGridLines
```
,
```
majorTickLines
```
. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model
```
primaryYAxis
```
(Object) — Y axis configuration (typically
```
valueType: 'Double'
```
or
```
'Logarithmic'
```
). Supports
```
labelFormat
```
,
```
rangePadding
```
,
```
minorGridLines
```
,
```
crosshairTooltip
```
. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model
```
axes
```
(Array) — Additional Y-axes for multi-series scaling (use
```
StockChartAxesDirective
```
with
```
StockChartAxisDirective
```
). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axes

Navigation & Selectors:

```
periods
```
(Array) — Period selector buttons (objects with
```
intervalType
```
,
```
interval
```
,
```
text
```
). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#periods
```
enablePeriodSelector
```
(boolean) — Toggle period selector visibility (default: true). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enableperiodselector
```
enableSelector
```
(boolean) — Toggle range selector (thumbs) visibility (default: true). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enableselector
```
enableCustomRange
```
(boolean) — Enable custom range selection mode. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablecustomrange

Analysis & Events:

```
indicators
```
(Array) — Technical indicators configuration (SMA, EMA, RSI, MACD, Bollinger, etc.). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel
```
stockEvents
```
(Array) — Stock event markers (date, text, description, type, background). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockEventModel

Interaction & UI:

```
tooltip
```
(Object) — Tooltip settings (
```
enable
```
,
```
format
```
,
```
shared
```
). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTooltipSettingsModel
```
crosshair
```
(Object) — Crosshair settings (
```
enable
```
,
```
lineType
```
). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/crosshairSettingsModel
```
legendSettings
```
(Object) — Legend display and templates. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartLegendSettingsModel

Selection & Appearance:

```
selectedDataIndexes
```
(Array) — Programmatically set selected data points. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selecteddataindexes
```
selectionMode
```
(string) — Selection mode (None, Point, Series). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectionmode
```
isMultiSelect
```
(boolean) — Allow multiple data point selection. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#ismultiselect

Theming & Layout:

```
theme
```
(string) — Chart theme (Material, Bootstrap, Fabric, Tailwind, HighContrast, etc.). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#theme
```
background
```
(string) — Chart background color. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#background
```
border
```
(Object) — Chart border configuration. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartBorderModel
```
chartArea
```
(Object) — Chart area styling. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAreaModel
```
margin
```
(Object) — Chart margin configuration. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockMarginModel
```
title
```
(string) — Chart title. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#title
```
titleStyle
```
(Object) — Title font styling. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartFontModel
```
width
```
,
```
height
```
(string) — Dimensions. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#width

Export & Persistence:

```
exportType
```
(Array) — Export formats available in toolbar ['PNG', 'JPEG', 'SVG', 'PDF']. Set empty array
```
[]
```
to disable export. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#exporttype
```
enablePersistence
```
(boolean) — Persist chart state between page loads. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablepersistence

Series & Analysis:

```
series
```
/
```
StockChartSeriesCollectionDirective
```
— Series collection with StockChartSeriesDirective items. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model
```
indicators
```
/
```
StockChartIndicatorsDirective
```
— Technical indicators collection with StockChartIndicatorDirective items. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel
```
trendlines
```
/
```
StockChartTrendlinesDirective
```
— Trend lines collection with StockChartTrendlineDirective items. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTrendlineModel

Accessibility & RTL:

```
enableRtl
```
(boolean) — Enable right-to-left rendering. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablertl

Zoom & Pan:

```
zoomSettings
```
(Object) — Zoom and pan configuration. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/zoomSettingsModel

所有属性的官方API链接：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel

数据与系列：

```
dataSource
```
(Array | DataManager) — 系列的源数据（包含
```
x, open, high, low, close, volume
```
的对象）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#datasource
```
series
```
/
```
StockChartSeriesCollectionDirective
```
— 系列定义和类型（Candle、Line、Spline、Hilo、HiloOpenClose）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model

轴：

```
primaryXAxis
```
(Object) — X轴配置（通常为
```
valueType: 'DateTime'
```
|
```
'DateTimeCategory'
```
|
```
'Numeric'
```
）。支持
```
crosshairTooltip
```
、
```
majorGridLines
```
、
```
majorTickLines
```
。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model
```
primaryYAxis
```
(Object) — Y轴配置（通常为
```
valueType: 'Double'
```
或
```
'Logarithmic'
```
）。支持
```
labelFormat
```
、
```
rangePadding
```
、
```
minorGridLines
```
、
```
crosshairTooltip
```
。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model
```
axes
```
(Array) — 多系列缩放的额外Y轴（使用
```
StockChartAxesDirective
```
和
```
StockChartAxisDirective
```
）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axes

导航与选择器：

```
periods
```
(Array) — 周期选择器按钮（包含
```
intervalType
```
、
```
interval
```
、
```
text
```
的对象）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#periods
```
enablePeriodSelector
```
(boolean) — 切换周期选择器可见性（默认：true）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enableperiodselector
```
enableSelector
```
(boolean) — 切换范围选择器（滑块）可见性（默认：true）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enableselector
```
enableCustomRange
```
(boolean) — 启用自定义范围选择模式。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablecustomrange

分析与事件：

```
indicators
```
(Array) — 技术指标配置（SMA、EMA、RSI、MACD、布林带等）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel
```
stockEvents
```
(Array) — 股票事件标记（date、text、description、type、background）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockEventModel

交互与UI：

```
tooltip
```
(Object) — 工具提示设置（
```
enable
```
、
```
format
```
、
```
shared
```
）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTooltipSettingsModel
```
crosshair
```
(Object) — 十字线设置（
```
enable
```
、
```
lineType
```
）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/crosshairSettingsModel
```
legendSettings
```
(Object) — 图例显示和模板。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartLegendSettingsModel

选择与外观：

```
selectedDataIndexes
```
(Array) — 以编程方式设置选中的数据点。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selecteddataindexes
```
selectionMode
```
(string) — 选择模式（None、Point、Series）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectionmode
```
isMultiSelect
```
(boolean) — 允许多个数据点选择。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#ismultiselect

主题与布局：

```
theme
```
(string) — 图表主题（Material、Bootstrap、Fabric、Tailwind、HighContrast等）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#theme
```
background
```
(string) — 图表背景色。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#background
```
border
```
(Object) — 图表边框配置。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartBorderModel
```
chartArea
```
(Object) — 图表区域样式。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAreaModel
```
margin
```
(Object) — 图表边距配置。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockMarginModel
```
title
```
(string) — 图表标题。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#title
```
titleStyle
```
(Object) — 标题字体样式。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartFontModel
```
width
```
,
```
height
```
(string) — 尺寸。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#width

导出与持久化：

```
exportType
```
(Array) — 工具栏中可用的导出格式 ['PNG', 'JPEG', 'SVG', 'PDF']。设置空数组
```
[]
```
可禁用导出。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#exporttype
```
enablePersistence
```
(boolean) — 在页面加载之间保留图表状态。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablepersistence

系列与分析：

```
series
```
/
```
StockChartSeriesCollectionDirective
```
— 包含StockChartSeriesDirective项的系列集合。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model
```
indicators
```
/
```
StockChartIndicatorsDirective
```
— 包含StockChartIndicatorDirective项的技术指标集合。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel
```
trendlines
```
/
```
StockChartTrendlinesDirective
```
— 包含StockChartTrendlineDirective项的趋势线集合。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTrendlineModel

可访问性与RTL：

```
enableRtl
```
(boolean) — 启用从右到左渲染。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablertl

缩放与平移：

```
zoomSettings
```
(Object) — 缩放和平移配置。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/zoomSettingsModel

Methods

方法

All methods with official API links: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#methods

```
export(type: string, fileName: string)
```
— Export chart as PNG, JPEG, SVG, or PDF. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#export
```
print()
```
— Print the chart to a printer or PDF. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#print
```
destroy()
```
— Clean up and remove the chart instance. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#destroy
```
getModuleName()
```
— Returns the component module name. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#getmodulename
```
renderPeriodSelector()
```
— Programmatically render the period selector. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#renderperiodselector
```
rangeChanged(start: Date | number, end: Date | number)
```
— Programmatically change the visible range. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechanged

所有方法的官方API链接：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#methods

```
export(type: string, fileName: string)
```
— 将图表导出为PNG、JPEG、SVG或PDF。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#export
```
print()
```
— 将图表打印到打印机或PDF。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#print
```
destroy()
```
— 清理并移除图表实例。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#destroy
```
getModuleName()
```
— 返回组件模块名称。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#getmodulename
```
renderPeriodSelector()
```
— 以编程方式渲染周期选择器。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#renderperiodselector
```
rangeChanged(start: Date | number, end: Date | number)
```
— 以编程方式更改可见范围。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechanged

Events

事件

All events with official API links: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#events

Lifecycle Events:

```
load
```
— Fired before chart is loaded. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#load
```
loaded
```
— Fired after chart is loaded. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#loaded

Data & Rendering Events:

```
axisLabelRender
```
— Customize each axis label before rendering. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axislabelrender
```
seriesRender
```
— Fired when a series is rendered. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#seriesrender
```
beforeExport
```
— Fired before export operation. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#beforeexport

User Interaction Events:

```
pointClick
```
— Fired when a data point is clicked. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointclick
```
pointMove
```
— Fired when mouse moves over a data point. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointmove
```
legendClick
```
— Fired when a legend item is clicked. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendclick
```
legendRender
```
— Fired when legend items are rendered. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendrender

Tooltip & Crosshair Events:

```
tooltipRender
```
— Modify tooltip content before display. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#tooltiprender

Range & Selector Events:

```
rangeChange
```
/
```
onRangeChange
```
— Emitted when the selected range changes. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechange
```
selectorRender
```
— Triggered when range selector renders. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectorrender

Technical Analysis Events:

```
stockEventRender
```
— Customize stock event marker rendering. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockeventrender
```
onZooming
```
— Fired during zoom interactions. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#onzooming

所有事件的官方API链接：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#events

生命周期事件：

```
load
```
— 图表加载前触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#load
```
loaded
```
— 图表加载后触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#loaded

数据与渲染事件：

```
axisLabelRender
```
— 每个轴标签渲染前自定义内容。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axislabelrender
```
seriesRender
```
— 系列渲染时触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#seriesrender
```
beforeExport
```
— 导出操作前触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#beforeexport

用户交互事件：

```
pointClick
```
— 数据点被点击时触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointclick
```
pointMove
```
— 鼠标移动到数据点上时触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointmove
```
legendClick
```
— 图例项被点击时触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendclick
```
legendRender
```
— 图例项渲染时触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendrender

工具提示与十字线事件：

```
tooltipRender
```
— 显示前修改工具提示内容。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#tooltiprender

范围与选择器事件：

```
rangeChange
```
/
```
onRangeChange
```
— 选中范围变化时触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechange
```
selectorRender
```
— 范围选择器渲染时触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectorrender

技术分析事件：

```
stockEventRender
```
— 自定义股票事件标记渲染。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockeventrender
```
onZooming
```
— 缩放交互期间触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#onzooming

Suggested reference files and sections

建议的参考文件和章节

```
references/api.md
```
— Full API surface summary (props, methods, events) with links to official docs.
```
references/configuration.md
```
— Move/expand prop-specific docs (axes, theme, sizing).

references/interactive-features.md

— Add event hooks and examples for

tooltipRender

pointClick

axisLabelRender

references/technical-analysis.md

— Expand

indicators

and

stockEvents

API samples.

```
references/api.md
```
— 完整API表面摘要（属性、方法、事件），带官方文档链接。
```
references/configuration.md
```
— 移动/扩展属性特定文档（轴、主题、尺寸）。

references/interactive-features.md

— 添加

tooltipRender

、

pointClick

、

axisLabelRender

的事件钩子和示例。

references/technical-analysis.md

— 扩展

indicators

和

stockEvents

的API示例。

Minimal API example (props + events)

最小API示例（属性 + 事件）

tsx

<StockChartComponent
  id="stockchart"
  dataSource={data}
  primaryXAxis={{ valueType: 'DateTime' }}
  enablePeriodSelector={true}
  indicators={[{ type: 'Sma', period: 14 }]}
  stockEvents={[{ date: new Date(2023,0,1), text: 'Earnings' }]}
  tooltip={{ enable: true }}
  crosshair={{ enable: true }}
  load={(args) => console.log('loading', args)}
  loaded={(args) => console.log('loaded', args)}
  axisLabelRender={(args) => {/* modify labels */}}
  pointClick={(args) => {/* handle point click */}}
>
  <Inject services={[DateTime, CandleSeries, Tooltip, Crosshair]} />
  <StockChartSeriesCollectionDirective>
    <StockChartSeriesDirective type="Candle" xName="x" open="open" high="high" low="low" close="close" />
  </StockChartSeriesCollectionDirective>
</StockChartComponent>

tsx

<StockChartComponent
  id="stockchart"
  dataSource={data}
  primaryXAxis={{ valueType: 'DateTime' }}
  enablePeriodSelector={true}
  indicators={[{ type: 'Sma', period: 14 }]}
  stockEvents={[{ date: new Date(2023,0,1), text: 'Earnings' }]}
  tooltip={{ enable: true }}
  crosshair={{ enable: true }}
  load={(args) => console.log('loading', args)}
  loaded={(args) => console.log('loaded', args)}
  axisLabelRender={(args) => {/* 修改标签 */}}
  pointClick={(args) => {/* 处理点点击 */}}
>
  <Inject services={[DateTime, CandleSeries, Tooltip, Crosshair]} />
  <StockChartSeriesCollectionDirective>
    <StockChartSeriesDirective type="Candle" xName="x" open="open" high="high" low="low" close="close" />
  </StockChartSeriesCollectionDirective>
</StockChartComponent>