Syncfusion React Stock Chart

Implementing Syncfusion React Stock Charts

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

When to Use This Skill

Use this skill when you need to:

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

Component Overview

Package: @syncfusion/ej2-react-charts Component: StockChartComponent Key Features:

• 6 series types (Line, Spline, Hilo, HiloOpenClose, Candle, Hollow Candle)
• Built-in period selector for quick date range navigation
• Range navigator with thumb controls for precise selection
• Technical indicators (20+ types) and indicatorType support
• Stock event annotations (stockEvents) and stockEventRender
• Interactive tooltip, crosshair (trackball), and legend
• Selection and interaction: selectionMode, isMultiSelect, selectedDataIndexes
• Zooming and panning (zoomSettings, onZooming)
• Export to image/PDF and print capabilities (exportType, Export, Print)
• Persistence and RTL support (enablePersistence, enableRtl)
• Responsive and accessible (WCAG, ARIA, keyboard navigation)

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Read this first for initial setup:

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

Axis Types and Configuration

📄 Read: references/configuration.md

For configuring and customizing axes:

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

Series Types and Visualization

📄 Read: references/series-types.md

For choosing and configuring chart series:

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

Period and Range Selectors

📄 Read: references/selectors.md

For implementing time range navigation:

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

Interactive Features and Events

📄 Read: references/interactive-features.md

For adding user interaction and visual feedback:

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

Technical Analysis Tools

📄 Read: references/technical-analysis.md

For financial analysis features:

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

Tooltip, Crosshair, and Axis Configuration

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

For tooltip and crosshair setup:

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

Chart Configuration and Styling

📄 Read: references/configuration.md

For customizing chart appearance and behavior:

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

Export, Print, and Accessibility

📄 Read: references/utilities.md

For export functionality and accessibility:

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

Quick Start

Basic Stock Chart

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

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

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

export default App;

Stock Chart with Period Selector

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

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

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

CSS Styling for Stock Chart

For the Stock Chart period selector UI to work properly, you need to include the required CSS stylesheets in your HTML file. Add the following <link> tags to the <head> section of your index.html:

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

Key CSS Stylesheets:

1. Syncfusion Tailwind CSS (tailwind3.css) - Required for Stock Chart components

• Version: 33.1.44 (update to match your Syncfusion version)
• Provides styling for period selector buttons, range navigator, tooltips, and other UI elements
• CDN URL: https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css

2. Bootstrap CSS - Optional but recommended for additional styling support

• Version: 3.3.7
• Provides base styling and layout utilities
• CDN URL: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

Important Notes:

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

Alternative CSS URLs by Theme:

• Material: https://cdn.syncfusion.com/ej2/33.1.44/material.css
• Bootstrap: https://cdn.syncfusion.com/ej2/33.1.44/bootstrap.css
• Fabric: https://cdn.syncfusion.com/ej2/33.1.44/fabric.css
• Tailwind: https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css
• HighContrast: https://cdn.syncfusion.com/ej2/33.1.44/highcontrast.css

Axis Types Reference

Stock Chart supports multiple axis types for different data scenarios:

DateTime Axis (Default)

Use for date-based stock data:

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

Best for: Stock price data with dates Inject: DateTime module

DateTimeCategory Axis

Displays only business days (excludes weekends/holidays):

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

Best for: Business day-only trading data Inject: DateTimeCategory module Note: Requires DateTimeCategory module import and injection

Logarithmic Axis

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

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

Best for: Data spanning multiple orders of magnitude Inject: Logarithmic module Note: Cannot contain zero or negative values

Numeric Axis (Y-axis default)

Standard linear numeric scale:

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

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

Multi-Axis Configuration

Use multiple Y-axes for different scales:

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

Common Patterns

Pattern 1: Financial Dashboard with Multiple Features

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

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

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

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

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

Pattern 2: Candlestick with Bear/Bull Colors and Animation

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

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

Pattern 3: Technical Analysis Chart

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

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

Pattern 4: Crosshair with Axis Tooltips

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

Pattern 5: Stock Events Visualization

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

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

Pattern 6: Export and Print

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

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

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

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

Key Props

StockChartComponent

StockChartSeriesDirective

Common Use Cases

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

Module Injection

Stock Chart requires explicit module injection for features:

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

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

Common modules:

Axes:

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

UI Features:

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

Series Types:

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

Technical Analysis:

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

Export:

• Export - Export to PNG, JPEG, SVG, PDF

Event Handling

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

Data Point Events

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

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

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

Mouse Events

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

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

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

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

Range and Selector Events

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

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

Legend Events

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

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

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

Tooltip Events

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

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

Stock Event Rendering

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

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

Lifecycle Events

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

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

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

API Reference

