Syncfusion Angular Stock Chart

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.

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

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

Documentation and Navigation Guide

API Reference

📄 Read: 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

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

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

Legend and Styling

📄 Read: references/legend.md

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

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

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

Export and Print

📄 Read: references/export-print.md

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

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

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

Render OHLC data as candlesticks with automatic date formatting on the x-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>

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

Pattern 2: Multiple Series with Range Selector

Compare different indicators or instruments with date range selection.

<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

Pattern 3: Add Technical Indicator

Display a moving average overlay on price data.

<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

Pattern 4: Interactive Crosshair and Tooltip

Enable detailed value inspection on hover.

<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

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

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

Use Case 2: Real-time Cryptocurrency Tracker

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.

Use Case 3: Historical Data Analysis

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

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

Advanced Features and Optimization

Learn about live data updates, accessibility, internationalization, annotations, and performance optimization for stock charts.

Table of Contents

• Advanced Features and Optimization
• Live Data Updates
• Live Data with setInterval
• Internationalization (i18n)
• Localized Date Format
• Currency Formatting by Locale
• Stripline

Live Data Updates

Update stock chart with real-time price data from WebSocket or polling API.

Live Data with setInterval

Poll data every few seconds:

import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
import {
  StockChartAllModule,
  StockChartComponent,
  CandleSeriesService,
  DateTimeService,
  TooltipService,
  RangeTooltipService,
} from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-container',
  standalone: true,
  imports: [StockChartAllModule],
  providers: [
    CandleSeriesService,
    DateTimeService,
    TooltipService,
    RangeTooltipService,
  ],
  template: `
      <ejs-stockchart id="chart-container" #chart [primaryXAxis]='primaryXAxis' [periods]='periods' [title]="title">
        <e-stockchart-series-collection>
            <e-stockchart-series 
                [dataSource]='series1' 
                type='Candle' 
                xName='x' 
                high='high' 
                low='low' 
                open='open' 
                close='close' 
                name='India' 
                width=2>
            </e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    `,
})
export class AppComponent implements OnInit, OnDestroy {
  public primaryXAxis: any = { valueType: 'DateTime' };
  public periods: any[] = [];
  public series1: Object[] = [];

  public title: string = 'Live Stock Chart';
  public intervalId: any;
  public date: Date = new Date(2019, 8, 16, 10, 0);

  @ViewChild('chart')
  public stock?: StockChartComponent;

  constructor() {
    // Generate initial 60 minutes of data
    for (let j = 0; j < 60; j++) {
      this.date = new Date(2019, 8, 16, 10, j);
      this.series1.push(this.generateData(this.date));
    }
  }

  ngOnInit() {
    this.periods = [
      { intervalType: 'Minutes', interval: 1, text: '1m' },
      { intervalType: 'Minutes', interval: 30, text: '30m' },
      { intervalType: 'Hours', interval: 1, text: '1H', selected: true },
      { intervalType: 'Hours', interval: 2, text: '2H' },
    ];

    this.intervalId = setInterval(() => {
      const chartElement = document.getElementById('chart-container');

      if (!chartElement) {
        clearInterval(this.intervalId);
      } else {
        this.date = new Date(this.date.getTime() + 60000);
        this.series1.push(this.generateData(this.date));

        if (this.series1.length > 100) this.series1.shift();

        if (this.stock) {
          this.series1.push(this.generateData(this.date));
          (this.stock as any).series[0].dataSource = this.series1;
        }
      }
    }, 3000);
  }
  private generateData(date: Date) {
    return {
      x: date,
      high: Math.floor(Math.random() * (100 - 90 + 1) + 90),
      low: Math.floor(Math.random() * (60 - 50 + 1) + 50),
      open: Math.floor(Math.random() * (85 - 65 + 1) + 65),
      close: Math.floor(Math.random() * (85 - 65 + 1) + 65),
    };
  }

  ngOnDestroy() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  }
}

Internationalization (i18n)

Support multiple languages and locales.

Localized Date Format

<ejs-stockchart 
    locale='fr-FR'
    [primaryXAxis]='{ 
        valueType: "DateTime",
        labelFormat: "dd MMMM yyyy"
    }'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='x' 
            high='high' low='low' open='open' close='close'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

Locale Examples:

• 'en-US': English (United States)
• 'fr-FR': French (France)
• 'de-DE': German (Germany)
• 'ja-JP': Japanese (Japan)
• 'zh-CN': Chinese (Simplified)

Currency Formatting by Locale

@Component({
    template: `
        <select [(ngModel)]="selectedLocale" (change)="onLocaleChange()">
            <option value="en-US">English (USD)</option>
            <option value="fr-FR">French (EUR)</option>
            <option value="ja-JP">Japanese (JPY)</option>
        </select>
        <ejs-stockchart [primaryYAxis]='yAxisConfig'>
            <!-- Series -->
        </ejs-stockchart>
    `
})
export class I18nStockComponent {
    selectedLocale = 'en-US';
    yAxisConfig: any;

    currencySymbols: { [key: string]: string } = {
        'en-US': '$',
        'fr-FR': '€',
        'ja-JP': '¥'
    };

    onLocaleChange() {
        const symbol = this.currencySymbols[this.selectedLocale];
        this.yAxisConfig = {
            labelFormat: `${symbol}{value}.00`
        };
    }
}

Stripline

<ejs-stockchart [primaryXAxis]='primaryXAxis'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='x' 
            high='high' low='low' open='open' close='close'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

this.primaryXAxis = {
           valueType: 'DateTime',
            stripLines: [{ start: 320, sizeType: 'Pixel', size: 1, color: 'green', dashArray: '10,5' },
        { start: 380, sizeType: 'Pixel', size: 1, color: 'red', dashArray: '10,5' }]
};

This implements live updates, accessibility, internationalization, and performance optimization in one component.

Stock Chart API Reference

This document summarizes key properties, methods, and events for the StockChartComponent with direct links to the official Syncfusion Angular API anchors.

• Official API index: https://ej2.syncfusion.com/angular/documentation/api/stock-chart/index-default

Properties (selected)

• annotations — StockChartAnnotationSettingsModel
• axes — [StockChartAxisModel[]](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockchartaxismodel)
• background — string
• border — StockChartBorderModel
• chartArea — StockChartAreaModel
• crosshair — CrosshairSettingsModel (see axis models)
• dataSource — Object | DataManager
• enableCustomRange — boolean
• enablePeriodSelector — boolean
• enablePersistence — boolean
• enableRtl — boolean
• enableSelector — boolean
• exportType — [ExportType[]](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/exporttype)
• height — string
• indicatorType — TechnicalIndicators[]
• indicators — [StockChartIndicatorModel[]](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockchartindicatormodel)
• isMultiSelect — boolean
• isSelect — boolean
• isTransposed — boolean
• legendSettings — StockChartLegendSettingsModel
• locale — string
• mainObject — Element
• margin — StockMarginModel
• noDataTemplate — string | Function
• periods — [PeriodsModel[]](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/periodsmodel)
• primaryXAxis / primaryYAxis — StockChartAxisModel
• rows — [StockChartRowModel[]](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockchartrowmodel)
• selectedDataIndexes — [StockChartIndexesModel[]](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockchartindexesmodel)
• selectionMode — SelectionMode
• series — [StockSeriesModel[]](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockseriesmodel)
• seriesType — ChartSeriesType[]
• stockEvents — [StockEventsSettingsModel[]](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockeventssettingsmodel)
• theme — ChartTheme
• title / titleStyle — string / StockChartFontModel
• tooltip — StockTooltipSettingsModel
• trendlineType — TrendlineTypes[]
• width — string
• zoomSettings — ZoomSettingsModel

Methods (selected)

• chartModuleInjection() — Module injection helper
• destroy() — Destroy method
• getModuleName() — Get component name
• rangeChanged(updatedStart, updatedEnd) — Programmatically change chart range
• renderPeriodSelector() — Render the period selector
• stockChartDataManagerSuccess() — DataManager success handler

Events (selected)

• axisLabelRender — EmitType<IAxisLabelRenderEventArgs>
• beforeExport — IExportEventArgs
• crosshairLabelRender — ICrosshairLabelRenderEventArgs
• legendClick — IStockLegendClickEventArgs
• legendRender — IStockLegendRenderEventArgs
• load / loaded — IStockChartEventArgs
• onZooming — EmitType<IZoomingEventArgs>
• pointClick / pointMove — EmitType<IPointEventArgs>
• rangeChange — IRangeChangeEventArgs
• selectorRender — EmitType<IRangeSelectorRenderEventArgs>
• seriesRender — EmitType<ISeriesRenderEventArgs>
• stockChartMouseClick / stockChartMouseDown / stockChartMouseMove / stockChartMouseUp / stockChartMouseLeave — EmitType<IMouseEventArgs>
• stockEventRender — IStockEventRenderArgs
• tooltipRender — EmitType<ITooltipRenderEventArgs>

Quick Example

See SKILL.md examples in the skill root for setup and usage patterns.

--- Generated from: https://ej2.syncfusion.com/angular/documentation/api/stock-chart/index-default

Axis Customization

Table of Contents

