syncfusion-angular-stock-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Stock Chart

实现股票图表

The Stock Chart component is a specialized visualization for displaying financial data over time, including OHLC (Open, High, Low, Close) data, technical indicators, and interactive range selection. Perfect for stock market analysis, cryptocurrency tracking, and any time-series financial data visualization.

Stock Chart组件是一款专门用于展示时序金融数据的可视化组件，支持OHLC（开盘价、最高价、最低价、收盘价）数据、技术指标以及交互式范围选择。非常适用于股票市场分析、加密货币追踪以及任何时序金融数据的可视化场景。

When to Use This Skill

何时使用此技能

Financial Data Visualization: Display stock prices, cryptocurrency prices, or forex data over time
OHLC Charts: Render candlestick, bar, or line data for price movements
Technical Analysis: Add moving averages, Bollinger Bands, RSI, MACD, and other indicators
Date Range Selection: Allow users to select specific time periods with range or period selectors
Interactive Exploration: Implement crosshairs, tooltips, and dynamic series switching
Real-time Updates: Handle live data feeds with automatic chart updates
Export & Sharing: Generate PNG, SVG, PDF exports or print charts
Multi-series Analysis: Compare multiple financial instruments on the same chart

金融数据可视化：展示股票价格、加密货币价格或外汇的时序数据
OHLC图表：渲染K线、柱状或折线形式的价格走势数据
技术分析：添加移动平均线（MA）、布林带（BB）、相对强弱指数（RSI）、指数平滑异同移动平均线（MACD）等指标
日期范围选择：允许用户通过范围或周期选择器指定特定时间段
交互式探索：实现十字光标、工具提示和动态系列切换功能
实时更新：处理实时数据源并自动更新图表
导出与分享：生成PNG、SVG、PDF格式的导出文件或打印图表
多系列分析：在同一图表中对比多种金融工具

Component Overview

组件概述

Stock Chart is built on Syncfusion's Chart component with specialized features:

7 Series Types: Line, Spline, Area, HiLo, HiLoOpenClose, Hollow Candle, Candle
Technical Indicators: MA, BB, RSI, MACD, Stochastic, and more
Interactive Controls: Range selector, period selector, crosshair, tooltips
DateTime Axes: Automatically handles dates, supports zooming and panning
Export Ready: PNG, SVG, PDF, and print capabilities
Standalone Architecture: Works with Angular 19+ standalone components

Stock Chart基于Syncfusion的Chart组件构建，具备以下专属特性：

7种系列类型：Line、Spline、Area、HiLo、HiLoOpenClose、Hollow Candle、Candle
技术指标：MA、BB、RSI、MACD、Stochastic等
交互控件：范围选择器、周期选择器、十字光标、工具提示
时间轴：自动处理日期数据，支持缩放和平移
导出就绪：支持PNG、SVG、PDF导出及打印功能
独立架构：兼容Angular 19+独立组件

Documentation and Navigation Guide

文档与导航指南

API Reference

API参考

📄 Read: references/api-reference.md

📄 阅读：references/api-reference.md

Getting Started & Setup

入门与设置

📄 Read: references/getting-started.md

Installing @syncfusion/ej2-angular-charts package
Initial module imports and providers
Creating your first stock chart
Binding data from JSON, API, or DataManager
Verifying the setup works

📄 阅读：references/getting-started.md

安装@syncfusion/ej2-angular-charts包
初始模块导入与配置
创建首个股票图表
绑定JSON、API或DataManager数据源
验证设置是否生效

Series Configuration

系列配置

📄 Read: references/series-types.md

Understanding 7 series types (Candle, HiLo, Line, Area, etc.)
When to use each series type for different data
Configuring series properties and colors
Switching between series types dynamically
Multi-series charts

📄 阅读：references/series-types.md

了解7种系列类型（Candle、HiLo、Line、Area等）
不同数据场景下的系列类型选择
配置系列属性与颜色
动态切换系列类型
多系列图表

Axis Customization

轴自定义

📄 Read: references/axis-customization.md

DateTime axis for time-series data
Numeric and logarithmic axes
Axis labels, titles, and ranges
Crosshair and tooltip configuration
Range zooming and panning

📄 阅读：references/axis-customization.md

用于时序数据的时间轴
数值轴与对数轴
轴标签、标题与范围设置
十字光标与工具提示配置
范围缩放与平移

Legend and Styling

图例与样式

📄 Read: references/legend.md

Enabling and positioning legends
Legend alignment and sizing
Custom icon shapes
Toggling series visibility
Legend interaction patterns

📄 阅读：references/legend.md

启用与定位图例
图例对齐与尺寸设置
自定义图标形状
切换系列可见性
图例交互模式

Interactive Features

交互功能

📄 Read: references/interactive-features.md

Range selector (select date ranges)
Period selector (1M, 3M, 6M, 1Y shortcuts)
Data labels and formatting
Tooltip customization
Crosshair display and interaction
Events and user actions

📄 阅读：references/interactive-features.md