Below is a concise API reference derived from the official Syncfusion StockChart API. Include or expand these entries in references/* as needed.

Complete API Documentation:

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

Selected Props (StockChartComponent)

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

Data & Series:

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

Axes:

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

Navigation & Selectors:

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

Analysis & Events:

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

Interaction & UI:

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

Selection & Appearance:

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

Theming & Layout:

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

Export & Persistence:

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

Series & Analysis:

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

Accessibility & RTL:

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

Zoom & Pan:

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

Methods

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

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

Events

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

Lifecycle Events:

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

Data & Rendering Events:

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

User Interaction Events:

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

Tooltip & Crosshair Events:

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

Range & Selector Events:

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

Technical Analysis Events:

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

Suggested reference files and sections

• references/api.md — Full API surface summary (props, methods, events) with links to official docs.
• references/configuration.md — Move/expand prop-specific docs (axes, theme, sizing).
• references/interactive-features.md — Add event hooks and examples for tooltipRender, pointClick, axisLabelRender.
• references/technical-analysis.md — Expand indicators and stockEvents API samples.

Minimal API example (props + events)

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

StockChart API Reference

This document is a concise, machine-friendly summary of the public API for StockChartComponent from @syncfusion/ej2-react-charts. It is intended to be used by the skill documentation and examples and is based on the official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default

Quick links

• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• Package: @syncfusion/ej2-react-charts

Key props (name : type — brief)

Data & Series:

• dataSource: Object | DataManager | [] — Source data for series (objects with x, open, high, low, close, volume). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#datasource
• series: StockSeriesModel[] — Series definitions (type: Candle, Line, Spline, Hilo, HiloOpenClose, etc.). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#series
• seriesType: ChartSeriesType[] — Types of series available in financial chart. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#seriestype

Axes:

• primaryXAxis: StockChartAxisModel — Primary X axis (typically valueType: 'DateTime'). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#primaryxaxis
• primaryYAxis: StockChartAxisModel — Primary Y axis. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#primaryyaxis
• axes: StockChartAxisModel[] — Additional axes definitions for multi-series scaling. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axes

Layout & Appearance:

• width: string | number — Chart width. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#width
• height: string | number — Chart height. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#height
• title: string — Chart title. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#title
• titleStyle: StockChartFontModel — Styling for chart title. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#titlestyle
• background: string — Chart background color. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#background
• border: StockChartBorderModel — Chart border configuration. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#border
• chartArea: StockChartAreaModel — Chart area styling. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#chartarea
• margin: StockMarginModel — Chart margin configuration. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#margin
• theme: ChartTheme — Theme (material, bootstrap, fabric, tailwind, etc.). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#theme

Navigation & Selectors:

• periods: PeriodsModel[] — Period selector button configuration (objects with intervalType, interval, text). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#periods
• enablePeriodSelector: boolean — Show the period selector control. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enableperiodselector
• enableSelector: boolean — Show the range selector (thumbs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enableselector
• enableCustomRange: boolean — Enable custom range selection. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablecustomrange

Analysis & Events:

• indicators: StockChartIndicatorModel[] — List of technical indicators (SMA, EMA, RSI, MACD, BollingerBands, ...). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#indicators
• indicatorType: TechnicalIndicators[] — Types of indicators available. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#indicatortype
• stockEvents: StockEventModel[] — Stock event markers (date, text, description, type, background). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockevents
• annotations: StockChartAnnotationSettingsModel[] — Annotations rendered on chart. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#annotations

Interaction & UI:

• tooltip: StockTooltipSettingsModel — Tooltip configuration. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#tooltip
• crosshair: CrosshairSettingsModel — Crosshair enable and styling options. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#crosshair
• legendSettings: StockChartLegendSettingsModel — Legend visibility and styling. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendsettings
• zoomSettings: ZoomSettingsModel — Zoom and pan settings. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#zoomsettings

Selection & State:

• selectedDataIndexes: StockChartIndexesModel[][] — Programmatically set selected data point indexes. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selecteddataindexes
• selectionMode: SelectionMode — Selection mode (None, Point, Series, Cluster, DragXY, DragX, DragY). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectionmode
• isMultiSelect: boolean — Allow multiple selection of data points. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#ismultiselect
• isSelect: boolean — Indicates selection state. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#isselect

Layout & Multi-Row:

• rows: StockChartRowModel[] — Row definitions for multi-row layouts. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rows

Localization & Persistence:

• enablePersistence: boolean — Persist chart state between page reloads. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablepersistence
• enableRtl: boolean — Enable right-to-left rendering. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablertl
• locale: string — Overrides global culture and localization value for this component. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#locale

Export & Templates:

• exportType: ExportType[] — Export formats (PNG, JPEG, SVG, PDF). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#exporttype
• noDataTemplate: string | Function — Template/text shown when no data available. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#nodatatemplate

Trend Lines:

• trendlineType: TrendlineTypes[] — Types of trendlines supported (Linear, Exponential, Logarithmic, Polynomial, Power, MovingAverage). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#trendlinetype

Internal Module Reference:

• stockLegendModule: any — Internal stock legend module reference. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stocklegendmodule
• isTransposed: boolean — Render chart in transposed manner. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#istransposed
• enablePersistence: boolean — Persist chart state between page loads.
• enableRtl: boolean — Enable right-to-left rendering.
• enableCustomRange: boolean — Enable custom range selection.
• enablePeriodSelector: boolean — Show the period selector control.
• enableSelector: boolean — Show the range selector (thumbs).
• exportType: ExportType[] — Allowed export formats (e.g., ['PNG','JPEG','SVG','PDF']).
• height: string | number — Chart height.
• indicatorType: TechnicalIndicators[] — Shorthand list of indicator types available.
• indicators: StockChartIndicatorModel[] — List of technical indicators (SMA, EMA, RSI, MACD, BollingerBands, ...).
• isMultiSelect: boolean — Allow multiple selection of data points.
• isSelect: boolean — Indicates selection state.
• legendSettings: StockChartLegendSettingsModel — Legend visibility and styling.
• margin: StockMarginModel — Chart margin configuration.
• noDataTemplate: string | Function — Template or text shown when no data is available.
• periods: PeriodsModel[] — Period selector button configuration (objects with intervalType, interval, text).
• primaryXAxis: StockChartAxisModel — Primary X axis (typically valueType: 'DateTime').
• primaryYAxis: StockChartAxisModel — Primary Y axis.
• rows: StockChartRowModel[] — Row definitions for multi-row layouts.
• selectedDataIndexes: StockChartIndexesModel[][] — Programmatically set selected points indexes.
• selectionMode: SelectionMode — Selection interaction mode (e.g., None, Point, Series).
• series: StockSeriesModel[] — Series definitions (type: Candle, Line, Spline, Hilo, HiloOpenClose, etc.).
• stockEvents: StockEventModel[] — Stock event markers (date, text, description, type, background).
• stockLegendModule: any — Internal stock legend module reference.
• theme: ChartTheme — Theme (material, bootstrap, fabric, tailwind, etc.).
• title: string — Chart title.
• titleStyle: StockChartFontModel — Styling for chart title.
• tooltip: StockTooltipSettingsModel — Tooltip configuration.
• trendlineType: TrendlineTypes[] — Types of trendlines supported.
• width: string | number — Chart width.
• zoomSettings: ZoomSettingsModel — Zoom and pan settings.
• enablePersistence: boolean — Persist chart state between page loads. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• enableRtl: boolean — Enable right-to-left rendering. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• enableCustomRange: boolean — Enable custom range selection. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• enablePeriodSelector: boolean — Show the period selector control. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• enableSelector: boolean — Show the range selector (thumbs). — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• exportType: ExportType[] — Allowed export formats (e.g., ['PNG','JPEG','SVG','PDF']). — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• height: string | number — Chart height. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• indicatorType: TechnicalIndicators[] — Shorthand list of indicator types available. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• indicators: StockChartIndicatorModel[] — List of technical indicators (SMA, EMA, RSI, MACD, BollingerBands, ...). — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• isMultiSelect: boolean — Allow multiple selection of data points. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• isSelect: boolean — Indicates selection state. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• legendSettings: StockChartLegendSettingsModel — Legend visibility and styling. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• margin: StockMarginModel — Chart margin configuration. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• noDataTemplate: string | Function — Template or text shown when no data is available. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• periods: PeriodsModel[] — Period selector button configuration (objects with intervalType, interval, text). — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• primaryXAxis: StockChartAxisModel — Primary X axis (typically valueType: 'DateTime'). — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• primaryYAxis: StockChartAxisModel — Primary Y axis. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• rows: StockChartRowModel[] — Row definitions for multi-row layouts. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• selectedDataIndexes: StockChartIndexesModel[][] — Programmatically set selected points indexes. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• selectionMode: SelectionMode — Selection interaction mode (e.g., None, Point, Series). — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• series: StockSeriesModel[] — Series definitions (type: Candle, Line, Spline, Hilo, HiloOpenClose, etc.). — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• stockEvents: StockEventModel[] — Stock event markers (date, text, description, type, background). — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• stockLegendModule: any — Internal stock legend module reference. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• theme: ChartTheme — Theme (material, bootstrap, fabric, tailwind, etc.). — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• title: string — Chart title. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• titleStyle: StockChartFontModel — Styling for chart title. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• tooltip: StockTooltipSettingsModel — Tooltip configuration. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• trendlineType: TrendlineTypes[] — Types of trendlines supported. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• width: string | number — Chart width. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• zoomSettings: ZoomSettingsModel — Zoom and pan settings. — Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default

Methods (name — signature)

• destroy(): void — Destroy the chart instance and free resources. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#destroy
• getModuleName(): string — Return component module name. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#getmodulename
• rangeChanged(start: number | Date, end: number | Date): void — Programmatically change visible range. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechanged
• renderPeriodSelector(): void — Render (or re-render) the period selector UI. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#renderperiodselector
• export(type: string, fileName: string): void — Export chart to PNG, JPEG, SVG, or PDF format. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#export
• print(): void — Print the chart to printer or PDF. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#print

Events (name — payload type / purpose)

Lifecycle & Rendering Events:

• load — Component lifecycle before range navigator rendering (IStockChartEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#load
• loaded — Component lifecycle after range navigator rendering (IStockChartEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#loaded

Axis & Label Events:

• axisLabelRender — Customize each axis label before rendering (IAxisLabelRenderEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axislabelrender
• crosshairLabelRender — Triggers before the crosshair tooltip for the series is rendered (ICrosshairLabelRenderEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#crosshairlabelrender

Data & Export Events:

• beforeExport — Fired before export operation (IExportEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#beforeexport
• seriesRender — Fired when a series is rendered (ISeriesRenderEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#seriesrender

Legend Events:

• legendClick — Triggers after click on legend (IStockLegendClickEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendclick
• legendRender — Triggers before the legend is rendered (IStockLegendRenderEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendrender

Point & Mouse Events:

• pointClick — Triggers on point click (IPointEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointclick
• pointMove — Triggers on point move (IPointEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointmove
• stockChartMouseClick — Triggers on clicking the stock chart (IMouseEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockchartmouseclick
• stockChartMouseDown — Triggers on mouse down (IMouseEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockchartmousedown
• stockChartMouseLeave — Triggers when cursor leaves the chart (IMouseEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockchartmouseleave
• stockChartMouseMove — Triggers on hovering the stock chart (IMouseEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockchartmousemove
• stockChartMouseUp — Triggers on mouse up (IMouseEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockchartmouseup

Range & Selector Events:

• rangeChange — Triggers if the range is changed (IRangeChangeEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechange
• selectorRender — Triggers before render the selector (IRangeSelectorRenderEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectorrender

Technical Analysis & Tooltip Events:

• stockEventRender — When a stock event marker is rendered/customized (IStockEventRenderArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockeventrender
• tooltipRender — Modify tooltip content before it shows (ITooltipRenderEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#tooltiprender

Zoom Events:

• onZooming — Fired during zoom interactions (IZoomingEventArgs). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#onzooming

Child directives / nested models (common)

• StockChartSeriesCollectionDirective → StockChartSeriesDirective (props: type, dataSource, xName, open, high, low, close, volume, name)
• StockChartTrendlinesDirective → StockChartTrendlineDirective (props: type, period, polynomialOrder, enableTooltip, fill, width)
• StockEventsDirective → StockEventDirective (props: date, text, description, type, background)

Minimal usage example (React)

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

const data = [
  { x: new Date(2023,0,1), open: 120, high: 135, low: 115, close: 130, volume: 10000 },
  { x: new Date(2023,0,2), open: 130, high: 140, low: 125, close: 138, volume: 12000 }
];

export default function Example() {
  return (
    <StockChartComponent id="stockchart" dataSource={data} primaryXAxis={{ valueType: 'DateTime' }} tooltip={{ enable: true }} crosshair={{ enable: true }}>
      <Inject services={[DateTime, CandleSeries, Tooltip, Crosshair, RangeTooltip]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective type="Candle" xName="x" open="open" high="high" low="low" close="close" volume="volume" />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

Export/Print Modules

The Stock Chart supports export and print functionality through these modules:

• Export — Enables export to PNG, JPEG, SVG, PDF formats. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• Print — Enables print functionality via Print module. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default

Technical Indicator Modules

Advanced technical analysis with 10+ indicator types:

• SmaIndicator — Simple Moving Average (SMA) indicator. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• EmaIndicator — Exponential Moving Average (EMA) indicator. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• RsiIndicator — Relative Strength Index (RSI) momentum oscillator. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• MacdIndicator — MACD (Moving Average Convergence Divergence) indicator. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• BollingerBands — Bollinger Bands volatility indicator. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• TmaIndicator — Triangular Moving Average (TMA) indicator. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• MomentumIndicator — Momentum indicator for rate of change. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• StochasticIndicator — Stochastic momentum oscillator. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• AtrIndicator — Average True Range (ATR) volatility indicator. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• AccumulationDistributionIndicator — Accumulation Distribution money flow indicator. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default

Series Type Modules

Different visualization series for stock data:

• LineSeries — Line chart series for price trends. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model
• SplineSeries — Smooth spline/curve series. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model
• CandleSeries — Candlestick series (OHLC). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model
• HiloSeries — High-Low range bar series. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model
• HiloOpenCloseSeries — OHLC bar series. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model
• RangeAreaSeries — Range area series for range visualization. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model
• Trendlines — Trend line support for series analysis. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model

Legend and UI Modules

Interactive UI components:

• StockLegend — Legend display for series information. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendsettings

Interactive Feature Modules

User interaction and tooltips:

• Tooltip — Hover tooltips for data points. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#tooltip
• RangeTooltip — Tooltips for range selector. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• Crosshair — Crosshair and trackball feature. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#crosshair
• DataLabel — Data labels on chart points. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model

Axis Module

Date/time axis support:

• DateTime — DateTime axis for handling date-based stock data. REQUIRED for all stock charts. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model

Stock Events

• StockEventsDirective → StockEventDirective — Markup directives for defining stock event markers. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default

Stock Chart Indicators

• StockChartIndicatorsDirective → StockChartIndicatorDirective — Markup directives for technical indicators. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default

Stock Chart Trend Lines

• StockChartTrendlinesDirective → StockChartTrendlineDirective — Markup directives for trend lines (Linear, Exponential, Logarithmic, Polynomial, Power, MovingAverage). Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default

Stock Chart Axes (Multiple Axes)

• StockChartAxesDirective → StockChartAxisDirective — Markup directives for defining multiple Y-axes for multi-series scaling. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model

Stock Chart Rows (Multi-Row Layout)

• StockChartRowsDirective → StockChartRowDirective — Markup directives for row-based multi-chart layouts. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default

Additional Essential Directives

• StockChartSeriesCollectionDirective → StockChartSeriesDirective — Main series collection and individual series definition. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model
• StockChartAnnotationSettingsModel[] — Annotations/drawings on chart. Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default

Complete Module Injection Pattern

For comprehensive stock chart with all features:

import { 
  StockChartComponent,
  StockChartSeriesCollectionDirective,
  StockChartSeriesDirective,
  StockChartIndicatorsDirective,
  StockChartIndicatorDirective,
  StockChartTrendlinesDirective,
  StockChartTrendlineDirective,
  StockEventsDirective,
  StockEventDirective,
  Inject,
  DateTime,
  Tooltip,
  RangeTooltip,
  Crosshair,
  StockLegend,
  Export,
  // Series types
  LineSeries,
  SplineSeries,
  CandleSeries,
  HiloOpenCloseSeries,
  HiloSeries,
  RangeAreaSeries,
  Trendlines,
  // Indicators
  SmaIndicator,
  EmaIndicator,
  RsiIndicator,
  MacdIndicator,
  BollingerBands,
  TmaIndicator,
  MomentumIndicator,
  StochasticIndicator,
  AtrIndicator,
  AccumulationDistributionIndicator
} from '@syncfusion/ej2-react-charts';

Then inject services:

<Inject services={[
  DateTime,
  Tooltip,
  RangeTooltip,
  Crosshair,
  StockLegend,
  Export,
  LineSeries,
  SplineSeries,
  CandleSeries,
  HiloOpenCloseSeries,
  HiloSeries,
  RangeAreaSeries,
  Trendlines,
  SmaIndicator,
  EmaIndicator,
  RsiIndicator,
  MacdIndicator,
  BollingerBands,
  TmaIndicator,
  MomentumIndicator,
  StochasticIndicator,
  AtrIndicator,
  AccumulationDistributionIndicator
]} />

Notes for skill updates

• Use the prop lists above to reconcile SKILL.md and references/* files.
• Prefer to reference the official API link for exhaustive details and types.
• All modules must be injected explicitly for the features to work
• DateTime module is REQUIRED for Stock Chart functionality
• See official Syncfusion Stock Chart API reference: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default

````markdown

Complete Stock Chart API Reference Guide

Comprehensive master reference for all Syncfusion React Stock Chart APIs, including all properties, methods, events, directives, and related components with official documentation links.

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

Table of contents

• Main Component
• StockChartComponent
• Props by Category
• Data & Series Props
• dataSource
• series
• Axis Props
• primaryXAxis
• primaryYAxis
• axes
• Navigation & Selection Props
• periods
• enablePeriodSelector
• enableSelector
• enableCustomRange
• selectedDataIndexes
• selectionMode
• isMultiSelect
• Technical Analysis Props
• indicators
• stockEvents
• Interaction Props
• tooltip
• crosshair
• legendSettings
• Appearance Props
• title
• titleStyle
• theme
• background
• border
• chartArea
• margin
• Sizing Props
• width
• height
• Export & Persistence Props
• exportType
• enablePersistence
• Accessibility & Localization Props
• enableRtl
• Advanced Props
• rows
• zoomSettings
• annotations
• noDataTemplate
• locale
• isTransposed
• seriesType
• indicatorType
• trendlineType
• stockLegendModule
• Methods
• export()
• print()
• destroy()
• getModuleName()
• rangeChanged()
• renderPeriodSelector()
• Events
• Lifecycle Events
• load
• loaded
• Data & Rendering Events
• axisLabelRender
• crosshairLabelRender
• seriesRender
• beforeExport
• User Interaction Events
• pointClick
• pointMove
• Mouse & Chart Events
• stockChartMouseClick
• stockChartMouseDown
• stockChartMouseLeave
• stockChartMouseMove
• stockChartMouseUp
• Legend Events
• legendClick
• legendRender
• Tooltip & Crosshair Events
• tooltipRender
• Range & Selector Events
• rangeChange
• selectorRender
• Technical Analysis Events
• stockEventRender
• onZooming
• Directives
• StockChartSeriesCollectionDirective / StockChartSeriesDirective
• StockChartIndicatorsDirective / StockChartIndicatorDirective
• Stock Events (Prop-based, Not a Directive)
• StockChartTrendlinesDirective / StockChartTrendlineDirective
• StockChartAxesDirective / StockChartAxisDirective
• StockChartRowsDirective / StockChartRowDirective
• Models & Interfaces
• StockSeriesModel
• StockChartAxisModel
• StockChartIndicatorModel
• StockEventModel
• Modules to Inject
• Essential Modules
• Axis Module
• Series Type Modules
• Interaction Modules
• Technical Indicator Modules
• Export & Print Modules
• Complete Module Injection
• Common Patterns
• 1. Basic Stock Chart with Candle Series
• 2. Stock Chart with Multiple Series and Comparison
• 3. Stock Chart with Technical Indicators
• 4. Stock Chart with Events, Export, and Print
• API Quick Links
• Last Updated

Main Component

StockChartComponent

Package: @syncfusion/ej2-react-charts Class: StockChartComponent Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel

Main component that renders the Stock Chart UI and manages all functionality.

Basic Import:

import { StockChartComponent } from '@syncfusion/ej2-react-charts';

Usage:

<StockChartComponent
  id='stockchart'
  title='Stock Analysis'
  primaryXAxis={{ valueType: 'DateTime' }}
>
  <Inject services={[DateTime, CandleSeries, Tooltip]} />
  {/* Series, indicators, events, etc. */}