• Overview
• Primary and Secondary Axes
• Primary X-Axis (DateTime)
• Primary Y-Axis (Numeric Price)
• Secondary Y-Axis (Volume, Indicators)
• Axis Types
• DateTime Axis (Recommended for Stock Charts)
• Numeric Axis
• Category Axis
• Logarithmic Axis
• Axis Labels and Formatting
• Custom Label Formatting
• Hiding/Showing Labels
• Label Angle
• Axis Title
• Adding Axis Titles
• Title Positioning
• Axis Ranges and Scaling
• Fixed Range (Manual Scaling)
• Auto Range (Default)
• Interval Configuration
• Crosshair Configuration
• Basic Crosshair
• Crosshair Types
• Crosshair with Tooltip Integration
• Customizing Crosshair Style
• Zooming and Panning
• Enable Zooming
• Range Zooming
• Common Axis Patterns
• Pattern 1: Stock Price Display with Currency
• Pattern 2: DateTime with Monthly Labels
• Pattern 3: Volume with Secondary Axis
• Pattern 4: Logarithmic for Wide Price Ranges

---

Overview

Stock Chart uses axes to map data to pixel coordinates. By default:

• X-Axis (Primary): DateTime axis for dates
• Y-Axis (Primary): Numeric axis for prices
• Y-Axis (Secondary): Optional secondary axis for volume or indicators

---

Primary and Secondary Axes

Primary X-Axis (DateTime)

Stock charts require a DateTime x-axis to properly handle date-based financial data:

<ejs-stockchart [primaryXAxis]='{ 
    valueType: "DateTime", 
    edgelabelPlacement: "Shift" 
}'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='x' high='high' low='low' open='open' close='close'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

Key Properties:

• valueType: 'DateTime' (required for dates)
• edgelabelPlacement: 'Shift' (prevents edge labels from being cut off)
• labelFormat: Custom date format (e.g., 'dd MMM yyyy')

Primary Y-Axis (Numeric Price)

<ejs-stockchart [primaryYAxis]='{ 
    labelFormat: "{value}.00",
    minimum: 0,
    maximum: 200 
}'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='x' high='high' low='low' open='open' close='close'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

Key Properties:

• labelFormat: Number formatting ("${value}", "{value}%", etc.)
• minimum, maximum: Fixed value range
• interval: Spacing between major gridlines

Secondary Y-Axis (Volume, Indicators)

Use a secondary axis for data with different scales (e.g., volume bars alongside price candles):

<ejs-stockchart [primaryYAxis]='{ title: "Price"}'>
 <e-stockchart-axes>
            <e-stockchart-axis title='Volume' labelFormat= "{value}M">
            </e-stockchart-axis>
        </e-stockchart-axes>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='x' high='high' low='low' open='open' close='close'>
        </e-stockchart-series>
        <e-stockchart-series type='Column' xName='x' yName='volume' yAxisName='secondary'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

Use Cases:

• Volume (separate scale, usually in millions)
• Technical indicators (RSI 0-100, MACD values)
• Multiple stocks with different price ranges

---

Axis Types

DateTime Axis (Recommended for Stock Charts)

Automatically handles date spacing, formatting, and zooming for financial data:

[primaryXAxis]='{ 
    valueType: "DateTime",
    intervalType: "Days",
    interval: 1,
    labelFormat: "dd MMM"
}'

Interval Types:

• 'Years': Yearly intervals
• 'Months': Monthly intervals
• 'Days': Daily intervals (default for intraday data)
• 'Hours': Hourly intervals
• 'Minutes': Minute intervals

Label Formats:

• 'dd MMM': "01 Jan"
• 'MMM yyyy': "Jan 2023"
• 'dd MMM yyyy': "01 Jan 2023"
• 'hh:mm:ss': "09:30:00" (for intraday)

Numeric Axis

For non-date x-axis (index-based, sequential):

[primaryXAxis]='{ 
    valueType: "Double"
}'

Category Axis

For text-based categories (rarely used in stock charts):

[primaryXAxis]='{ 
    valueType: "Category"
}'

Logarithmic Axis

For price comparison across wide ranges:

[primaryYAxis]='{ 
    valueType: "Logarithmic",
    logBase: 10
}'

When to Use: Comparing stocks with vastly different prices (e.g., $10 vs $500 stock)

---

Axis Labels and Formatting

Custom Label Formatting

Format Strings:

• {value}: Numeric value
• ${value}: Currency
• {value}%: Percentage
• {value}M: Millions (custom suffix)

[primaryYAxis]='{ 
    labelFormat: "${value}.00"  // $100.00
}'

[primaryXAxis]='{ 
    labelFormat: "dd MMM yyyy"  // 01 Jan 2023
}'

Hiding/Showing Labels

[primaryXAxis]='{ 
    labelStyle: { color: "transparent" }  // Hide labels
}'

Label Angle

[primaryXAxis]='{ 
    labelIntersectAction: "Rotate45"  // Angle when labels overlap
}'

---

Axis Title

Adding Axis Titles

<ejs-stockchart 
    [primaryXAxis]='{ 
        title: "Date"
    }' 
    [primaryYAxis]='{ 
        title: "Price ($)"
    }'>
</ejs-stockchart>

Title Positioning

titleStyle: { 
    textAlignment: 'Far'
}

---

Axis Ranges and Scaling

Fixed Range (Manual Scaling)

<ejs-stockchart [primaryYAxis]='{ 
    minimum: 90,
    maximum: 150,
    interval: 10  // Gridline every 10 units
}'>
</ejs-stockchart>

Use When: You want consistent price range (e.g., comparing multiple stocks or time periods with same scale).

Auto Range (Default)

<ejs-stockchart [primaryYAxis]='{ 
    rangePadding: "Additional"  // Add 5% padding around min/max
}'>
</ejs-stockchart>

rangePadding Options:

• 'Additional': Add 5% above/below min/max (default)
• 'Normal': Add 3% padding
• 'None': Exact min/max from data

Interval Configuration

[primaryYAxis]='{ 
    interval: 25,  // Gridline every 25 units
    majorGridLines: { width: 1, color: "#E0E0E0" },
    minorTicksPerInterval: 4  // 4 minor ticks between majors
}'

---

Crosshair Configuration

Crosshair helps users inspect precise values at any point on the chart:

Basic Crosshair

<ejs-stockchart [crosshair]='{ 
    enable: true,
    lineType: "Vertical",
    line: { width: 1, color: "#FF0000" }
}'>
</ejs-stockchart>

Crosshair Types

[crosshair]='{ 
    lineType: "Vertical"   // Vertical line only
    // OR
    lineType: "Horizontal" // Horizontal line only
    // OR
    lineType: "Both"       // Both vertical and horizontal
}'

Crosshair with Tooltip Integration

<ejs-stockchart 
    [crosshair]='{ enable: true, lineType: "Both" }'
    [tooltip]='{ enable: true }'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='x' high='high' low='low' open='open' close='close'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

User Interaction: Hover over chart → crosshair appears → tooltip shows exact values

Customizing Crosshair Style

[crosshair]='{ 
    enable: true,
    lineType: "Both",
    line: { 
        width: 2, 
        color: "#0099FF",
        dashArray: "5,5"  // Dashed line
    },
    lineStyle: "Dashed"
}'

---

Zooming and Panning

Enable Zooming

<ejs-stockchart [zoomSettings]='{ 
    enableSelectionZooming: true,
    mode: "XY",
    toolbarItems: ["Pan", "Zoom", "Reset"]
}'>
</ejs-stockchart>

Zoom Modes:

• 'X': Zoom horizontally (time axis)
• 'Y': Zoom vertically (price axis)
• 'XY': Zoom both directions

Zoom Interactions:

• Selection Zoom: Drag to select area, zoom into it
• Pan: Drag after zoom to move around
• Reset: Return to original view

Range Zooming

<ejs-stockchart [zoomSettings]='{ 
    enableScrollbar: true,
    enablePan: true
}'>
</ejs-stockchart>

---

Common Axis Patterns

Pattern 1: Stock Price Display with Currency

[primaryYAxis]='{ 
    labelFormat: "${value}.00",
    title: "Price",
    minimum: 0,
    rangePadding: "Additional"
}'

Pattern 2: DateTime with Monthly Labels

[primaryXAxis]='{ 
    valueType: "DateTime",
    intervalType: "Months",
    interval: 1,
    labelFormat: "MMM yyyy"
}'

Pattern 3: Volume with Secondary Axis

[primaryYAxis]='{ 
    title:  "Price ($)"
}' 
[secondaryYAxis]='{ 
    title: "Volume (M)"
}'

Then in series:

<e-stockchart-series type='Column' xName='x' yName='volume' yAxisName='secondary'>
</e-stockchart-series>

Pattern 4: Logarithmic for Wide Price Ranges

[primaryYAxis]='{ 
    valueType: "Logarithmic",
    title: "Price (Log Scale)" 
}'

Use: Comparing $5 stock with $500 stock on same chart

Export and Print

Learn how to export stock charts and print them for reports, analysis, or sharing.

Table of Contents

• Export Formats
• PNG Export
• SVG Export
• Advantages of SVG
• PDF Export
• Print
• User Experience
• Enabling Export & Print
• Disabling Export and Print
• Troubleshooting

Learn how to export stock charts and print them for reports, analysis, or sharing.

Export Formats

Stock Chart supports multiple export formats through the built‑in toolbar:

• PNG: Raster image, good for web and email
• JPEG: Raster image
• SVG: Scalable vector, good for web and editing
• PDF: Professional documents, best for reports
• Print: Direct printing to paper

These export and print options appear automatically in the stock chart’s period‑selector toolbar.

PNG Export

PNG export is available directly from the toolbar.