范围选择器（选择日期范围）
周期选择器（1M、3M、6M、1Y快捷选项）
数据标签与格式化
工具提示自定义
十字光标显示与交互
事件与用户操作

Technical Indicators

技术指标

📄 Read: references/technical-indicators.md

Adding technical indicators (MA, BB, RSI, MACD, etc.)
Indicator calculation parameters
Multiple indicators on same chart
Customizing indicator colors and style
Removing or toggling indicators

📄 阅读：references/technical-indicators.md

添加技术指标（MA、BB、RSI、MACD等）
指标计算参数设置
在同一图表中添加多个指标
自定义指标颜色与样式
删除或切换指标

Export and Print

导出与打印

📄 Read: references/export-print.md

Exporting chart as PNG, SVG, PDF
Print preview functionality
Saving exported files
Batch exporting multiple charts

📄 阅读：references/export-print.md

将图表导出为PNG、SVG、PDF格式
打印预览功能
保存导出文件
批量导出多个图表

Advanced Features & Optimization

高级特性与优化

📄 Read: references/advanced-features.md

Live data updates and real-time refresh
Accessibility (WCAG, ARIA, keyboard navigation)
Internationalization and localization
Trend lines and annotations
Performance optimization for large datasets

📄 阅读：references/advanced-features.md

实时数据更新与自动刷新
无障碍访问（WCAG、ARIA、键盘导航）
国际化与本地化
趋势线与注释
大数据集的性能优化

Quick Start

快速开始

Minimal Stock Chart Setup

极简股票图表设置

typescript

import { Component, ViewEncapsulation } from '@angular/core';
import { ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [ChartAllModule, StockChartAllModule],
    standalone: true,
    selector: 'app-stock-chart',
    template: `
        <ejs-stockchart id='stockchart-container' [dataSource]='data'>
            <e-stockchart-series-collection>
                <e-stockchart-series [dataSource]='data' type='Candle' 
                    xName='x' high='high' low='low' 
                    open='open' close='close'>
                </e-stockchart-series>
            </e-stockchart-series-collection>
        </ejs-stockchart>
    `,
    encapsulation: ViewEncapsulation.None
})
export class StockChartComponent {
    data: any[] = [
        { x: new Date(2023, 0, 1), open: 100, high: 105, low: 95, close: 102 },
        { x: new Date(2023, 0, 2), open: 102, high: 108, low: 100, close: 105 },
        { x: new Date(2023, 0, 3), open: 105, high: 110, low: 103, close: 108 }
    ];
}

typescript

import { Component, ViewEncapsulation } from '@angular/core';
import { ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [ChartAllModule, StockChartAllModule],
    standalone: true,
    selector: 'app-stock-chart',
    template: `
        <ejs-stockchart id='stockchart-container' [dataSource]='data'>
            <e-stockchart-series-collection>
                <e-stockchart-series [dataSource]='data' type='Candle' 
                    xName='x' high='high' low='low' 
                    open='open' close='close'>
                </e-stockchart-series>
            </e-stockchart-series-collection>
        </ejs-stockchart>
    `,
    encapsulation: ViewEncapsulation.None
})
export class StockChartComponent {
    data: any[] = [
        { x: new Date(2023, 0, 1), open: 100, high: 105, low: 95, close: 102 },
        { x: new Date(2023, 0, 2), open: 102, high: 108, low: 100, close: 105 },
        { x: new Date(2023, 0, 3), open: 105, high: 110, low: 103, close: 108 }
    ];
}

Common Patterns

常见模式

Pattern 1: Candlestick Chart with DateTime Axis

模式1：带时间轴的K线图

Render OHLC data as candlesticks with automatic date formatting on the x-axis.

typescript

<ejs-stockchart>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='date' 
            high='high' low='low' open='open' close='close'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

When: Displaying stock OHLC data, analyzing price patterns
Why: Candlesticks show open/close relationship at a glance

将OHLC数据渲染为K线图，自动格式化X轴日期。

typescript

<ejs-stockchart>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='date' 
            high='high' low='low' open='open' close='close'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

适用场景：展示股票OHLC数据、分析价格形态
优势：K线图可直观展示开盘价与收盘价的关系

Pattern 2: Multiple Series with Range Selector

模式2：带范围选择器的多系列图表

Compare different indicators or instruments with date range selection.

typescript

<ejs-stockchart [rangeSelector]='{ periods: [{text: "1M", interval: 1, intervalType: "Months"}, 
    {text: "1Y", interval: 1, intervalType: "Years"}] }'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle'></e-stockchart-series>
        <e-stockchart-series type='Line'></e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

When: Users need to view different time windows, analyzing trends
Why: Rapid period switching improves exploration efficiency

对比不同指标或金融工具，支持日期范围选择。

typescript

<ejs-stockchart [rangeSelector]='{ periods: [{text: "1M", interval: 1, intervalType: "Months"}, 
    {text: "1Y", interval: 1, intervalType: "Years"}] }'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle'></e-stockchart-series>
        <e-stockchart-series type='Line'></e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

适用场景：用户需要查看不同时间窗口、分析趋势
优势：快速切换周期提升探索效率