</StockChartComponent>

---

Props by Category

Data & Series Props

dataSource

• Type: Object[] | DataManager | IDataOptions
• Default: []
• Description: Source data for the chart. Array of objects with x, open, high, low, close, volume fields.
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#datasource

dataSource={[
  { x: new Date('2012-04-02'), open: 320.71, high: 324.07, low: 317.74, close: 323.78, volume: 45638000 },
  { x: new Date('2012-04-03'), open: 323.03, high: 324.30, low: 319.64, close: 321.63, volume: 40857000 }
]}

series

• Type: StockSeriesModel[]
• Description: Array of series definitions using StockChartSeriesCollectionDirective
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#series

<StockChartSeriesCollectionDirective>
  <StockChartSeriesDirective type='Candle' dataSource={data} />
</StockChartSeriesCollectionDirective>

Axis Props

primaryXAxis

• Type: StockChartAxisModel
• Description: Primary X-axis configuration (typically DateTime for stock charts)
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model

primaryXAxis={{
  valueType: 'DateTime',
  title: 'Trading Date',
  labelFormat: 'MMM dd, yyyy'
}}

Key sub-properties:

• valueType: 'DateTime' | 'Numeric' | 'Logarithmic' | 'Category' — Axis type
• title: string — Axis title
• labelFormat: string — Date/number format (e.g., 'MMM dd, yyyy')
• interval: number — Interval between labels
• intervalType: 'Auto' | 'Years' | 'Months' | 'Days' | 'Hours' | 'Minutes' — Interval type
• majorGridLines: { width, color, dashArray } — Grid line styling
• titleStyle: { fontFamily, fontSize, fontWeight, color } — Title styling
• crosshairTooltip: { enable: boolean } — Enable/disable crosshair tooltip
• API Reference: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model