How to Export PNG: 1. Click the Export dropdown in the chart toolbar. 2. Select PNG. 3. The chart will download as a PNG image.

SVG Export

SVG export is useful for scalable, editable graphics.

How to Export SVG: 1. Open the Export dropdown. 2. Choose SVG. 3. The chart downloads as a vector image.

Advantages of SVG:

• Scalable without quality loss
• Smaller file size for simple visuals
• Editable in Illustrator, Figma, Inkscape
• Ideal for web embedding

PDF Export

PDF export allows you to include charts in reports.

How to Export PDF: 1. Open the Export dropdown. 2. Select PDF. 3. The chart downloads as a PDF document.

Print

The Stock Chart includes a built‑in Print button.

How to Print: 1. Click the Print icon in the toolbar. 2. The browser’s print dialog opens. 3. Choose printer or “Save as PDF”. 4. Print or export the chart.

User Experience: 1. Click "Print" 2. Browser print dialog appears 3. Adjust print settings if needed 4. Print or save the output

Enabling Export & Print

To enable toolbar export and print, the Export module must be injected along with other StockChart modules.

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

@Component({
    imports: [ChartAllModule, StockChartAllModule],
    standalone: true,
    selector: 'app-stock',
    template: `<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-stockchart-series-collection>
            <e-stockchart-series [dataSource]='chartData' type='Candle' xName='date' yName='open' name='India' width=2 ></e-stockchart-series>
        </e-stockchart-series-collection>
    </ejs-stockchart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public crosshair?: Object;
    ngOnInit(): void {
        this.chartData = [
        { 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 }
    ];
        this.title = 'Efficiency of oil-fired power production';
        this.primaryXAxis = {
           valueType: 'DateTime'
        };
    }
}

Disabling Export and Print

To hide the export dropdown in the toolbar:

<ejs-stockchart [exportType]="[]"></ejs-stockchart>

Setting exportType to an empty list disables all export options.

Troubleshooting

Issue: Export button does nothing

• Ensure the chart is fully rendered
• Make sure the Export module is included in your module imports

Issue: Exported image is blank

• Verify that chart data has finished loading
• Ensure the element is visible when exporting

Issue: PDF export creates empty file

• Ensure the chart rendered successfully before exporting

Issue: Print dialog doesn't open

• Browser may require a direct user interaction
• Click on the chart or toolbar first, then press Print

Getting Started with Stock Chart

Learn how to install, set up, and create your first stock chart in an Angular application.

Table of Contents

• Installation
• Step 1 Install the Syncfusion Charts Package
• Alternative Manual NPM Installation
• Step 2 Check Angular Version Compatibility
• Basic Implementation
• Minimal Stock Chart
• Data Binding
• Data Format
• Binding Data from Array
• Binding with DataManager
• Module Injection
• Inject Services
• Stock Chart Series Services
• Range Navigator Services
• Axis Services
• User Interaction Services
• Legend Service
• Technical Indicator Services
• Analysis Services
• Period Selector Service
• Export Service
• Example Full Stock Chart Service Injection
• Interfaces
• Stock Chart Configuration Interfaces
• Stock Chart Axis Interfaces
• Stock Chart Series Interfaces
• Tooltip and Crosshair Interfaces
• Legend Interface
• Technical Indicator Interfaces
• Trendline Interfaces
• Period Selector Interfaces
• Stock Event Interfaces
• Annotation Interfaces
• Range Navigator Configuration Interfaces
• Range Navigator Style Interfaces
• Shared Chart Layout Interfaces
• Stock Chart Lifecycle Event Interfaces
• Stock Chart Series and Point Event Interfaces
• Stock Chart Axis Event Interfaces
• Stock Chart Tooltip Event Interfaces
• Stock Chart Legend Event Interfaces
• Stock Chart Interaction Event Interfaces
• Stock Chart Range Selector Event Interfaces
• Stock Event Render Interface
• Export and Print Event Interfaces
• Range Navigator Event Interfaces
• Example Importing Interfaces
• Verifying Your Setup
• Check 1 Module Imports
• Check 2 Template Structure
• Check 3 Data Format
• Check 4 Visible Chart
• Common Initialization Issues

Installation

Step 1 Install the Syncfusion Charts Package

Use Angular CLI's ng add command to install the package and automatically configure your project:

ng add @syncfusion/ej2-angular-charts

This command:

• Adds @syncfusion/ej2-angular-charts to your package.json
• Installs peer dependencies automatically
• Imports necessary modules in your application
• Configures theme CSS imports

Alternative Manual NPM Installation

If ng add is not available in your environment:

npm install @syncfusion/ej2-angular-charts
npm install @syncfusion/ej2-base @syncfusion/ej2-calendars @syncfusion/ej2-dropdowns

Step 2 Check Angular Version Compatibility

Stock Chart requires:

• Angular 19+: Uses standalone components by default
• Angular 12-18: Uses the legacy NgModule approach

Verify your version:

ng version

Basic Implementation

Minimal Stock Chart

Create a standalone component that imports the chart modules:

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

@Component({
  imports: [ChartAllModule, StockChartAllModule],
  standalone: true,
  selector: 'app-stock',
  template: `<ejs-stockchart id="chart-container"></ejs-stockchart>`,
  encapsulation: ViewEncapsulation.None
})
export class StockChartComponent {}

Add the component selector to your page:

<app-stock></app-stock>

Run your application:

ng serve

The chart renders with default styling and empty data.

Data Binding

Stock Chart needs data in an array of objects with OHLC (Open, High, Low, Close) values and a date field.

Data Format

interface StockData {
  x: Date;
  open: number;
  high: number;
  low: number;
  close: number;
  volume?: number;
}

Binding Data from Array

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

@Component({
  imports: [ChartAllModule, StockChartAllModule],
  standalone: true,
  selector: 'app-stock',
  template: `
    <ejs-stockchart id="chart-container" [dataSource]="chartData">
      <e-stockchart-series-collection>
        <e-stockchart-series
          [dataSource]="chartData"
          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 {
  public chartData = [
    { 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 }
  ];
}

Key Points:

• dataSource can be configured at the chart or series level.
• The series xName property maps the date field.
• OHLC fields such as high, low, open, and close are specified in the series configuration.
• Data should be sorted by date in ascending order.

Tips:

• Parse date strings from APIs to JavaScript Date objects.
• Handle async loading with observables.
• Consider filtering large datasets because 10k+ points may impact performance.

Binding with DataManager

For server-side data operations such as filtering and sorting:

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

@Component({
  imports: [ChartAllModule, StockChartAllModule],
  standalone: true,
  selector: 'app-stock',
  template: `
    <ejs-stockchart
      id="stockChartSpline"
      [enablePeriodSelector]="enable"
      [chartArea]="chartArea"
      [primaryXAxis]="primaryXAxis"
      [primaryYAxis]="primaryYAxis"
      [seriesType]="seriesType"
      [indicatorType]="indicatorType">
      <e-stockchart-series-collection>
        <e-stockchart-series
          [dataSource]="dataManager"
          [query]="query"
          type="Line"
          xName="OrderDate"
          yName="Freight">
        </e-stockchart-series>
      </e-stockchart-series-collection>
    </ejs-stockchart>
  `,
  encapsulation: ViewEncapsulation.None
})
export class StockChartComponent {
  public dataManager: DataManager = new DataManager({
    url: 'https://services.syncfusion.com/angular/production/api/orders'
  });

  public query: Query = new Query().take(50);
  public seriesType: string[] = ['Spline'];
  public indicatorType: string[] = [];
  public enable: boolean = true;

  public chartArea: object = {
    border: { width: 0 }
  };

  public primaryXAxis: object = {
    valueType: 'DateTime',
    crosshairTooltip: { enable: true },
    majorGridLines: { width: 0 }
  };

  public primaryYAxis: object = {
    lineStyle: { width: 0 },
    majorTickLines: { width: 0 }
  };
}

Module Injection

Angular Stock Chart features are modular and require service injection to enable them. This reduces bundle size by loading only the required stock chart series, range navigator series, axis types, indicators, and interactive features.

Stock Chart includes financial charting with range selection behavior, so injectable services can include both Stock Chart and Range Navigator-related services.

Inject Services

import { Component } from '@angular/core';
import {
  StockChartModule,
  LineSeriesService,
  SplineSeriesService,
  AreaSeriesService,
  StepLineSeriesService,
  HiloSeriesService,
  HiloOpenCloseSeriesService,
  CandleSeriesService,
  ColumnSeriesService,
  DateTimeService,
  DateTimeCategoryService,
  CategoryService,
  LogarithmicService,
  TooltipService,
  RangeTooltipService,
  CrosshairService,
  ZoomService,
  StockLegendService,
  SmaIndicatorService,
  EmaIndicatorService,
  TmaIndicatorService,
  AtrIndicatorService,
  AccumulationDistributionIndicatorService,
  BollingerBandsService,
  MacdIndicatorService,
  MomentumIndicatorService,
  RsiIndicatorService,
  StochasticIndicatorService,
  TrendlinesService,
  PeriodSelectorService,
  ExportService
} from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [StockChartModule],
  providers: [
    LineSeriesService,
    SplineSeriesService,
    AreaSeriesService,
    StepLineSeriesService,
    HiloSeriesService,
    HiloOpenCloseSeriesService,
    CandleSeriesService,
    ColumnSeriesService,
    DateTimeService,
    DateTimeCategoryService,
    CategoryService,
    LogarithmicService,
    TooltipService,
    RangeTooltipService,
    CrosshairService,
    ZoomService,
    StockLegendService,
    SmaIndicatorService,
    EmaIndicatorService,
    TmaIndicatorService,
    AtrIndicatorService,
    AccumulationDistributionIndicatorService,
    BollingerBandsService,
    MacdIndicatorService,
    MomentumIndicatorService,
    RsiIndicatorService,
    StochasticIndicatorService,
    TrendlinesService,
    PeriodSelectorService,
    ExportService
  ],
  template: `
    <ejs-stockchart [primaryXAxis]="primaryXAxis">
      <e-stockchart-series-collection>
        <e-stockchart-series
          [dataSource]="data"
          type="Candle"
          xName="date"
          high="high"
          low="low"
          open="open"
          close="close"
          volume="volume"
          name="Stock">
        </e-stockchart-series>
      </e-stockchart-series-collection>
    </ejs-stockchart>
  `
})
export class AppComponent {
  public primaryXAxis: Object = {
    valueType: 'DateTime'
  };