Pattern 3: Add Technical Indicator

模式3：添加技术指标

Display a moving average overlay on price data.

typescript

<ejs-stockchart>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle'></e-stockchart-series>
    </e-stockchart-series-collection>
    <e-indicators>
        <e-indicator type='Sma' field='close' period='14' seriesName='SMA'></e-indicator>
    </e-indicators>
</ejs-stockchart>

When: Adding moving averages, RSI, or other technical analysis
Why: Indicators help identify trends and signals

在价格数据上叠加移动平均线。

typescript

<ejs-stockchart>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle'></e-stockchart-series>
    </e-stockchart-series-collection>
    <e-indicators>
        <e-indicator type='Sma' field='close' period='14' seriesName='SMA'></e-indicator>
    </e-indicators>
</ejs-stockchart>

适用场景：添加移动平均线、RSI或其他技术分析指标
优势：指标有助于识别趋势与信号

Pattern 4: Interactive Crosshair and Tooltip

模式4：交互式十字光标与工具提示

Enable detailed value inspection on hover.

typescript

<ejs-stockchart [crosshair]='{ enable: true, lineType: "Vertical" }' 
    [tooltip]='{ enable: true }'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle'></e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

When: Users need precise value inspection
Why: Reduces cognitive load, enables data discovery

悬停时启用详细数值查看功能。

typescript

<ejs-stockchart [crosshair]='{ enable: true, lineType: "Vertical" }' 
    [tooltip]='{ enable: true }'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle'></e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

适用场景：用户需要精确查看数值
优势：降低认知负荷，助力数据发现

Key Props

核心属性

Series Configuration

系列配置

```
type
```
: Series rendering type (Candle, Line, Area, HiLo, etc.)
```
xName
```
: Data field for x-axis (dates)
```
high
```
,
```
low
```
,
```
open
```
,
```
close
```
: OHLC data fields
```
dataSource
```
: Array of data points or DataManager

```
type
```
：系列渲染类型（Candle、Line、Area、HiLo等）
```
xName
```
：X轴数据字段（日期）
```
high
```
、
```
low
```
、
```
open
```
、
```
close
```
：OHLC数据字段
```
dataSource
```
：数据点数组或DataManager

Chart Display

图表显示

```
height
```
,
```
width
```
: Chart dimensions
```
title
```
: Chart title
```
legendSettings
```
: Legend positioning and appearance
```
tooltip
```
: Value display on hover
```
crosshair
```
: Crosshair display and behavior

```
height
```
、
```
width
```
：图表尺寸
```
title
```
：图表标题
```
legendSettings
```
：图例定位与外观
```
tooltip
```
：悬停时的数值显示
```
crosshair
```
：十字光标显示与行为

Interactive Features

交互功能

```
rangeSelector
```
: Date range selection buttons
```
periodSelector
```
: Quick period buttons (1M, 1Y, etc.)
```
zoomSettings
```
: Chart zooming configuration
```
chartArea
```
: Chart drawing area dimensions

```
rangeSelector
```
：日期范围选择按钮
```
periodSelector
```
：快速周期按钮（1M、1Y等）
```
zoomSettings
```
：图表缩放配置
```
chartArea
```
：图表绘图区域尺寸

Axis Configuration

轴配置

```
primaryXAxis
```
: X-axis (typically date/time)
```
primaryYAxis
```
: Y-axis (price values)
```
secondaryYAxis
```
: Optional secondary Y-axis for indicators

```
primaryXAxis
```
：X轴（通常为日期/时间）
```
primaryYAxis
```
：Y轴（价格数值）
```
secondaryYAxis
```
：可选的指标专用副Y轴

Common Use Cases

常见用例

Use Case 1: Stock Analysis Dashboard

用例1：股票分析仪表盘

Display multiple stocks side-by-side with range selector for comparing performance over different periods. Technical indicators (MA, RSI) help identify trend strength.

并排展示多只股票，通过范围选择器对比不同周期的表现。技术指标（MA、RSI）助力识别趋势强度。

Use Case 2: Real-time Cryptocurrency Tracker

用例2：实时加密货币追踪

Update chart data every few seconds as new price candles form. Live range selector updates to include latest data. Tooltip shows real-time bid/ask spread.

每隔几秒更新图表数据，展示最新价格K线。实时范围选择器自动包含最新数据，工具提示显示实时买卖价差。

Use Case 3: Historical Data Analysis

用例3：历史数据分析

Load complete historical dataset (months/years). Zoom/pan allows detailed inspection of specific periods. Export functionality lets users save analysis.

加载完整历史数据集（数月/数年）。缩放/平移功能可详细查看特定周期，导出功能支持用户保存分析结果。

Use Case 4: Multi-indicator Technical Analysis

用例4：多指标技术分析

Overlay multiple technical indicators on same price chart. Independent axes for different value ranges. Toggle indicators on/off via legend interaction.

在同一价格图表上叠加多个技术指标，为不同数值范围配置独立坐标轴，通过图例交互切换指标的显示/隐藏。