primaryYAxis

• Type: StockChartAxisModel
• Description: Primary Y-axis configuration (usually for price values)
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model

primaryYAxis={{
  labelFormat: '${value}',
  title: 'Price (USD)',
  minimum: 300,
  maximum: 400,
  interval: 20
}}

Key sub-properties:

• labelFormat: string — Value format (e.g., '${value}', '{value}%')
• minimum: number — Minimum axis value
• maximum: number — Maximum axis value
• interval: number — Interval between ticks
• rangePadding: 'None' | 'Normal' | 'Additional' | 'Round' | 'Auto' — Axis padding
• API Reference: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model

axes

• Type: StockChartAxisModel[]
• Description: Array of additional axes for multi-axis scenarios
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axes

<StockChartAxesDirective>
  <StockChartAxisDirective name='volumeAxis' opposedPosition={true} />
</StockChartAxesDirective>

Navigation & Selection Props

periods

• Type: PeriodsModel[]
• Description: Array of period selector button configurations
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#periods

import { type PeriodsModel } from '@syncfusion/ej2-react-charts';
periods={[
  { intervalType: 'Days', interval: 1, text: '1D' },
  { intervalType: 'Months', interval: 1, text: '1M' },
  { text: 'All' }
]}

Period properties:

• interval: number — Count value
• intervalType: string — 'Years' | 'Months' | 'Weeks' | 'Days' | 'Hours' | 'Minutes'
• text: string — Button label