  public data: Object[] = [
    { date: new Date('2024-01-01'), open: 120, high: 125, low: 118, close: 123, volume: 1000 },
    { date: new Date('2024-01-02'), open: 123, high: 128, low: 121, close: 126, volume: 1200 },
    { date: new Date('2024-01-03'), open: 126, high: 130, low: 124, close: 129, volume: 1400 }
  ];
}

Stock Chart Series Services

Range Navigator Services

Axis Services

User Interaction Services

Legend Service

Technical Indicator Services

Analysis Services

Period Selector Service

Export Service

Example Full Stock Chart Service Injection

import { Component } from '@angular/core';
import {
  StockChartModule,
  LineSeriesService,
  SplineSeriesService,
  AreaSeriesService,
  StepLineSeriesService,
  HiloSeriesService,
  HiloOpenCloseSeriesService,
  CandleSeriesService,
  ColumnSeriesService,
  DateTimeService,
  DateTimeCategoryService,
  CategoryService,
  LogarithmicService,
  TooltipService,
  RangeTooltipService,
  CrosshairService,
  ZoomService,
  StockLegendService,
  SmaIndicatorService,
  EmaIndicatorService,
  TmaIndicatorService,
  AtrIndicatorService,
  AccumulationDistributionIndicatorService,
  BollingerBandsService,
  MacdIndicatorService,
  MomentumIndicatorService,
  RsiIndicatorService,
  StochasticIndicatorService,
  TrendlinesService,
  PeriodSelectorService,
  ExportService
} from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [StockChartModule],
  providers: [
    LineSeriesService,
    SplineSeriesService,
    AreaSeriesService,
    StepLineSeriesService,
    HiloSeriesService,
    HiloOpenCloseSeriesService,
    CandleSeriesService,
    ColumnSeriesService,
    DateTimeService,
    DateTimeCategoryService,
    CategoryService,
    LogarithmicService,
    TooltipService,
    RangeTooltipService,
    CrosshairService,
    ZoomService,
    StockLegendService,
    SmaIndicatorService,
    EmaIndicatorService,
    TmaIndicatorService,
    AtrIndicatorService,
    AccumulationDistributionIndicatorService,
    BollingerBandsService,
    MacdIndicatorService,
    MomentumIndicatorService,
    RsiIndicatorService,
    StochasticIndicatorService,
    TrendlinesService,
    PeriodSelectorService,
    ExportService
  ],
  template: `
    <ejs-stockchart>
      <e-stockchart-series-collection>
        <e-stockchart-series
          [dataSource]="data"
          type="Candle"
          xName="date"
          high="high"
          low="low"
          open="open"
          close="close"
          volume="volume"
          name="Stock">
        </e-stockchart-series>
      </e-stockchart-series-collection>
    </ejs-stockchart>
  `
})
export class AppComponent {
  public data: Object[] = [
    { date: new Date('2024-01-01'), open: 120, high: 125, low: 118, close: 123, volume: 1000 },
    { date: new Date('2024-01-02'), open: 123, high: 128, low: 121, close: 126, volume: 1200 },
    { date: new Date('2024-01-03'), open: 126, high: 130, low: 124, close: 129, volume: 1400 }
  ];
}

Interfaces

Angular Stock Chart provides TypeScript interfaces to strongly type stock chart configuration, range navigator configuration, axis settings, series settings, indicators, trendlines, stock events, annotations, tooltips, legends, and event arguments.

Stock Chart Configuration Interfaces

Stock Chart Axis Interfaces

Stock Chart Series Interfaces

Tooltip and Crosshair Interfaces

Legend Interface

Technical Indicator Interfaces

Trendline Interfaces

Period Selector Interfaces

Stock Event Interfaces

Annotation Interfaces

Range Navigator Configuration Interfaces

Range Navigator Style Interfaces

Shared Chart Layout Interfaces

Stock Chart Lifecycle Event Interfaces

Stock Chart Series and Point Event Interfaces

Stock Chart Axis Event Interfaces

Stock Chart Tooltip Event Interfaces

Stock Chart Legend Event Interfaces

Stock Chart Interaction Event Interfaces

Stock Chart Range Selector Event Interfaces

Stock Event Render Interface

Export and Print Event Interfaces

Range Navigator Event Interfaces

Example Importing Interfaces

import {
  StockChartModel,
  StockChartAxisModel,
  StockChartSeriesModel,
  StockChartIndicatorModel,
  StockChartTrendlineModel,
  StockChartPeriodModel,
  StockEventsSettingsModel,
  StockChartAnnotationSettingsModel,
  TooltipSettingsModel,
  CrosshairSettingsModel,
  StockChartLegendSettingsModel,
  RangeNavigatorModel,
  RangeNavigatorSeriesModel,
  IStockChartEventArgs,
  IStockLegendClickEventArgs,
  IStockLegendRenderEventArgs,
  IStockEventRenderArgs,
  IRangeChangeEventArgs,
  IRangeSelectorRenderEventArgs,
  ITooltipRenderEventArgs,
  IAxisLabelRenderEventArgs,
  ISeriesRenderEventArgs,
  IPointEventArgs,
  IMouseEventArgs,
  IExportEventArgs,
  IPrintEventArgs
} from '@syncfusion/ej2-angular-charts';

const primaryXAxis: StockChartAxisModel = {
  valueType: 'DateTime'
};

const tooltip: TooltipSettingsModel = {
  enable: true
};

const crosshair: CrosshairSettingsModel = {
  enable: true
};

const series: StockChartSeriesModel = {
  dataSource: [
    { date: new Date('2024-01-01'), open: 120, high: 125, low: 118, close: 123, volume: 1000 },
    { date: new Date('2024-01-02'), open: 123, high: 128, low: 121, close: 126, volume: 1200 },
    { date: new Date('2024-01-03'), open: 126, high: 130, low: 124, close: 129, volume: 1400 }
  ],
  xName: 'date',
  type: 'Candle',
  high: 'high',
  low: 'low',
  open: 'open',
  close: 'close',
  volume: 'volume',
  name: 'Stock'
};

const indicator: StockChartIndicatorModel = {
  type: 'Sma',
  field: 'Close',
  seriesName: 'Stock'
};

const trendline: StockChartTrendlineModel = {
  type: 'Linear'
};

const period: StockChartPeriodModel = {
  intervalType: 'Months',
  interval: 1,
  text: '1M'
};

const stockEvent: StockEventsSettingsModel = {
  date: new Date('2024-01-02'),
  text: 'E',
  description: 'Stock event',
  type: 'Flag'
};

const annotation: StockChartAnnotationSettingsModel = {
  content: '<div>Annotation</div>',
  coordinateUnits: 'Point',
  x: new Date('2024-01-02'),
  y: 126
};

const legendSettings: StockChartLegendSettingsModel = {
  visible: true,
  position: 'Top'
};

const stockChartOptions: StockChartModel = {
  primaryXAxis,
  tooltip,
  crosshair,
  series: [series],
  indicators: [indicator],
  trendlines: [trendline],
  periods: [period],
  stockEvents: [stockEvent],
  annotations: [annotation],
  legendSettings
};

const rangeNavigatorSeries: RangeNavigatorSeriesModel = {
  dataSource: [
    { x: new Date('2024-01-01'), y: 123 },
    { x: new Date('2024-01-02'), y: 126 },
    { x: new Date('2024-01-03'), y: 129 }
  ],
  xName: 'x',
  yName: 'y',
  type: 'Line'
};

const rangeNavigatorOptions: RangeNavigatorModel = {
  valueType: 'DateTime',
  series: [rangeNavigatorSeries],
  tooltip: {
    enable: true
  }
};

const load = (args: IStockChartEventArgs): void => {
  // Stock Chart loading.
};

const legendClick = (args: IStockLegendClickEventArgs): void => {
  // Stock Chart legend clicked.
};

const legendRender = (args: IStockLegendRenderEventArgs): void => {
  // Stock Chart legend rendering.
};

const stockEventRender = (args: IStockEventRenderArgs): void => {
  // Stock event marker rendering.
};

const rangeChange = (args: IRangeChangeEventArgs): void => {
  // Stock Chart selected range changed.
};

const selectorRender = (args: IRangeSelectorRenderEventArgs): void => {
  // Range selector rendering.
};

const tooltipRender = (args: ITooltipRenderEventArgs): void => {
  // Tooltip rendering.
};

const axisLabelRender = (args: IAxisLabelRenderEventArgs): void => {
  // Axis label rendering.
};

