syncfusion-react-stock-chart

What this skill does

# 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](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](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](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](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](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](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](references/interactive-features.md) and [references/configuration.md](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](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