Implementing Stock Chart

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

Component Overview

• 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

Documentation and Navigation Guide

API Reference

Getting Started & Setup

• 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

Series Configuration

• 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

Axis Customization

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

Legend and Styling

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

Interactive Features

• 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

Technical Indicators

• 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

Export and Print

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

Advanced Features & Optimization

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

Quick Start

Minimal Stock Chart Setup

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

<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>

Pattern 2: Multiple Series with Range Selector

<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

<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>

Pattern 4: Interactive Crosshair and Tooltip

<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

Chart Display

• height

  ,

  width

  : Chart dimensions

• title

  : Chart title

• legendSettings

  : Legend positioning and appearance

• tooltip

  : Value display on hover

• crosshair

  : Crosshair display and behavior

Interactive Features

• rangeSelector

  : Date range selection buttons

• periodSelector

  : Quick period buttons (1M, 1Y, etc.)

• zoomSettings

  : Chart zooming configuration

• chartArea

  : Chart drawing area dimensions

Axis Configuration

• primaryXAxis

  : X-axis (typically date/time)

• primaryYAxis

  : Y-axis (price values)

• secondaryYAxis

  : Optional secondary Y-axis for indicators

Common Use Cases

Use Case 1: Stock Analysis Dashboard

Use Case 2: Real-time Cryptocurrency Tracker

Use Case 3: Historical Data Analysis

Use Case 4: Multi-indicator Technical Analysis