const seriesRender = (args: ISeriesRenderEventArgs): void => {
  // Series rendering.
};

const pointClick = (args: IPointEventArgs): void => {
  // Point clicked.
};

const stockChartMouseMove = (args: IMouseEventArgs): void => {
  // Stock Chart mouse move.
};

const beforeExport = (args: IExportEventArgs): void => {
  // Before Stock Chart export.
};

const beforePrint = (args: IPrintEventArgs): void => {
  // Before Stock Chart print.
};

Verifying Your Setup

Check 1 Module Imports

Ensure both ChartAllModule and StockChartAllModule are in your imports array:

imports: [ChartAllModule, StockChartAllModule]

Check 2 Template Structure

Verify your template has:

• <ejs-stockchart> root element
• <e-stockchart-series-collection> container
• At least one <e-stockchart-series> with type and data fields

Check 3 Data Format

Confirm your data includes:

• x property with Date objects
• high, low, open, and close numeric values
• Data sorted by date in ascending order

Check 4 Visible Chart

After ng serve, your browser should show a chart container with candlestick series.

If you see a blank container:

• Check the browser console for errors.
• Verify CSS imports are loaded, including Syncfusion theme CSS.
• Ensure data has non-zero values.

If you see a "No data" message:

• Verify data is assigned to the chartData property.
• Check that the [dataSource] binding is correct.
• Ensure property names match exactly because they are case-sensitive.

Common Initialization Issues

Issue: `Cannot find module '@syncfusion/ej2-angular-charts'`

• Run npm install @syncfusion/ej2-angular-charts.
• Or use ng add @syncfusion/ej2-angular-charts.

Issue: Chart appears but no data renders

• Verify xName and OHLC field names match your data.
• Check that data values are not null or undefined.

Issue: Dates not formatting correctly

• Ensure the date field uses JavaScript Date objects, not strings.
• Use new Date(dateString) to convert strings.

Issue: Chart is too small or not visible

• Set explicit height and width on ejs-stockchart.

<ejs-stockchart height="400px" width="100%"></ejs-stockchart>

Interactive Features

Table of Contents

• Overview
• Range Selector
• Basic Range Selector
• Period Selector
• Basic Period Selector
• Period Selector with Custom Buttons
• Tooltips
• Enable Tooltips
• Custom Tooltip Format
• Tooltip Styling
• Shared Tooltip (All Series at Once)
• Crosshair
• Enable Crosshair
• Crosshair with Custom Styling
• Crosshair + Tooltip Integration
• Data Labels
• Enable Data Labels
• Data Label Format
• Formatted Data Labels
• User Interactions
• Zooming
• Panning
• Events
• onChartMouseMove
• onSeriesRender
• onTooltipRender
• Complete Interactive Example

Overview

Interactive features allow users to explore financial data effectively. Stock Chart provides:

• Range Selector: Date range selection buttons
• Period Selector: Quick timeframe shortcuts (1M, 3M, 1Y, All)
• Tooltips: Value display on hover
• Crosshair: Precise value inspection
• Data Labels: Display values on chart
• Events: Respond to user actions

---

Range Selector

Range Selector displays buttons to select date ranges, common in stock chart applications.

Basic Range Selector

<ejs-stockchart>
    <e-stockchart-series-collection>
        <e-stockchart-series [dataSource]='chartData'  type='Candle' xName='x' 
            high='high' low='low' open='open' close='close'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

Result: Buttons showing "1M", "3M", "6M", "1Y", "All" above the chart. Clicking each filters data to that range.

Period Selector

Period Selector provides quick buttons for common time periods (alternative to Range Selector or used together).

Basic Period Selector

<ejs-stockchart [periods]='periods'>
</ejs-stockchart>

this.periods = [
            { intervalType: 'Minutes', interval: 1, text: '1m' },
            { intervalType: 'Minutes', interval: 30, text: '30m' },
            { intervalType: 'Hours', interval: 1, text: '1H' },
            { intervalType: 'Hours', interval: 12, text: '12H', selected: true },
            { intervalType: 'Auto', text: '1D' }
];

Period Selector with Custom Buttons

<ejs-stockchart [periods]='periods'>
this.periods = [
        { text: "1M", interval: 1, intervalType: "Months" },
        { text: "3M", interval: 3, intervalType: "Months" },
        { text: "6M", interval: 6, intervalType: "Months" },
        { text: "1Y", interval: 1, intervalType: "Years" }
    ]'

Tooltips

Tooltips display detailed information when users hover over data points.

Enable Tooltips

<ejs-stockchart [tooltip]='{ enable: true }'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='x' 
            high='high' low='low' open='open' close='close'
            name='Stock A'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

User Interaction: Hover over a candle → tooltip appears showing OHLC values

Custom Tooltip Format

<ejs-stockchart [tooltip]='{ 
    enable: true,
    format: '<b>${point.x}</b><br/>O: ${point.open} | H: ${point.high} | L: ${point.low} | C: ${point.close}'
}'>
</ejs-stockchart>

Placeholders:

• ${point.x}: Date/x-value
• ${point.y}: Y-value
• ${point.open}: Open price
• ${point.high}: High price
• ${point.low}: Low price
• ${point.close}: Close price
• ${series.name}: Series name

Tooltip Styling

[tooltip]='{ 
   enable: true,
   textStyle: {
        color: "#FFFFFF",
        fontFamily: "Arial",
        size: "13px"
   },
   opacity: 0.95,
   border: { 
             color: "#333333",
             width: 1
    }
}'

Shared Tooltip (All Series at Once)

[tooltip]='{ 
    enable: true,
    shared: true  // Show all series values in one tooltip
}'

---

Crosshair

Crosshair helps users pinpoint exact values by showing lines on both axes.

Enable Crosshair

<ejs-stockchart [crosshair]='{ 
    enable: true,
    lineType: "Both"  // Vertical, Horizontal, Both
}'>
</ejs-stockchart>

Crosshair with Custom Styling

[crosshair]='{ 
    enable: true,
            lineType: "Both",
            line: { 
                width: 1, 
                color: "#FF0000",
                dashArray: "0"
    }
}'

Crosshair + Tooltip Integration

<ejs-stockchart 
    [crosshair]='{ 
        enable: true, 
        lineType: "Vertical",
        line: { width: 1, color: "#0099FF" }
    }'
    [tooltip]='{ 
        enable: true,
        format: 'High: ${point.high}<br/>Low: ${point.low}<br/>Close: ${point.close}'
    }'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='x' 
            high='high' low='low' open='open' close='close'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

User Interaction: Move mouse over chart → crosshair appears with tooltip showing precise OHLC values

---

Data Labels

Display values directly on chart elements (candles, lines, columns).

Enable Data Labels

<e-stockchart-series type='Candle' xName='x' 
    high='high' low='low' open='open' close='close'
    [dataLabel]='{ visible: true }'>
</e-stockchart-series>

Data Label Format

[dataLabel]='{ 
    visible: true,
    position: "Middle"  // Top, Middle, Bottom
}'

Formatted Data Labels

[dataLabel]='{ 
    visible: true,
    format: "${point.close}",
    position: "Top",
    font: { 
        color: "#333333",
        size: "12px"
    }
}'

When to Use Data Labels:

• Small datasets (< 50 points)
• Highlighting specific values
• Printed or shared reports
• Avoid: Large datasets (100+ points cause visual clutter)

---

User Interactions

Zooming

Enable users to zoom into specific time ranges:

<ejs-stockchart [zoomSettings]='{ 
        enableSelectionZooming: true,
        enablePan: true,
        mode: "XY",
        enableScrollbar: true
}'>
</ejs-stockchart>

User Interactions:

• Drag to zoom: Select area with mouse, release to zoom
• Pan after zoom: Drag to move around zoomed area
• Scrollbar: Slide scrollbar to navigate

Panning

Allow users to scroll horizontally through time:

[zoomSettings]='{ 
    enablePan: true,
    enableScrollbar: true
}'

---

Events

Respond to user interactions with events:

onChartMouseMove

Track mouse position over chart:

<ejs-stockchart (mouseMove)='onChartMouseMove($event)'>
</ejs-stockchart>

onChartMouseMove(args: any) {
    console.log('Mouse position:', args);
}

onSeriesRender

Access series when rendering:

<ejs-stockchart>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' (seriesRender)='seriesRender($event)'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

seriesRender(args: ISeriesRenderEventArgs): void {
    if (args.series.index  === 1) {
        argsseries.fill = '#00FF00';
    } 
}

onTooltipRender

Customize tooltip content dynamically:

<ejs-stockchart (tooltipRender)='onTooltipRender($event)'>
</ejs-stockchart>

onTooltipRender(args: ITooltipRenderEventArgs): void {
    // Customize tooltip before displaying
    if (args.data.pointIndex % 2 === 0) {
        args.text = 'Custom: ' + args.text;
    }
}

---

Complete Interactive Example

Combining all interactive features:

<ejs-stockchart 
    id='stockchart'
    [dataSource]='data'
    [periods]='periods'
    [crosshair]='{ enable: true, lineType: "Vertical" }'
    [tooltip]='{ 
        enable: true,
        format: '<b>Date:</b> ${point.x}<br/><b>O:</b> ${point.open} <b>H:</b> ${point.high}<br/><b>L:</b> ${point.low} <b>C:</b> ${point.close}'
    }'
    [zoomSettings]='{ 
        enableSelectionZooming: true,
        mode: "XY",
        enableScrollbar: true
    }'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='x' 
            high='high' low='low' open='open' close='close'
            name='AAPL'>
        </e-stockchart-series>  
    </e-stockchart-series-collection>
