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