enablePeriodSelector

• Type: boolean
• Default: true
• Description: Show/hide period selector buttons
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enableperiodselector

enablePeriodSelector={true}

enableSelector

• Type: boolean
• Default: true
• Description: Show/hide range selector (thumbs)
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enableselector

enableSelector={true}

enableCustomRange

• Type: boolean
• Default: false
• Description: Enable custom date range selection
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablecustomrange

enableCustomRange={true}

selectedDataIndexes

• Type: StockChartIndexesModel[][]
• Description: Programmatically select specific data points
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selecteddataindexes

selectedDataIndexes={[[0], [5], [10]]}

selectionMode

• Type: 'None' | 'Point' | 'Series'
• Default: 'None'
• Description: Enable data point selection mode
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectionmode

selectionMode='Point'

isMultiSelect

• Type: boolean
• Default: false
• Description: Allow multiple data points to be selected simultaneously
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#ismultiselect

isMultiSelect={true}

Technical Analysis Props

indicators

• Type: StockChartIndicatorModel[]
• Description: Array of technical indicators (SMA, EMA, RSI, MACD, etc.)
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel

<StockChartIndicatorsDirective>
  <StockChartIndicatorDirective type='Sma' period={20} field='Close' />
  <StockChartIndicatorDirective type='Ema' period={50} field='Close' />
</StockChartIndicatorsDirective>

Indicator properties:

• type: string — Indicator type (Sma, Ema, Rsi, Macd, BollingerBands, Tma, Momentum, Stochastic, Atr, AccumulationDistribution)
• field: string — Data field to apply indicator (typically 'Close')
• seriesName: string — Series name to apply indicator to
• period: number — Calculation period
• fill: string — Indicator line color
• API Reference: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel

stockEvents

• Type: StockEventModel[]
• Description: Array of stock event markers (earnings, dividends, splits, etc.) passed directly as a prop
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockEventModel

<StockChartComponent
  stockEvents={[
    {
      date: new Date('2012-02-01'),
      text: 'Q1',
      description: 'Q1 Earnings',
      type: 'Flag',
      background: '#6c757d',
      border: { color: '#6c757d' },
      seriesIndexes: [0]
    },
    {
      date: new Date('2012-03-15'),
      text: 'Earnings',
      description: 'Earnings announcement',
      type: 'Circle',
      background: '#f48a21',
      textStyle: { color: 'white' },
      seriesIndexes: [0]
    }
  ]}
>
  {/* Series and other config */}
</StockChartComponent>

Stock Event properties:

• date: Date — Event date (required)
• text: string — Event label (required)
• description: string — Tooltip description
• type: string — Marker type (Flag, Circle, Square, Triangle, InvertedTriangle, ArrowUp, ArrowDown, Pin, Text)
• background: string — Marker color
• border: { color: string, width?: number } — Border styling
• textStyle: { color: string } — Text color styling
• seriesIndexes: number[] — Optional: limit event to specific series indices
• showOnSeries: boolean — Optional: show marker on series or above chart
• API Reference: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockEventModel

Interaction Props

tooltip

• Type: StockTooltipSettingsModel
• Description: Tooltip configuration for data points
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTooltipSettingsModel

tooltip={{
  enable: true,
  shared: true,
  format: '<b>${point.x}</b><br/>O: ${point.open} C: ${point.close}'
}}

Tooltip properties:

• enable: boolean — Enable/disable tooltips
• shared: boolean — Show shared tooltip across series (trackball)
• format: string — Format string with ${} tokens
• position: 'Auto' | 'Nearest' — Tooltip position
• fill: string — Background color
• border: { width, color } — Border styling
• textStyle: { fontFamily, fontSize, color } — Text styling
• API Reference: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTooltipSettingsModel

Format tokens:

• ${series.name} — Series name
• ${point.x} — X-value (date)
• ${point.y} — Y-value
• ${point.open} — Open price
• ${point.high} — High price
• ${point.low} — Low price
• ${point.close} — Close price
• ${point.volume} — Volume

crosshair

• Type: CrosshairSettingsModel
• Description: Crosshair lines and trackball configuration
• Official API: https://ej2.syncfusion.com/react/documentation/api/chart/crosshairSettings

crosshair={{
  enable: true,
  lineType: 'Both',
  snapToData: true
}}

Crosshair properties:

• enable: boolean — Enable/disable crosshair
• lineType: 'Vertical' | 'Horizontal' | 'Both' — Crosshair line type
• snapToData: boolean — Snap to nearest data point
• line: { width, color, dashArray } — Line styling
• API Reference: https://ej2.syncfusion.com/react/documentation/api/chart/crosshairSettings

legendSettings

• Type: StockChartLegendSettingsModel
• Description: Legend display and styling
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartLegendSettingsModel

legendSettings={{
  visible: true,
  position: 'Bottom',
  alignment: 'Center',
  shapeHeight: 12,
  shapeWidth: 12
}}

Legend properties:

• visible: boolean — Show/hide legend
• position: 'Bottom' | 'Top' | 'Left' | 'Right' | 'Custom' — Legend position
• alignment: 'Near' | 'Center' | 'Far' — Legend alignment
• shapeHeight: number — Icon height
• shapeWidth: number — Icon width
• width: string — Legend width
• height: string — Legend height
• title: string — Legend title
• titlePosition: 'Top' | 'Left' | 'Right' — Title position
• API Reference: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartLegendSettingsModel

Appearance Props

title

• Type: string
• Description: Chart title
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#title

title='AAPL Stock Price Analysis'

titleStyle

• Type: StockChartFontModel
• Description: Title font and styling
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartFontModel

titleStyle={{
  fontFamily: 'Arial',
  fontSize: '18px',
  fontWeight: 'bold',
  color: '#333333'
}}

theme

• Type: 'Material' | 'MaterialDark' | 'Fabric' | 'FabricDark' | 'Bootstrap' | 'Bootstrap4' | 'BootstrapDark' | 'HighContrast' | 'HighContrastLight' | 'Tailwind' | 'TailwindDark'
• Default: 'Material'
• Description: Chart theme
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#theme

theme='Material'

background

• Type: string
• Description: Chart background color
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#background

background='#f9f9f9'

border

• Type: StockChartBorderModel
• Description: Chart border configuration
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartBorderModel

border={{
  width: 2,
  color: '#cccccc'
}}

chartArea

• Type: StockChartAreaModel
• Description: Chart plotting area styling
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAreaModel

chartArea={{
  background: '#ffffff',
  border: { width: 1, color: '#e0e0e0' }
}}

margin

• Type: StockMarginModel
• Description: Chart margins
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockMarginModel

margin={{
  left: 40,
  right: 40,
  top: 40,
  bottom: 40
}}

Sizing Props

width

• Type: string | number
• Default: Window width
• Description: Chart width (e.g., '100%', '800px')
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#width

width='100%'
width='1200px'

height

• Type: string | number
• Default: 450px
• Description: Chart height
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#height

height='500px'
height='80%'

Export & Persistence Props