</ejs-stockchart>

this.periods = [
            { intervalType: 'Minutes', interval: 1, text: '1m' },
            { intervalType: 'Minutes', interval: 30, text: '30m' },
            { intervalType: 'Hours', interval: 1, text: '1H' },
            { intervalType: 'Hours', interval: 12, text: '12H', selected: true },
            { intervalType: 'Auto', text: '1D' }
];

User Experience: 1. See last year of data 2. Click "1M" to zoom to recent month 3. Hover over candle → crosshair + tooltip appear 4. Drag to zoom into specific period 5. Use scrollbar to pan through data

Legend and Series Management

Learn how to configure legends to display series information and allow users to toggle series visibility.

Table of Contents

• Basic Legend Setup
• Enable Legend
• Legend Positioning
• Legend Positioning
• Examples by Position
• Legend Alignment
• Legend Customization
• Legend Size and Padding
• Legend Item Size
• Custom Font and Color
• Background and Border
• Series Icon Shapes
• Default Shapes
• Custom Shape Per Series
• Interactive Legend: Toggle Series
• Enable Click to Toggle
• Default Visibility Control
• Programmatic Toggle
• Legend with Multiple Series
• Organizing Many Series
• Wrapping Legend Items
• Common Legend Patterns
• Pattern 1: Simple Legend Below Chart
• Pattern 2: Compact Right-Side Legend
• Pattern 3: Top Legend with Toggle
• Pattern 4: Custom Positioned Legend (Overlay)
• Troubleshooting

Basic Legend Setup

Enable Legend

<ejs-stockchart [legendSettings]='{ visible: true }'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='x' 
            high='high' low='low' open='open' close='close' 
            name='Stock A'>
        </e-stockchart-series>
        <e-stockchart-series type='Line' xName='x' yName='ma20' 
            name='MA 20'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

Key Properties:

• visible: Show/hide legend (true/false)
• name: Series label displayed in legend
• Each series can have different colors and styles shown in legend

Legend Positioning

Position Options

[legendSettings]='{ 
    position: "Top"  // Top, Bottom, Right, Left, Custom
}'

Positions:

• 'Top': Above the chart
• 'Bottom': Below the chart (default)
• 'Right': Right side of chart
• 'Left': Left side of chart
• 'Custom': Manual x/y coordinates

Examples by Position

Top Position:

[legendSettings]='{ 
    position: "Top",
    alignment: "Center"
}'

Right Position:

[legendSettings]='{ 
    position: "Right",
    alignment: "Far"  // Align to bottom of right side
}'

Custom Position:

[legendSettings]='{ 
    position: "Custom",
    location: { x: 50, y: 20 }  // 50px from left, 20px from top
}'

Legend Alignment

Align legend within its position:

[legendSettings]='{ 
    alignment: "Near"  // Near, Center, Far
}'

For Top/Bottom Positioning:

• 'Near': Left side
• 'Center': Middle (default)
• 'Far': Right side

For Left/Right Positioning:

• 'Near': Top
• 'Center': Middle (default)
• 'Far': Bottom

Legend Customization

Legend Size and Padding

[legendSettings]='{ 
    visible: true,
    width: "400px",    // Specific width
    height: "60px",    // Specific height
    padding: 15        // Space around legend
}'

Legend Item Size

[legendSettings]='{ 
    shapeWidth: 12,    // Icon width
    shapeHeight: 12
}'

Custom Font and Color

<ejs-stockchart [legendSettings]='{ 
    visible: true,
    textStyle: { 
        color: "#333333",
        fontFamily: "Arial",
        size: "14px"
    }
}'>
</ejs-stockchart>

Background and Border

[legendSettings]='{ 
    background: "white",
    border: { 
        color: "#CCCCCC",
        width: 1
    }
}'

Series Icon Shapes

Default Shapes

<e-stockchart-series type='Candle' xName='x' high='high' low='low' open='open' close='close'
    name='Stock A'
    legendShape='SeriesType'>  // Uses series type as shape
</e-stockchart-series>

Shape Options:

• 'SeriesType': Uses the series rendering type icon (default)
• 'Circle': Circle icon
• 'Rectangle': Square icon
• 'VerticalLine': Vertical line
• 'Triangle': Triangle
• 'Diamond': Diamond
• 'Cross': Cross/X shape

Custom Shape Per Series

<e-stockchart-series-collection>
    <e-stockchart-series type='Candle' xName='x' 
        high='high' low='low' open='open' close='close'
        name='Price' legendShape='SeriesType'>
    </e-stockchart-series>
    <e-stockchart-series type='Line' xName='x' yName='ma20'
        name='MA 20' legendShape='Circle'>
    </e-stockchart-series>
    <e-stockchart-series type='Line' xName='x' yName='ma50'
        name='MA 50' legendShape='Triangle'>
    </e-stockchart-series>
</e-stockchart-series-collection>

Interactive Legend: Toggle Series

Enable Click to Toggle

<ejs-stockchart [legendSettings]='{ 
    visible: true,
    toggleVisibility: true
}'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='x' 
            high='high' low='low' open='open' close='close'
            name='Stock A' [visible]='true'>
        </e-stockchart-series>
        <e-stockchart-series type='Line' xName='x' yName='ma20'
            name='MA 20' [visible]='true'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

User Interaction: Click legend item → series appears/disappears

Default Visibility Control

<e-stockchart-series type='Line' xName='x' yName='volume'
    name='Volume' [visible]='false'>  <!-- Hidden by default -->
</e-stockchart-series>

Programmatic Toggle

export class StockChartComponent {
    @ViewChild('chart') chart: StockChartComponent;

    toggleSeries(index: number) {
        const series = this.chart.series[index];
        series.visible = !series.visible;
        this.chart.refresh();
    }
}

Template:

<button (click)="toggleSeries(1)">Toggle MA 20</button>

Legend with Multiple Series

Organizing Many Series

When you have 5+ series (price + 3 indicators + volume), legends help organize:

<ejs-stockchart [legendSettings]='{ 
    visible: true,
    position: "Right",
    width: "200px"
}'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' name='Stock Price'></e-stockchart-series>
        <e-stockchart-series type='Line' name='MA 20' yAxisName='secondary'></e-stockchart-series>
        <e-stockchart-series type='Line' name='MA 50' yAxisName='secondary'></e-stockchart-series>
        <e-stockchart-series type='Line' name='EMA 12' yAxisName='secondary'></e-stockchart-series>
        <e-stockchart-series type='Column' name='Volume' yAxisName='secondary'></e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

Wrapping Legend Items

For many items in limited space:

[legendSettings]='{ 
    width: "250px"
}'

Common Legend Patterns

Pattern 1: Simple Legend Below Chart

[legendSettings]='{ 
    position: "Bottom",
    alignment: "Center",
    visible: true
}'

Pattern 2: Compact Right-Side Legend

[legendSettings]='{ 
    position: "Right",
    alignment: "Center",
    width: "150px",
    shapeWidth: 10,
    shapeHeight: 10
}'

Pattern 3: Top Legend with Toggle

[legendSettings]='{ 
    position: "Top",
    visible: true,
    toggleVisibility: true,
    textStyle: { size: "12px" }
}'

Pattern 4: Custom Positioned Legend (Overlay)

[legendSettings]='{ 
    position: "Custom",
    location: { x: 85, y: 10 },
    background: "rgba(255, 255, 255, 0.9)",
    border: { color: "#CCCCCC", width: 1 }
}'

Troubleshooting

Issue: Legend not showing

• Verify visible: true
• Ensure series have name property set
• Check browser console for errors

Issue: Legend items overlap chart

• Use position: "Right" or "Left" instead of overlaying
• Or use location to move custom positioned legend

Issue: Legend items too cramped

• Increase width for horizontal legends
• Use mode: "Vertical" to stack items
• Reduce padding or shapeWidth

Issue: Series toggle doesn't work

• Enable toggleSeriesVisibility: true
• Verify clicking legend item (not just hovering)
• Check browser console for JavaScript errors

Series Types

Table of Contents

• Overview
• Line Series
• Basic Implementation
• With Markers and Smooth Line
• Customizing Line Appearance
• Spline Series
• Basic Implementation
• Smooth Trend with Tension Control
• With Markers
• When to Use Spline vs Line
• Area Series
• Basic Implementation
• Stacked Areas (Multiple Series)
• Customizing Area Fill
• HiLo Series
• Basic Implementation
• Use Cases
• HiLoOpenClose Series
• Basic Implementation
• Visual Representation
• Hollow Candle Series
• Basic Implementation
• Visual Difference from Candle
• Use Cases
• Candle Series
• Basic Implementation
• Candle Visual Breakdown
• Default Candle Colors
• Customizing Candle Colors
• Reading Candle Charts
• Switching Series Dynamically
• Series Colors and Customization
• Individual Series Color
• Series-Specific Properties

---

Overview

Stock Chart supports 7 major series types for rendering financial data. Each type visualizes price movements differently and works best with specific use cases.

---

Line Series

Use When: Tracking simple price trends, displaying moving averages, or showing data with fewer visual details.

Basic Implementation

<ejs-stockchart id='chart-container' [dataSource]='data'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Line' xName='x' yName='close'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

Key Properties:

• type: 'Line'
• yName: Data field to plot on y-axis (typically closing price)
• xName: Date field for x-axis
• marker: Optional markers at data points

