syncfusion-javascript-stock-chart

# Implementing Stock Chart in Syncfusion TypeScript and JavaScript The Syncfusion EJ2 Stock Chart is a specialized financial visualization component for displaying and analyzing time-based market data. It supports financial series, technical indicators, trendlines, period selection, range navigation, real-time updates, export, print, annotations, and multi-pane layouts. This skill covers: - EJ2 TypeScript using `@syncfusion/ej2-charts` - EJ2 JavaScript using `ej.charts.StockChart` - npm and bundler-based TypeScript applications - Global CDN-based JavaScript applications - Candle, Hollow Candle, Hilo, HiloOpenClose, Line, Spline, and Area series - Ten built-in technical indicators - Local, remote, and real-time financial data - Period and range selectors - Tooltips, crosshairs, legends, trendlines, and annotations - Themes and appearance - Export and print - Accessibility and RTL - Troubleshooting and performance optimization The Stock Chart is included in the `@syncfusion/ej2-charts` package and supports local arrays and remote `DataManager` sources. It also supports `noDataTemplate` for an empty-data state. Do not generate Vue, React, Angular, Composition API, directive, provider, or Single File Component examples when this skill is used. ## Platform Support ### TypeScript Use TypeScript when the project requires: - Static type checking - IDE IntelliSense - ES module imports - npm package management - Webpack or another bundler - Typed event arguments - Explicit optional-feature module injection Import the component and required modules from: ```typescript import { CandleSeries, Crosshair, DateTime, RangeTooltip, StockChart, Tooltip } from '@syncfusion/ej2-charts'; ``` Inject modules before creating the Stock Chart: ```typescript StockChart.Inject( DateTime, CandleSeries, Tooltip, Crosshair, RangeTooltip ); ``` Create and render the component: ```typescript const stockChart: StockChart = new StockChart(configuration); stockChart.appendTo('#stock-chart'); ``` Inject only the modules required by the configured series and features. ### JavaScript Use JavaScript when the project requires: - Direct browser execution - CDN-based dependency loading - No TypeScript compilation - No module bundler - Global EJ2 namespace access Create the component through: ```javascript var stockChart = new ej.charts.StockChart( configuration ); stockChart.appendTo( '#stock-chart' ); ``` When the complete EJ2 global bundle is used, explicit TypeScript-style module injection is generally unnecessary. Current Syncfusion getting-started guidance targets modern Chrome, Edge, Firefox, and Safari. Validate exact browser requirements against the installed EJ2 release. ## When to Use This Skill Use this skill when the user needs to: - Display open, high, low, and close prices. - Create Candle, Hollow Candle, Hilo, or HiloOpenClose series. - Display closing-price trends with Line or Spline series. - Display single-value data through Area series. - Configure the built-in series selector. - Add SMA, EMA, TMA, MACD, RSI, Stochastic, ATR, Bollinger Bands, Momentum, or Accumulation Distribution. - Configure indicator panes and secondary axes. - Add technical-indicator choices to the built-in toolbar. - Configure period buttons. - Show or hide the built-in period selector. - Show or hide the integrated range selector. - Bind local financial data. - Bind remote OData or `DataManager` data. - Normalize a REST API response. - Build valid OHLC candles from streamed market ticks. - Add tooltips and crosshairs. - Configure a Stock Chart legend. - Add trendlines to compatible single-value series. - Add supported content annotations. - Customize themes, colors, axes, labels, and chart area. - Export the Stock Chart to JPEG, PNG, SVG, or PDF. - Print the Stock Chart. - Handle empty data. - Diagnose rendering, data, module, or performance issues. - Provide accessible text or tabular financial-data alternatives. - Enable RTL for right-to-left interfaces. ## Scope and Output Rules When this skill is used: 1. Generate only EJ2 TypeScript or plain EJ2 JavaScript. 2. Do not generate framework wrappers. 3. Use `StockChart` from `@syncfusion/ej2-charts`. 4. Use `ej.charts.StockChart` for global JavaScript. 5. Include a complete datasource unless the user provides one. 6. Include complete financial-field mappings. 7. Include the HTML host. 8. Include sufficient width and height. 9. Include the matching EJ2 theme stylesheet. 10. Import and inject every required module. 11. Exclude unused modules from minimal examples. 12. Use complete, runnable, directly copyable code. 13. Avoid unsupported properties copied from the standalone Chart. 14. Avoid presenting technical indicators as financial advice. 15. Preserve the user’s existing field names, chart type, and requested behavior when editing code. ## Validation Workflow Before generating a Stock Chart implementation, validate the following items. ### Step 1: Identify the Platform Determine whether the user needs: - TypeScript - JavaScript - Both TypeScript and JavaScript Do not substitute Vue, React, Angular, Blazor, ASP.NET Core, or another platform. ### Step 2: Identify the Series Type Principal Stock Chart series types include: ```text Candle Hollow Candle Hilo HiloOpenClose Line Spline ``` A Hollow Candle is configured through: ```typescript type: 'Candle', enableSolidCandle: false ``` The Stock Chart documentation identifies Line, Spline, Hilo, HiloOpenClose, Hollow Candle, and Candle as its principal series types. Area can also be used for suitable single-value data and requires `AreaSeries`. ### Step 3: Identify the Data Structure Financial data normally contains: ```typescript interface StockData { date: Date; open: number; high: number; low: number; close: number; volume?: number; } ``` Validate that: ```text high >= open high >= close high >= low low <= open low <= close ``` Sort records chronologically and handle duplicate timestamps. ### Step 4: Validate Field Mappings #### Candle and HiloOpenClose ```typescript xName: 'date', open: 'open', high: 'high', low: 'low', close: 'close' ``` #### Hilo ```typescript xName: 'date', high: 'high', low: 'low' ``` #### Line, Area, and Spline ```typescript xName: 'date', yName: 'close' ``` Do not use `yName: 'close'` as a substitute for Candle or HiloOpenClose mappings. ### Step 5: Validate the DateTime Axis For JavaScript `Date` x-values: ```typescript primaryXAxis: { valueType: 'DateTime' } ``` TypeScript requires: ```typescript StockChart.Inject( DateTime ); ``` Convert remote date strings into JavaScript `Date` objects before binding. ### Step 6: Validate Module Injection | Feature | Required module | |---|---| | DateTime axis | `DateTime` | | Candle or Hollow Candle | `CandleSeries` | | Hilo | `HiloSeries` | | HiloOpenClose | `HiloOpenCloseSeries` | | Line | `LineSeries` | | Spline | `SplineSeries` | | Area | `AreaSeries` | | Column | `ColumnSeries` | | Main chart tooltip | `Tooltip` | | Range navigator tooltip | `RangeTooltip` | | Crosshair | `Crosshair` | | Stock Chart legend | `StockLegend` | | Trendline | `Trendlines` | | Export and print | `Export` | | Annotation | `Annotation` | | SMA | `SmaIndicator` | | EMA | `EmaIndicator` | | TMA | `TmaIndicator` | | MACD | `MacdIndicator` | | RSI | `RsiIndicator` | | Stochastic | `StochasticIndicator` | | ATR | `AtrIndicator` | | Bollinger Bands | `BollingerBands` | | Momentum | `MomentumIndicator` | | Accumulation Distribution | `AccumulationDistributionIndicator` | ### Step 7: Validate Selectors Use: ```typescript enablePeriodSelector: true ``` for the period-selector toolbar. Use: ```typescript enableSelector: true ``` for the integrated range selector. Use: ```typescript periods: [...] ``` for preset period buttons. Do not inject an invented `RangeSelector` module. Do not use: ```typescript rangeSelector: { enable: true } ``` The period selector is enabled by default and is controlled through `enablePeriodSelector`. The integrated range selector is controlled through `enableSelector`. ### Step 8: Validate Interaction Configuration Use: ```typescript tooltip: { enable: true } ``` for the main chart tooltip. Use: ```typescript crosshair: { enable: true } ``` for the crosshair. Use: ```typescript primaryXAxis: { crosshairTooltip: { enable: true } } ``` for an axis crosshair label. Use: ```typescript legendSettings: { visible: true } ``` for the Stock Chart legend. Do not use: ```typescript legend: { visible: true } ``` ### Step 9: Validate Update Behavior Use `dataBind()` for ordinary changes: ```typescript stockChart .series[0] .dataSource = updatedData; stockChart.dataBind(); ``` Use `refresh()` for structural changes, such as: - Adding or removing indicators - Changing the series type - Adding or removing panes - Changing the period collection - Showing or hiding a selector - Changing dimensions - Rendering after a hidden parent becomes visible ### Step 10: Validate Accessibility Do not make pointer tooltips the only source of exact financial values. Provide at least one of these: - A financial-data table - A visible data summary - A details region - Native date-range controls - A live status region - Text identifying candle or indicator behavior ## Navigation Guide ### Getting Started Read: ```text references/getting-started.md ``` Use it for: - Package installation - TypeScript setup - JavaScript CDN setup - Required module injection - Basic Candle Stock Chart creation - Initial OHLC data binding - Theme and stylesheet setup - Tooltip and crosshair setup ### Series Types Read: ```text references/series-types.md ``` Use it for: - Candle - Hollow Candle - Hilo - HiloOpenClose - Line - Spline - Area - Complete field mappings - Series module injection - Built-in series selector - Runtime type switching - Series visibility and appearance ### Technical Indicators Read: ```text references/technical-indicators.md ``` Use it for: - SMA - EMA - TMA - MACD - RSI - Stochastic - ATR - Bollinger Bands - Momentum - Accumulation Distribution - Indicator module injection - Indicator source-series mapping - Overlay and separate-pane layouts - Indicator toolbar choices - Indicator lifecycle events - Performance considerations Technical indicators are mathematical calculations based on historical price or volume records. They must not be presented as guaranteed forecasts or trading advice. ### Period and Range Selectors Read: ```text references/selectors-navigation.md ``` Use it for: - Period presets - Intraday periods - Calendar intervals - `YTD` and `All` - Period-selector visibility - Integrated range-selector visibility - Range tooltip - Custom date-range controls - Runtime period replacement - Server-side range loading Period buttons select a visible time range. They do not automatically convert data to one-minute, hourly, or daily candles. ### Axes Customization Read: ```text references/axes-customization.md ``` Use it for: - DateTime x-axis - Numeric y-axis - Currency and percentage labels - Axis title and title style - Axis label style - Gridlines and tick lines - Fixed axis limits - Secondary axes - Multiple panes - Axis-label rendering - Range-navigation guidance Do not advertise unverified Stock Chart scrollbar or standalone Chart zoom properties. ### Interaction Features Read: ```text references/interaction-features.md ``` Use it for: - Main chart tooltip - Shared tooltip - Range tooltip - Tooltip formatting and templates - Crosshair and crosshair axis labels - Stock Chart legend - Period and range navigation - Trendlines - Supported content annotations - Accessible interaction alternatives Do not claim built-in point selection without explicit API support. ### Data Handling and Updates Read: ```text references/data-handling.md ``` Use it for: - Local JSON data - Data validation - Remote `DataManager` - OData queries - REST API normalization - Request cancellation - Dynamic datasource replacement - WebSocket tick processing - OHLC candle aggregation - Bounded retention - Batch rendering - Empty-data templates - Server-side windowing - Lifecycle cleanup A raw market tick must be transformed into a valid OHLC candle before it is assigned to a Candle series. ### Styling and Appearance Read: ```text references/styling-appearance.md ``` Use it for: - Built-in themes - Matching stylesheets - `palettes` - Stock Chart background - Chart-area background and border - Title and subtitle - Axis styling - Candle colors - Line and Area appearance - Legend and tooltip styling - Responsive dimensions - Runtime style updates - Contrast and non-color cues Use: ```typescript palettes ``` not: ```typescript palette ``` Use: ```typescript chartArea ``` instead of unverified `plotArea` settings. ### Export and Print Read: ```text references/export-print.md ``` Use it for: - Built-in export toolbar - JPEG export - PNG export - SVG export - PDF export - Print - `beforeExport` - Programmatic export - Safe filenames - Disabling export and print - Multi-chart report guidance Configure built-in formats first: ```typescript exportType: [ 'PNG', 'JPEG', 'SVG', 'PDF' ] ``` The Stock Chart toolbar supports JPEG, PNG, SVG, PDF, and print. ### Accessibility and RTL Read: ```text references/accessibility-rtl.md ``` Use it for: - Accessible headings and descriptions - Exact-value alternatives - Financial-data tables - Keyboard-accessible custom controls - Live-region updates - Color contrast - Non-color cues - RTL layout - Date and number localization Do not claim that every configured Stock Chart interaction is automatically keyboard accessible or WCAG compliant without testing the complete application. ### Troubleshooting and Optimization Read: ```text references/troubleshooting.md ``` Use it for: - Missing host or dimensions - Module-injection errors - Incorrect field mappings - Invalid dates and numeric values - Hidden containers - Remote-data failures - Timestamp-based aggregation - Batched updates - Bounded retention - Debounced resize handling - Browser testing - Verified lifecycle logging - Component cleanup Do not recommend unverified Stock Chart virtual scrolling, Canvas rendering, WebGL fallbacks, or obsolete IE polyfills. ## Installation Install the EJ2 Charts package: ```bash npm install @syncfusion/ej2-charts ``` The package includes the Stock Chart and its dependent EJ2 functionality. Do not require separate installation of every transitive package unless the package manager reports a specific dependency problem. ## Theme Setup Load a supported consolidated EJ2 theme stylesheet: ```html https://cdn.syncfusion.com/ej2/34.2.2/material3.css