Implements the Syncfusion React Stock Chart component for visualizing financial and market data. Use this when users need stock price visualization, OHLC charts, candlestick charts, or trading chart interfaces. Supports multiple series types, period selectors, range navigators, technical indicators

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 Stock Chart with Period Selector 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 : 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: Best for: Stock price data with dates Inject: DateTime module DateTimeCategory Axis Displays only business days (excludes weekends/holidays): 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): 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: 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: Common Patterns Pattern 1: Financial Dashboard with Multiple Features Pattern 2: Candlestick with Bear/Bull Colors and Animation Pattern 3: Technical Analysis Chart Pattern 4: Crosshair with Axis Tooltips Pattern 5: Stock Events Visualization Pattern 6: Export and Print Key Props StockChartComponent Pr

syncfusion-react-stock-chart