With Markers and Smooth Line

<e-stockchart-series type='Line' xName='x' yName='close'
    [marker]='{ visible: true, shape: "Circle", width: 4, height: 4 }'>
</e-stockchart-series>

Customizing Line Appearance

<e-stockchart-series type='Line' xName='x' yName='close'
    width='2' [marker]='{ visible: true }'
    dashArray='5'>
</e-stockchart-series>

Properties:

• width: Line thickness (default: 2)
• dashArray: Dashed line pattern ('5', '5,5', etc.)
• marker.visible: Show/hide data point markers
• marker.shape: Circle, Rectangle, Triangle, Diamond, etc.

---

Spline Series

Use When: You want smooth interpolated curves between price points, creating visually appealing trends without breaking at data points.

Basic Implementation

<e-stockchart-series type='Spline' xName='x' yName='close'>
</e-stockchart-series>

Spline automatically calculates smooth curves between points using interpolation algorithms.

Smooth Trend with Tension Control

<e-stockchart-series type='Spline' xName='x' yName='close'
    splineType='Natural'>
</e-stockchart-series>

Spline Types:

• 'Natural': Default smooth curve (recommended for most cases)
• 'Monotonic': Smooth but prevents crossing axis unexpectedly
• 'Cardinal': Uses tension property for curve tightness
• 'Clamped': More pronounced curves at endpoints

With Markers

<e-stockchart-series type='Spline' xName='x' yName='close'
    splineType='Cardinal'
    [marker]='{ visible: true, shape: "Circle", width: 5, height: 5 }'>
</e-stockchart-series>

When to Use Spline vs Line:

• Line: Stock data (OHLC), when data points are important
• Spline: Technical indicators, trends, smooth visualizations

---

Area Series

Use When: Showing volume trends, cumulative data, or emphasizing area under the curve.

Basic Implementation

<e-stockchart-series type='Area' xName='x' yName='close'>
</e-stockchart-series>

Stacked Areas (Multiple Series)

<e-stockchart-series-collection>
    <e-stockchart-series type='Area' xName='x' yName='close1' name='Stock A'>
    </e-stockchart-series>
    <e-stockchart-series type='Area' xName='x' yName='close2' name='Stock B'>
    </e-stockchart-series>
</e-stockchart-series-collection>

Customizing Area Fill

<e-stockchart-series type='Area' xName='x' yName='close'
    fill='rgba(100, 150, 200, 0.3)'>
</e-stockchart-series>

Properties:

• interior: Fill color and opacity
• opacity: Transparency level (0-1)
• border.color: Line color around area

---

HiLo Series

Use When: Displaying price range (High and Low) without showing open/close values.

Basic Implementation

<e-stockchart-series type='Hilo' xName='x' high='high' low='low'>
</e-stockchart-series>

Data Format:

{ x: new Date(2023, 0, 1), high: 105, low: 95 }

Use Cases

• Showing price range with minimal visual clutter
• Comparing multiple instruments' ranges
• Focus on extreme values without OHLC details

---

HiLoOpenClose Series

Use When: Displaying complete OHLC data with high/low as vertical lines and open/close as horizontal ticks (bar-style, without volume indication).

Basic Implementation

<e-stockchart-series type='HiloOpenClose' xName='x' 
    high='high' low='low' open='open' close='close'>
</e-stockchart-series>

Visual Representation

• Vertical Line: High to Low range
• Left Tick: Opening price
• Right Tick: Closing price
• Color: Green if close > open, red if close < open

---

Hollow Candle Series

Use When: Displaying OHLC data with transparent (hollow) candles instead of filled candles. Often used to show sessions or alternative time periods.

Basic Implementation

<e-stockchart-series type='Candle' xName='x' 
    high='high' low='low' open='open' close='close'
    enableSolidCandles='false'>
</e-stockchart-series>

Visual Difference from Candle:

• Candle: Filled rectangles (solid candles)
• Hollow Candle: Outlined rectangles (transparent bodies)

Use Cases

• Showing intra-session vs end-of-day
• Comparing two periods with different visuals
• Alternative rendering preference

---

Candle Series

Use When: Displaying traditional OHLC candlestick data. Most common for stock charts.

Basic Implementation

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

Candle Visual Breakdown

Anatomy of a Candle:

• Body (Rectangle): Open to Close range
• Green/Up candle: Close > Open (bullish)
• Red/Down candle: Close < Open (bearish)
• Wicks (Lines): High and Low extremes
• Upper wick: From Close (or Open) to High
• Lower wick: From Open (or Close) to Low

Default Candle Colors

// Green candle (up): Close > Open
// Red candle (down): Close < Open

Customizing Candle Colors

<e-stockchart-series type='Candle' xName='x' 
    high='high' low='low' open='open' close='close'
    bearFillColor='#FF6B6B' bullFillColor='#51CF66'>
</e-stockchart-series>

Properties:

• bearFillColor: Color when close < open (default: red)
• bullFillColor: Color when close > open (default: green)
• enableSolidCandles: Use filled candles (true) or hollow (false)

Reading Candle Charts

Up Candle (Green):

• Body: Shows opening and closing prices
• Upper wick: Distance to highest price
• Lower wick: Usually small (floor support)
• Interpretation: Buyers in control, bullish

Down Candle (Red):

• Body: Shows opening and closing prices
• Lower wick: Distance to lowest price
• Upper wick: Usually small (ceiling resistance)
• Interpretation: Sellers in control, bearish

---

Switching Series Dynamically

Allow users to switch between series types via buttons or dropdown:

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

@Component({
    selector: 'app-stock',
    template: `
        <div>
            <button (click)="changeSeries('Candle')">Candlestick</button>
            <button (click)="changeSeries('Line')">Line</button>
            <button (click)="changeSeries('Area')">Area</button>
        </div>
        <ejs-stockchart #chart [dataSource]='data'>
            <e-stockchart-series-collection>
                <e-stockchart-series [type]='seriesType' xName='x' 
                    yName='close' high='high' low='low' open='open' close='close'>
                </e-stockchart-series>
            </e-stockchart-series-collection>
        </ejs-stockchart>
    `,
    encapsulation: ViewEncapsulation.None
})
export class StockChartComponent {
    @ViewChild('chart') chart: StockChartComponent;
    
    seriesType = 'Candle';
    data = [...]; // Your data

    changeSeries(type: string) {
        this.seriesType = type;
        // Chart re-renders with new series type
    }
}

Performance Note: Changing series type on large datasets (10k+ points) may cause lag. Consider debouncing or showing loading indicator.

---

Series Colors and Customization

Individual Series Color

<e-stockchart-series type='Line' xName='x' yName='close'
    fill='#4ECDC4'>
</e-stockchart-series>

Series-Specific Properties

<e-stockchart-series type='Candle' xName='x' 
    high='high' low='low' open='open' close='close'
    width='2'
    bearFillColor='#FF0000'
    bullFillColor='#00FF00'
    [border]='borderConfig'
   >
</e-stockchart-series>
export class StockChartComponent {
    public borderConfig: any = {
    width: 2
  };
}

Properties Across Series:

• fill: Main color
• width: Line/border thickness
• opacity: Transparency (0-1)
• dashArray: Dashed pattern for lines
• border: Line border properties

Technical Indicators

Table of Contents

• Overview
• Simple Moving Average (SMA)
• Basic SMA
• SMA Parameters
• Multiple SMAs for Trend Confirmation
• SMA Trading Signals
• Exponential Moving Average (EMA)
• Basic EMA
• SMA vs EMA Comparison
• Bollinger Bands (BB)
• Basic Bollinger Bands
• Interpreting Bollinger Bands
• Customizing Band Appearance
• Relative Strength Index (RSI)
• Basic RSI
• RSI Reference Lines
• RSI Signals
• MACD
• Basic MACD
• MACD Signals
• MACD with Custom Parameters
• Other Indicators
• Stochastic
• Average True Range (ATR)
• Accumulation/Distribution Line (ADL)
• Accelerator Oscillator
• Multiple Indicators
• Customizing Indicators
• Indicator Colors
• Dashed Lines
• Indicator Visibility Toggle
• Common Indicator Combinations
• Combination 1: Trend Trading
• Combination 2: Mean Reversion
• Combination 3: Momentum

Overview

Technical Indicators help identify trends, momentum, and trading signals. Stock Chart supports indicators like:

• Trend Indicators: SMA, EMA, KAMA, TMA
• Volatility Indicators: Bollinger Bands, Accelerator Bands, ATR
• Momentum Indicators: RSI, MACD, Stochastic, CCI
• Volume Indicators: ADX, ADL, OBV, Alligator

Each indicator calculates values from price data and displays on a separate y-axis (secondary axis).

---

Simple Moving Average (SMA)

Simple Moving Average smooths price data by averaging prices over a period.

Basic SMA

<ejs-stockchart>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='x' 
            high='high' low='low' open='open' close='close'
            name='Price'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
    <e-stockchart-indicators>
        <e-stockchart-indicator type='Sma' field='Close' period=20 seriesName='SMA 20'>
        </e-stockchart-indicator>
    </e-stockchart-indicators>
</ejs-stockchart>

Result: Line overlay on price showing 20-period moving average

SMA Parameters

<e-indicator 
    type='Sma' 
    field='Close'      // Price field to average
    period=50        // Number of periods (50-day MA)
    seriesName='MA 50' 
    yAxisName='secondary'  // Optional: separate axis for indicator
