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](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 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](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 ```typescript 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 ```typescript 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`: ```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: ```typescript 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): ```typescript primaryXAxis={{ valueType: 'DateTimeCategory', majorGridLines: { width: 0 } }} ```