exportType

• Type: ('PNG' | 'JPEG' | 'SVG' | 'PDF')[]
• Default: ['PNG', 'JPEG', 'SVG', 'PDF']
• Description: Available export formats
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#exporttype

exportType={['PNG', 'PDF']}  // Only PNG and PDF
exportType={[]}  // Disable export

enablePersistence

• Type: boolean
• Default: false
• Description: Persist chart state (zoom, range, etc.) between page reloads
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablepersistence

enablePersistence={true}

Accessibility & Localization Props

enableRtl

• Type: boolean
• Default: false
• Description: Enable right-to-left rendering for RTL languages
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablertl

enableRtl={true}

Advanced Props

rows

• Type: StockChartRowModel[]
• Description: Define multiple rows for multi-pane layouts
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartRowModel

<StockChartRowsDirective>
  <StockChartRowDirective height='60%' />
  <StockChartRowDirective height='40%' />
</StockChartRowsDirective>

zoomSettings

• Type: ZoomSettingsModel
• Description: Zoom and pan configuration
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/zoomSettingsModel

zoomSettings={{
  enableMouseWheelZooming: true,
  enableSelectionZooming: true,
  enableDeferredZooming: true
}}

annotations

• Type: StockChartAnnotationSettingsModel[]
• Description: Chart annotations and drawings
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAnnotationSettingsModel

<StockChartAnnotationsDirective>
  <StockChartAnnotationSettive x='2012-02-02' y={95} content='Event' />
</StockChartAnnotationsDirective>

noDataTemplate

• Type: string | Function
• Description: Template/content shown when no data is available
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#nodatatemplate

noDataTemplate='No data available'
noDataTemplate={() => <div>Loading data...</div>}

locale

• Type: string
• Default: 'en-US'
• Description: Overrides global culture and localization value for this component
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#locale

locale='fr-FR'  // Use French locale
locale='de-DE'  // Use German locale
locale='ja-JP'  // Use Japanese locale

isTransposed

• Type: boolean
• Default: false
• Description: Specifies whether the stockChart should render in transposed manner
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#istransposed

isTransposed={true}

seriesType

• Type: ChartSeriesType[]
• Description: Types of series available in financial chart
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#seriestype

Supported series types:

• Candle — Candlestick series (default for stock charts)
• Line — Line series
• Spline — Spline/smooth curve series
• Hilo — High-Low range series
• HiloOpenClose — OHLC bars series
• RangeArea — Range area series

indicatorType

• Type: TechnicalIndicators[]
• Description: Types of technical indicators available
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#indicatortype

Supported indicator types:

• Sma — Simple Moving Average
• Ema — Exponential Moving Average
• Rsi — Relative Strength Index
• Macd — MACD (Moving Average Convergence Divergence)
• BollingerBands — Bollinger Bands
• Tma — Triangular Moving Average
• Momentum — Momentum indicator
• Stochastic — Stochastic indicator
• Atr — Average True Range
• AccumulationDistribution — Accumulation Distribution

trendlineType

• Type: TrendlineTypes[]
• Description: Types of trendlines supported for series analysis
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#trendlinetype

Supported trendline types:

• Linear — Linear trend line
• Exponential — Exponential trend line
• Logarithmic — Logarithmic trend line
• Polynomial — Polynomial trend line
• Power — Power trend line
• MovingAverage — Moving average trend line

stockLegendModule

• Type: any
• Description: Internal stock legend module reference (used internally)
• Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stocklegendmodule

---

Methods

All methods are called on the component reference.

export()

Export chart to file (PNG, JPEG, SVG, or PDF).

Signature:

export(type: 'PNG' | 'JPEG' | 'SVG' | 'PDF', fileName: string, orientation?: 'Portrait' | 'Landscape'): void

Parameters:

• type — Export format
• fileName — Output file name (without extension)
• orientation — PDF orientation (optional)

Example:

import { useRef } from 'react';

const chartRef = useRef(null);

const exportToPNG = () => {
  chartRef.current?.export('PNG', 'StockChart');
};

<button onClick={exportToPNG}>Export as PNG</button>
<StockChartComponent ref={chartRef} {...props} />

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#export

print()

Print the chart using browser print dialog.

Signature:

print(): void

Example:

const chartRef = useRef(null);

const printChart = () => {
  chartRef.current?.print();
};

<button onClick={printChart}>Print</button>
<StockChartComponent ref={chartRef} {...props} />

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#print

destroy()

Clean up the chart instance and free resources.

Signature:

destroy(): void

Example:

useEffect(() => {
  return () => {
    chartRef.current?.destroy();
  };
}, []);

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#destroy

getModuleName()

Get the module name of the Stock Chart.

Signature:

getModuleName(): string

Returns: 'StockChart'

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#getmodulename

rangeChanged()

Programmatically change the visible date range.

Signature:

rangeChanged(start: Date | number, end: Date | number): void

Parameters:

• start — Start date or timestamp
• end — End date or timestamp

Example:

const chartRef = useRef(null);

const goToLastMonth = () => {
  const end = new Date();
  const start = new Date();
  start.setMonth(start.getMonth() - 1);
  
  chartRef.current?.rangeChanged(start, end);
};

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechanged

renderPeriodSelector()

Programmatically render or re-render the period selector UI.

Signature:

renderPeriodSelector(): void

Example:

const chartRef = useRef(null);

const refreshSelector = () => {
  chartRef.current?.renderPeriodSelector();
};

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#renderperiodselector

---

Events

Events are triggered during chart lifecycle and user interactions.

Lifecycle Events

load

Fired before the chart component is loaded.

Signature:

onLoad?: (args: IStockChartEventArgs) => void

Example:

<StockChartComponent
  onLoad={(args) => {
    console.log('Chart loading:', args);
  }}
/>

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#load

loaded

Fired after the chart component is fully loaded.

Signature:

onLoaded?: (args: IStockChartEventArgs) => void

Example:

<StockChartComponent
  onLoaded={(args) => {
    console.log('Chart loaded:', args);
  }}
/>

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#loaded

Data & Rendering Events

axisLabelRender

Customize axis labels before rendering.

Signature:

onAxisLabelRender?: (args: IAxisLabelRenderEventArgs) => void

Parameters:

• args.text — Label text
• args.value — Label value
• args.axis — Axis information

Example:

<StockChartComponent
  onAxisLabelRender={(args) => {
    if (args.axis.name === 'primaryYAxis') {
      args.text = '$' + args.text;
    }
  }}
/>

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axislabelrender

crosshairLabelRender

Triggers before the crosshair tooltip for the series is rendered.

Signature:

onCrosshairLabelRender?: (args: ICrosshairLabelRenderEventArgs) => void

Example:

<StockChartComponent
  onCrosshairLabelRender={(args) => {
    args.text = 'Price: ' + args.text;
  }}
/>

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#crosshairlabelrender

seriesRender

Fired when a series is rendered.

Signature:

onSeriesRender?: (args: ISeriesRenderEventArgs) => void

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#seriesrender

beforeExport

Fired before export operation begins.

Signature:

onBeforeExport?: (args: IExportEventArgs) => void

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#beforeexport

User Interaction Events

pointClick

Fired when a data point is clicked.

Signature:

onPointClick?: (args: IPointEventArgs) => void