>
</e-indicator>

Multiple SMAs for Trend Confirmation

<e-stockchart-indicators>
    <e-stockchart-indicator type='Sma' field='Close' period=20 seriesName='SMA 20'></e-stockchart-indicator>
    <e-stockchart-indicator type='Sma' field='Close' period=50 seriesName='SMA 50'></e-stockchart-indicator>
    <e-stockchart-indicator type='Sma' field='Close' period=200 seriesName='SMA 200'></e-stockchart-indicator>
</e-stockchart-indicators>

Use: Compare multiple timeframes (20-day, 50-day, 200-day crossovers signal trends)

SMA Trading Signals

// Golden Cross: 50-MA crosses above 200-MA (bullish)
// Death Cross: 50-MA crosses below 200-MA (bearish)
// Price above MA: Uptrend
// Price below MA: Downtrend

---

Exponential Moving Average (EMA)

EMA gives more weight to recent prices, responding faster than SMA to price changes.

Basic EMA

<e-indicator 
    type='Ema' 
    field='Close' 
    period=12 
    seriesName='EMA 12'>
</e-indicator>

SMA vs EMA Comparison

<e-stockchart-indicators>
    <e-stockchart-indicator type='Sma' field='Close' period=20 seriesName='SMA 20'></e-stockchart-indicator>
    <e-stockchart-indicator type='Ema' field='Close' period=20 seriesName='EMA 20'></e-stockchart-indicator>
</e-stockchart-indicators>

Difference:

• SMA: Weighted equally, slower to respond
• EMA: Recent prices weighted more, faster to respond to price changes

Use EMA when: You need responsive indicators for fast-moving markets

---

Bollinger Bands (BB)

Bollinger Bands show volatility and potential reversal points using upper/middle/lower bands.

Basic Bollinger Bands

<e-stockchart-indicator 
    type='BollingerBands' 
    field='Close' 
    period=20
    seriesName='BB'
    standardDeviation=2>
</e-stockchart-indicator>

Result: Three bands:

• Middle Band: 20-period SMA
• Upper Band: Middle + (2 × Standard Deviation)
• Lower Band: Middle − (2 × Standard Deviation)

Interpreting Bollinger Bands

// Price touches upper band: Potentially overbought, consider selling
// Price touches lower band: Potentially oversold, consider buying
// Bands expanding: Increasing volatility
// Bands contracting: Decreasing volatility

Customizing Band Appearance

<e-stockchart-indicator
    type='BollingerBands' 
    field='Close' 
    period=20
    standardDeviation=2
    seriesName='BB'
    [lowerLine]='{ color: "#FF0000", dashArray: "2,2" }'
    [upperLine]='{ color: "#00FF00", dashArray: "2,2" }'>
</e-stockchart-indicator>

---

Relative Strength Index (RSI)

RSI measures momentum, showing overbought (>70) and oversold (<30) conditions.

Basic RSI

<e-stockchart-indicator 
    type='Rsi' 
    field='Close' 
    period=14 
    seriesName='RSI'>
</e-stockchart-indicator>

Result: Oscillator ranging 0-100 on secondary y-axis

RSI Reference Lines

<ejs-stockchart>
    <e-stockchart-indicators>
        <e-stockchart-indicator type='Rsi' field='Close' period=14 seriesName='RSI'></e-stockchart-indicator>
    </e-stockchart-indicators>
    <e-stockchart-series-collection>
    </e-stockchart-series-collection>
</ejs-stockchart>

RSI Signals

// RSI > 70: Overbought, potential sell signal
// RSI < 30: Oversold, potential buy signal
// RSI crossing 50: Momentum shift (bullish if crossing up, bearish if crossing down)
// Divergence: RSI doesn't confirm new price high/low (potential reversal)

---

MACD

MACD (Moving Average Convergence Divergence) identifies trend changes and momentum.

Basic MACD

<e-stockchart-indicator
    type='Macd' 
    field='Close'
    seriesName='MACD'
    fastPeriod=12
    slowPeriod=26>
</e-stockchart-indicator>

Result: Three lines on secondary y-axis:

• MACD Line: 12-EMA − 26-EMA
• Signal Line: 9-EMA of MACD
• Histogram: MACD − Signal (vertical bars)

MACD Signals

// MACD > Signal: Bullish, uptrend
// MACD < Signal: Bearish, downtrend
// MACD crosses above Signal: Potential buy signal
// MACD crosses below Signal: Potential sell signal
// Positive histogram: Bullish momentum
// Negative histogram: Bearish momentum

MACD with Custom Parameters

// Standard: Fast=12, Slow=26, Signal=9
// Fast markets: Fast=5, Slow=13, Signal=5
// Slower markets: Fast=19, Slow=39, Signal=9

<e-stockchart-indicator
    type='Macd' 
    field='Close'
    fastPeriod=5    // Changed from 12
    slowPeriod=13  // Changed from 26
    signalPeriod=5  // Changed from 9
    seriesName='MACD Fast'>
</e-stockchart-indicator>

---

Other Indicators

Stochastic

Compares price to price range over period, identifies overbought/oversold.

<e-stockchart-indicator 
    type='Stochastic' 
    field='Close' 
    period=14
    kPeriod=3
    dPeriod=3
    seriesName='Stochastic'>
</e-stockchart-indicator>

Output: K% and D% lines (0-100 scale)

Average True Range (ATR)

Measures volatility without direction.

<e-stockchart-indicator
    type='Atr' 
    field='Close' 
    period=14
    seriesName='ATR'>
</e-stockchart-indicator>

Accumulation/Distribution Line (ADL)

Relates price and volume to identify buying/selling pressure.

<e-stockchart-indicator 
    type='Adl' 
    field='Close'
    seriesName='ADL'>
</e-stockchart-indicator>

Accelerator Oscillator

Measures acceleration/deceleration of price.

<e-stockchart-indicator
    type='AcceleratorBands' 
    field='Close'
    seriesName='Accelerator'
    period=34>
</e-stockchart-indicator>

---

Multiple Indicators

Combine indicators for comprehensive analysis:

<ejs-stockchart>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='x' 
            high='high' low='low' open='open' close='close'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
    <e-stockchart-indicators>
        <!-- Trend -->
        <e-stockchart-indicator type='Sma' field='Close' period=20 seriesName='MA 20'></e-stockchart-indicator>
        
        <!-- Volatility -->
        <e-stockchart-indicator type='BollingerBands' field='Close' period=20 seriesName='BB'></e-stockchart-indicator>
        
        <!-- Momentum -->
        <e-stockchart-indicator type='Rsi' field='Close' period=14 seriesName='RSI'></e-stockchart-indicator>
        
        <!-- Trend Change -->
        <e-stockchart-indicator type='Macd' field='Close' seriesName='MACD'></e-stockchart-indicator>
    </e-stockchart-indicators>
</ejs-stockchart>

Chart Layout:

• Primary Y-axis: Price with candles and SMA 20
• Secondary Y-axis: Bollinger Bands bands
• Tertiary Y-axis: RSI (0-100)
• Quaternary Y-axis: MACD histogram

---

Customizing Indicators

Indicator Colors

<e-stockchart-indicator
    type='Sma' 
    field='Close' 
    period=20 
    seriesName='SMA 20'
    fill='#0099FF'
    width=2>
</e-stockchart-indicator>

Dashed Lines

<e-stockchart-indicator
    type='Ema' 
    field='Close' 
    period=12
    dashArray='5,5'
    width=2>
</e-stockchart-indicator>

Indicator Visibility Toggle

export class StockChartComponent {
    showSMA = true;
    showBB = true;
    showRSI = false;

    toggleIndicator(indicator: string) {
        if (indicator === 'SMA') this.showSMA = !this.showSMA;
        if (indicator === 'BB') this.showBB = !this.showBB;
        if (indicator === 'RSI') this.showRSI = !this.showRSI;
        // Update chart by changing data binding
    }
}

Template:

<button (click)="toggleIndicator('SMA')">Toggle SMA</button>
<button (click)="toggleIndicator('BB')">Toggle BB</button>
<button (click)="toggleIndicator('RSI')">Toggle RSI</button>

<ejs-stockchart [showSMA]='showSMA' [showBB]='showBB' [showRSI]='showRSI'>
    <!-- Series and indicators -->
</ejs-stockchart>

---

Common Indicator Combinations

Combination 1: Trend Trading

// SMA 20/50 crossover
<e-stockchart-indicator type='Sma' field='Close' period=20 seriesName='SMA 20'></e-stockchart-indicator>
<e-stockchart-indicator type='Sma' field='Close' period=50 seriesName='SMA 50'></e-stockchart-indicator>

Signal: When SMA 20 crosses above SMA 50, enter long

Combination 2: Mean Reversion

// Bollinger Bands with RSI
<e-stockchart-indicator type='BollingerBands' field='Close' period=20 seriesName='BB'></e-stockchart-indicator>
<e-stockchart-indicator type='Rsi' field='Close' period=14 seriesName='RSI'></e-stockchart-indicator>

Signal: Price near upper band + RSI > 70 = sell

Combination 3: Momentum

// MACD and Stochastic
<e-stockchart-indicator type='Macd' field='Close' seriesName='MACD'></e-stockchart-indicator>
<e-stockchart-indicator type='Stochastic' field='Close' period=14 seriesName='Stochastic'></e-stockchart-indicator>

Signal: MACD and Stochastic both showing strong momentum = strong trend