Parameters:

• args.pointIndex — Index of clicked point
• args.seriesIndex — Index of clicked series
• args.x — X-value
• args.y — Y-value

Example:

<StockChartComponent
  onPointClick={(args) => {
    console.log(`Clicked point at ${args.x}: ${args.y}`);
  }}
/>

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointclick

pointMove

Fired when mouse moves over a data point.

Signature:

onPointMove?: (args: IPointEventArgs) => void

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointmove

Mouse & Chart Events

stockChartMouseClick

Triggers when clicking on the stock chart.

Signature:

onStockChartMouseClick?: (args: IMouseEventArgs) => void

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockchartmouseclick

stockChartMouseDown

Triggers on mouse down event.

Signature:

onStockChartMouseDown?: (args: IMouseEventArgs) => void

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockchartmousedown

stockChartMouseLeave

Triggers when cursor leaves the chart.

Signature:

onStockChartMouseLeave?: (args: IMouseEventArgs) => void

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockchartmouseleave

stockChartMouseMove

Triggers when hovering over the stock chart.

Signature:

onStockChartMouseMove?: (args: IMouseEventArgs) => void

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockchartmousemove

stockChartMouseUp

Triggers on mouse up event.

Signature:

onStockChartMouseUp?: (args: IMouseEventArgs) => void

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockchartmouseup

Legend Events

legendClick

Fired when a legend item is clicked.

Signature:

onLegendClick?: (args: ILegendClickEventArgs) => void

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendclick

legendRender

Fired when legend items are rendered.

Signature:

onLegendRender?: (args: ILegendRenderEventArgs) => void

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendrender

Tooltip & Crosshair Events

tooltipRender

Modify tooltip content before display.

Signature:

onTooltipRender?: (args: ITooltipRenderEventArgs) => void

Parameters:

• args.text — Tooltip text
• args.pointIndex — Point index
• args.seriesIndex — Series index
• args.textStyle — Text styling

Example:

<StockChartComponent
  onTooltipRender={(args) => {
    args.text = `Custom: ${args.text}`;
  }}
/>

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#tooltiprender

Range & Selector Events

rangeChange

Emitted when the selected date range changes.

Signature:

onRangeChange?: (args: IRangeChangeEventArgs) => void

Parameters:

• args.start — Range start date
• args.end — Range end date

Example:

<StockChartComponent
  onRangeChange={(args) => {
    console.log(`Range changed: ${args.start} to ${args.end}`);
  }}
/>

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechange

selectorRender

Triggered when range selector renders.

Signature:

onSelectorRender?: (args: IRangeSelectorRenderEventArgs) => void

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectorrender

Technical Analysis Events

stockEventRender

Customize stock event marker rendering.

Signature:

onStockEventRender?: (args: IStockEventRenderArgs) => void

Parameters:

• args.text — Event text
• args.description — Event description
• args.type — Event marker type
• args.background — Event color

Example:

<StockChartComponent
  onStockEventRender={(args) => {
    if (args.type === 'Flag') {
      args.background = '#ff0000';
    }
  }}
/>

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockeventrender

onZooming

Fired during zoom interactions.

Signature:

onZooming?: (args: IZoomingEventArgs) => void

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#onzooming

---

Directives

Directives are used in JSX markup to define nested structures for series and indicators.

StockChartSeriesCollectionDirective / StockChartSeriesDirective

Define chart series using directives.

Usage:

<StockChartSeriesCollectionDirective>
  <StockChartSeriesDirective
    dataSource={data}
    type='Candle'
    xName='x'
    high='high'
    low='low'
    open='open'
    close='close'
    volume='volume'
    name='Stock Price'
  />
</StockChartSeriesCollectionDirective>

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model

StockChartIndicatorsDirective / StockChartIndicatorDirective

Define technical indicators using directives.

Usage:

<StockChartIndicatorsDirective>
  <StockChartIndicatorDirective
    type='Sma'
    field='Close'
    seriesName='Stock'
    period={20}
    fill='#0000ff'
  />
</StockChartIndicatorsDirective>

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel

Stock Events (Prop-based, Not a Directive)

Stock events are defined as a prop array on StockChartComponent, not using directives.

Usage:

<StockChartComponent
  stockEvents={[
    {
      date: new Date('2012-02-01'),
      text: 'Q1',
      description: 'Q1 Earnings',
      type: 'Flag',
      background: '#6c757d',
      seriesIndexes: [0]
    }
  ]}
>
  {/* Chart content */}
</StockChartComponent>

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockEventModel

StockChartTrendlinesDirective / StockChartTrendlineDirective

Define trend lines for series.

Usage:

<StockChartSeriesDirective>
  <StockChartTrendlinesDirective>
    <StockChartTrendlineDirective
      type='Linear'
      fill='#ff0000'
      width={2}
    />
  </StockChartTrendlinesDirective>
</StockChartSeriesDirective>

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTrendlineModel

StockChartAxesDirective / StockChartAxisDirective

Define additional Y-axes for multi-axis charts.

Usage:

<StockChartAxesDirective>
  <StockChartAxisDirective
    name='volumeAxis'
    opposedPosition={true}
    title='Volume'
  />
</StockChartAxesDirective>

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model

StockChartRowsDirective / StockChartRowDirective

Define multi-row/pane layouts.

Usage:

<StockChartRowsDirective>
  <StockChartRowDirective height='60%' />
  <StockChartRowDirective height='40%' />
</StockChartRowsDirective>

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartRowModel

---

Models & Interfaces

StockSeriesModel

Defines a single stock chart series.

Key Properties:

• dataSource: Object[] — Series data
• type: 'Candle' | 'Line' | 'Spline' | 'Hilo' | 'HiloOpenClose' — Series type
• xName: string — X field name
• open: string — Open price field
• high: string — High price field
• low: string — Low price field
• close: string — Close price field
• volume: string — Volume field
• name: string — Series name for legend
• fill: string — Series color
• opacity: number — Series opacity (0-1)
• width: number — Line width
• bearFillColor: string — Bearish candle color
• bullFillColor: string — Bullish candle color
• enableSolidCandle: boolean — Use solid candles instead of hollow

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model

StockChartAxisModel

Defines a chart axis (X or Y).

Key Properties:

• valueType: 'DateTime' | 'Numeric' | 'Logarithmic' | 'Category' — Axis type
• title: string — Axis title
• labelFormat: string — Label format
• interval: number — Interval between labels
• intervalType: string — Interval type (for DateTime)
• minimum: number — Minimum value
• maximum: number — Maximum value
• rangePadding: string — Padding mode
• majorGridLines: {} — Grid line styling
• minorGridLines: {} — Minor grid line styling
• lineStyle: {} — Axis line styling

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model

StockChartIndicatorModel

Defines a technical indicator.

Key Properties:

• type: string — Indicator type
• field: string — Data field
• seriesName: string — Target series
• period: number — Calculation period
• fill: string — Indicator color
• Additional type-specific properties (e.g., standardDeviation for Bollinger Bands)

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel

StockEventModel

Defines a stock event marker.

Key Properties:

• date: Date — Event date
• text: string — Event label
• description: string — Event description
• type: string — Marker type
• background: string — Marker color
• border: {} — Border styling
• seriesIndexes: number[] — Limit to specific series

Official API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockEventModel

---

Modules to Inject

Essential Modules

All Stock Chart features must be explicitly injected:

import { Inject } from '@syncfusion/ej2-react-charts';

<StockChartComponent>
  <Inject services={[/* modules */]} />
</StockChartComponent>

Axis Module

DateTime (required for stock charts)

import { DateTime } from '@syncfusion/ej2-react-charts';

<Inject services={[DateTime]} />

Series Type Modules

import {
  LineSeries,
  SplineSeries,
  CandleSeries,
  HiloSeries,
  HiloOpenCloseSeries,
  RangeAreaSeries,
  Trendlines
} from '@syncfusion/ej2-react-charts';

<Inject services={[LineSeries, SplineSeries, CandleSeries, HiloSeries, HiloOpenCloseSeries, RangeAreaSeries, Trendlines]} />

Interaction Modules

import {
  Tooltip,
  RangeTooltip,
  Crosshair,
  StockLegend,
  DataLabel
} from '@syncfusion/ej2-react-charts';

<Inject services={[Tooltip, RangeTooltip, Crosshair, StockLegend, DataLabel]} />

Technical Indicator Modules

import {
  SmaIndicator,
  EmaIndicator,
  RsiIndicator,
  MacdIndicator,
  BollingerBands,
  TmaIndicator,
  MomentumIndicator,
  StochasticIndicator,
  AtrIndicator,
  AccumulationDistributionIndicator
} from '@syncfusion/ej2-react-charts';

<Inject services={[
  SmaIndicator,
  EmaIndicator,
  RsiIndicator,
  MacdIndicator,
  BollingerBands,
  TmaIndicator,
  MomentumIndicator,
  StochasticIndicator,
  AtrIndicator,
  AccumulationDistributionIndicator
]} />

Export & Print Modules

• No modules are required for stock chart printing.

import { Export } from '@syncfusion/ej2-react-charts';

<Inject services={[Export]} />

Complete Module Injection

For a fully-featured Stock Chart:

import {
  // Main component
  StockChartComponent,
  StockChartSeriesCollectionDirective,
  StockChartSeriesDirective,
  StockChartIndicatorsDirective,
  StockChartIndicatorDirective,
  StockEventsDirective,
  StockEventDirective,
  StockChartTrendlinesDirective,
  StockChartTrendlineDirective,
  Inject,
  // Axes
  DateTime,
  // Series
  LineSeries,
  SplineSeries,
  CandleSeries,
  HiloSeries,
  HiloOpenCloseSeries,
  RangeAreaSeries,
  Trendlines,
  // Interaction
  Tooltip,
  RangeTooltip,
  Crosshair,
  StockLegend,
  DataLabel,
  // Indicators
  SmaIndicator,
  EmaIndicator,
  RsiIndicator,
  MacdIndicator,
  BollingerBands,
  TmaIndicator,
  MomentumIndicator,
  StochasticIndicator,
  AtrIndicator,
  AccumulationDistributionIndicator,
  // Export
  Export
} from '@syncfusion/ej2-react-charts';

<Inject services={[
  DateTime,
  LineSeries,
  SplineSeries,
  CandleSeries,
  HiloSeries,
  HiloOpenCloseSeries,
  RangeAreaSeries,
  Trendlines,
  Tooltip,
  RangeTooltip,
  Crosshair,
  StockLegend,
  DataLabel,
  SmaIndicator,
  EmaIndicator,
  RsiIndicator,
  MacdIndicator,
  BollingerBands,
  TmaIndicator,
  MomentumIndicator,
  StochasticIndicator,
  AtrIndicator,
  AccumulationDistributionIndicator,
  Export
]} />

---

Common Patterns

1. Basic Stock Chart with Candle Series

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

function BasicStockChart() {
  const data = [
    { x: new Date('2012-04-02'), open: 85.97, high: 90.58, low: 85.97, close: 90.58 },
    { x: new Date('2012-04-03'), open: 89.02, high: 92.50, low: 88.50, close: 92.90 }
  ];

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

2. Stock Chart with Multiple Series and Comparison

<StockChartComponent>
  <Inject services={[DateTime, LineSeries, Tooltip, RangeTooltip, Crosshair, StockLegend]} />
  <StockChartSeriesCollectionDirective>
    <StockChartSeriesDirective
      dataSource={applData}
      type='Line'
      name='AAPL'
      xName='x'
      yName='close'
      fill='#0080ff'
    />
    <StockChartSeriesDirective
      dataSource={googData}
      type='Line'
      name='GOOG'
      xName='x'
      yName='close'
      fill='#ff8000'
    />
  </StockChartSeriesCollectionDirective>
</StockChartComponent>

3. Stock Chart with Technical Indicators

<StockChartComponent>
  <Inject services={[DateTime, CandleSeries, SmaIndicator, EmaIndicator, Tooltip]} />
  <StockChartSeriesCollectionDirective>
    <StockChartSeriesDirective dataSource={data} type='Candle' />
  </StockChartSeriesCollectionDirective>
  <StockChartIndicatorsDirective>
    <StockChartIndicatorDirective type='Sma' period={20} field='Close' fill='#0000ff' />
    <StockChartIndicatorDirective type='Ema' period={50} field='Close' fill='#ff0000' />
  </StockChartIndicatorsDirective>
</StockChartComponent>

4. Stock Chart with Events, Export, and Print

import { useRef } from 'react';
import {type StockEventsSettingsModel }from '@syncfusion/ej2-react-charts';
function AdvancedStockChart() { 
  const chartRef = useRef(null);
  const events: StockEventsSettingsModel[] = [
    { date: new Date('2012-02-01'), text: 'Earnings', type: 'Flag', background: '#6c757d' }
  ];

  return (
    <>
      <button onClick={() => chartRef.current?.export('PNG', 'StockChart')}>
        Export PNG
      </button>
      <button onClick={() => chartRef.current?.print()}>Print</button>

      <StockChartComponent
        ref={chartRef}
        stockEvents={events}
        exportType={['PNG', 'JPEG', 'SVG', 'PDF']}
      >
        <Inject services={[DateTime, CandleSeries, Export, Tooltip]} />
      </StockChartComponent>
    </>
  );
}

---

API Quick Links

Master API Documentation:

• Stock Chart Component: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default
• Stock Chart Models: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel

Detailed API References:

• Stock Chart Main Model: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel
• Stock Series Model: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model
• Stock Chart Axis Model: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model
• Stock Chart Indicator Model: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel
• Stock Event Model: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockEventModel
• Stock Chart Legend Settings: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartLegendSettingsModel
• Stock Chart Tooltip Settings: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTooltipSettingsModel

Feature Documentation:

• Getting Started: https://ej2.syncfusion.com/react/documentation/stock-chart/getting-started
• Stock Chart Features: https://ej2.syncfusion.com/react/documentation/stock-chart/
• Export & Print: https://ej2.syncfusion.com/react/documentation/stock-chart/
• Technical Indicators: https://ej2.syncfusion.com/react/documentation/stock-chart/
• Stock Events: https://ej2.syncfusion.com/react/documentation/stock-chart/

---

Last Updated: March 27, 2026 API Version: Stock Chart v24.1+ React Version: 16.8+ ````