Implementing Stock Chart The Stock Chart component is a specialized visualization for displaying financial data over time, including OHLC (Open, High, Low, Close) data, technical indicators, and interactive range selection. Perfect for stock market analysis, cryptocurrency tracking, and any time-series financial data visualization. When to Use This Skill - Financial Data Visualization: Display stock prices, cryptocurrency prices, or forex data over time - OHLC Charts: Render candlestick, bar, or line data for price movements - Technical Analysis: Add moving averages, Bollinger Bands, RSI, MAC…

,\n 'fr-FR': '€',\n 'ja-JP': '¥'\n };\n\n onLocaleChange() {\n const symbol = this.currencySymbols[this.selectedLocale];\n this.yAxisConfig = {\n labelFormat: `${symbol}{value}.00`\n };\n }\n}\n```\n\n## Stripline\n\n```typescript\n\u003cejs-stockchart [primaryXAxis]='primaryXAxis'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle' xName='x' \n high='high' low='low' open='open' close='close'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>\n\nthis.primaryXAxis = {\n valueType: 'DateTime',\n stripLines: [{ start: 320, sizeType: 'Pixel', size: 1, color: 'green', dashArray: '10,5' },\n { start: 380, sizeType: 'Pixel', size: 1, color: 'red', dashArray: '10,5' }]\n};\n```\n\nThis implements live updates, accessibility, internationalization, and performance optimization in one component.\n\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":5866,"content_sha256":"fceb195e4fed1d1ac46989e921f13e47562566168baacab1055c9804bd9edae5"},{"filename":"references/api-reference.md","content":"# Stock Chart API Reference\n\nThis document summarizes key properties, methods, and events for the `StockChartComponent` with direct links to the official Syncfusion Angular API anchors.\n\n- Official API index: https://ej2.syncfusion.com/angular/documentation/api/stock-chart/index-default\n\n## Properties (selected)\n- `annotations` — [StockChartAnnotationSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockchartannotationsettingsmodel)\n- `axes` — [StockChartAxisModel[]](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockchartaxismodel)\n- `background` — string\n- `border` — [StockChartBorderModel](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockchartbordermodel)\n- `chartArea` — [StockChartAreaModel](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockchartareamodel)\n- `crosshair` — [CrosshairSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockchartaxismodel#crosshair) (see axis models)\n- `dataSource` — Object | DataManager\n- `enableCustomRange` — boolean\n- `enablePeriodSelector` — boolean\n- `enablePersistence` — boolean\n- `enableRtl` — boolean\n- `enableSelector` — boolean\n- `exportType` — [ExportType[]](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/exporttype)\n- `height` — string\n- `indicatorType` — TechnicalIndicators[]\n- `indicators` — [StockChartIndicatorModel[]](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockchartindicatormodel)\n- `isMultiSelect` — boolean\n- `isSelect` — boolean\n- `isTransposed` — boolean\n- `legendSettings` — [StockChartLegendSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockchartlegendsettingsmodel)\n- `locale` — string\n- `mainObject` — Element\n- `margin` — [StockMarginModel](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockmarginmodel)\n- `noDataTemplate` — string | Function\n- `periods` — [PeriodsModel[]](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/periodsmodel)\n- `primaryXAxis` / `primaryYAxis` — [StockChartAxisModel](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockchartaxismodel)\n- `rows` — [StockChartRowModel[]](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockchartrowmodel)\n- `selectedDataIndexes` — [StockChartIndexesModel[]](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockchartindexesmodel)\n- `selectionMode` — [SelectionMode](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/selectionmode)\n- `series` — [StockSeriesModel[]](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockseriesmodel)\n- `seriesType` — ChartSeriesType[]\n- `stockEvents` — [StockEventsSettingsModel[]](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockeventssettingsmodel)\n- `theme` — [ChartTheme](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/charttheme)\n- `title` / `titleStyle` — string / [StockChartFontModel](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockchartfontmodel)\n- `tooltip` — [StockTooltipSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stocktooltipsettingsmodel)\n- `trendlineType` — TrendlineTypes[]\n- `width` — string\n- `zoomSettings` — [ZoomSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/zoomsettingsmodel)\n\n## Methods (selected)\n- `chartModuleInjection()` — Module injection helper\n- `destroy()` — Destroy method\n- `getModuleName()` — Get component name\n- `rangeChanged(updatedStart, updatedEnd)` — Programmatically change chart range\n- `renderPeriodSelector()` — Render the period selector\n- `stockChartDataManagerSuccess()` — DataManager success handler\n\n## Events (selected)\n- `axisLabelRender` — EmitType\u003cIAxisLabelRenderEventArgs>\n- `beforeExport` — [IExportEventArgs](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/iexporteventargs)\n- `crosshairLabelRender` — [ICrosshairLabelRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/icrosshairlabelrendereventargs)\n- `legendClick` — [IStockLegendClickEventArgs](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/istocklegendclickeventargs)\n- `legendRender` — [IStockLegendRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/istocklegendrendereventargs)\n- `load` / `loaded` — [IStockChartEventArgs](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/istockcharteventargs)\n- `onZooming` — EmitType\u003cIZoomingEventArgs>\n- `pointClick` / `pointMove` — EmitType\u003cIPointEventArgs>\n- `rangeChange` — [IRangeChangeEventArgs](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/irangechangeeventargs)\n- `selectorRender` — EmitType\u003cIRangeSelectorRenderEventArgs>\n- `seriesRender` — EmitType\u003cISeriesRenderEventArgs>\n- `stockChartMouseClick` / `stockChartMouseDown` / `stockChartMouseMove` / `stockChartMouseUp` / `stockChartMouseLeave` — EmitType\u003cIMouseEventArgs>\n- `stockEventRender` — [IStockEventRenderArgs](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/istockeventrenderargs)\n- `tooltipRender` — EmitType\u003cITooltipRenderEventArgs>\n\n## Quick Example\nSee `SKILL.md` examples in the skill root for setup and usage patterns.\n\n---\nGenerated from: https://ej2.syncfusion.com/angular/documentation/api/stock-chart/index-default\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":5531,"content_sha256":"3bb026a8ff6e648eb211cf5e1d5969c3f3392b2e7206ad51008f624b9ce82af6"},{"filename":"references/axis-customization.md","content":"# Axis Customization\n\n## Table of Contents\n- [Overview](#overview)\n- [Primary and Secondary Axes](#primary-and-secondary-axes)\n - [Primary X-Axis (DateTime)](#primary-x-axis-datetime)\n - [Primary Y-Axis (Numeric Price)](#primary-y-axis-numeric-price)\n - [Secondary Y-Axis (Volume, Indicators)](#secondary-y-axis-volume-indicators)\n- [Axis Types](#axis-types)\n - [DateTime Axis (Recommended for Stock Charts)](#datetime-axis-recommended-for-stock-charts)\n - [Numeric Axis](#numeric-axis)\n - [Category Axis](#category-axis)\n - [Logarithmic Axis](#logarithmic-axis)\n- [Axis Labels and Formatting](#axis-labels-and-formatting)\n - [Custom Label Formatting](#custom-label-formatting)\n - [Hiding/Showing Labels](#hidingshowing-labels)\n - [Label Angle](#label-angle)\n- [Axis Title](#axis-title)\n - [Adding Axis Titles](#adding-axis-titles)\n - [Title Positioning](#title-positioning)\n- [Axis Ranges and Scaling](#axis-ranges-and-scaling)\n - [Fixed Range (Manual Scaling)](#fixed-range-manual-scaling)\n - [Auto Range (Default)](#auto-range-default)\n - [Interval Configuration](#interval-configuration)\n- [Crosshair Configuration](#crosshair-configuration)\n - [Basic Crosshair](#basic-crosshair)\n - [Crosshair Types](#crosshair-types)\n - [Crosshair with Tooltip Integration](#crosshair-with-tooltip-integration)\n - [Customizing Crosshair Style](#customizing-crosshair-style)\n- [Zooming and Panning](#zooming-and-panning)\n - [Enable Zooming](#enable-zooming)\n - [Range Zooming](#range-zooming)\n- [Common Axis Patterns](#common-axis-patterns)\n - [Pattern 1: Stock Price Display with Currency](#pattern-1-stock-price-display-with-currency)\n - [Pattern 2: DateTime with Monthly Labels](#pattern-2-datetime-with-monthly-labels)\n - [Pattern 3: Volume with Secondary Axis](#pattern-3-volume-with-secondary-axis)\n - [Pattern 4: Logarithmic for Wide Price Ranges](#pattern-4-logarithmic-for-wide-price-ranges)\n---\n\n## Overview\n\nStock Chart uses axes to map data to pixel coordinates. By default:\n- **X-Axis (Primary):** DateTime axis for dates\n- **Y-Axis (Primary):** Numeric axis for prices\n- **Y-Axis (Secondary):** Optional secondary axis for volume or indicators\n\n---\n\n## Primary and Secondary Axes\n\n### Primary X-Axis (DateTime)\n\nStock charts require a DateTime x-axis to properly handle date-based financial data:\n\n```typescript\n\u003cejs-stockchart [primaryXAxis]='{ \n valueType: \"DateTime\", \n edgelabelPlacement: \"Shift\" \n}'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle' xName='x' high='high' low='low' open='open' close='close'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>\n```\n\n**Key Properties:**\n- `valueType`: 'DateTime' (required for dates)\n- `edgelabelPlacement`: 'Shift' (prevents edge labels from being cut off)\n- `labelFormat`: Custom date format (e.g., 'dd MMM yyyy')\n\n### Primary Y-Axis (Numeric Price)\n\n```typescript\n\u003cejs-stockchart [primaryYAxis]='{ \n labelFormat: \"{value}.00\",\n minimum: 0,\n maximum: 200 \n}'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle' xName='x' high='high' low='low' open='open' close='close'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>\n```\n\n**Key Properties:**\n- `labelFormat`: Number formatting (\"${value}\", \"{value}%\", etc.)\n- `minimum`, `maximum`: Fixed value range\n- `interval`: Spacing between major gridlines\n\n### Secondary Y-Axis (Volume, Indicators)\n\nUse a secondary axis for data with different scales (e.g., volume bars alongside price candles):\n\n```typescript\n\u003cejs-stockchart [primaryYAxis]='{ title: \"Price\"}'>\n \u003ce-stockchart-axes>\n \u003ce-stockchart-axis title='Volume' labelFormat= \"{value}M\">\n \u003c/e-stockchart-axis>\n \u003c/e-stockchart-axes>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle' xName='x' high='high' low='low' open='open' close='close'>\n \u003c/e-stockchart-series>\n \u003ce-stockchart-series type='Column' xName='x' yName='volume' yAxisName='secondary'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>\n```\n\n**Use Cases:**\n- Volume (separate scale, usually in millions)\n- Technical indicators (RSI 0-100, MACD values)\n- Multiple stocks with different price ranges\n\n---\n\n## Axis Types\n\n### DateTime Axis (Recommended for Stock Charts)\n\nAutomatically handles date spacing, formatting, and zooming for financial data:\n\n```typescript\n[primaryXAxis]='{ \n valueType: \"DateTime\",\n intervalType: \"Days\",\n interval: 1,\n labelFormat: \"dd MMM\"\n}'\n```\n\n**Interval Types:**\n- `'Years'`: Yearly intervals\n- `'Months'`: Monthly intervals\n- `'Days'`: Daily intervals (default for intraday data)\n- `'Hours'`: Hourly intervals\n- `'Minutes'`: Minute intervals\n\n**Label Formats:**\n- `'dd MMM'`: \"01 Jan\"\n- `'MMM yyyy'`: \"Jan 2023\"\n- `'dd MMM yyyy'`: \"01 Jan 2023\"\n- `'hh:mm:ss'`: \"09:30:00\" (for intraday)\n\n### Numeric Axis\n\nFor non-date x-axis (index-based, sequential):\n\n```typescript\n[primaryXAxis]='{ \n valueType: \"Double\"\n}'\n```\n\n### Category Axis\n\nFor text-based categories (rarely used in stock charts):\n\n```typescript\n[primaryXAxis]='{ \n valueType: \"Category\"\n}'\n```\n\n### Logarithmic Axis\n\nFor price comparison across wide ranges:\n\n```typescript\n[primaryYAxis]='{ \n valueType: \"Logarithmic\",\n logBase: 10\n}'\n```\n\n**When to Use:** Comparing stocks with vastly different prices (e.g., $10 vs $500 stock)\n\n---\n\n## Axis Labels and Formatting\n\n### Custom Label Formatting\n\n**Format Strings:**\n- `{value}`: Numeric value\n- `${value}`: Currency\n- `{value}%`: Percentage\n- `{value}M`: Millions (custom suffix)\n\n```typescript\n[primaryYAxis]='{ \n labelFormat: \"${value}.00\" // $100.00\n}'\n\n[primaryXAxis]='{ \n labelFormat: \"dd MMM yyyy\" // 01 Jan 2023\n}'\n```\n\n### Hiding/Showing Labels\n\n```typescript\n[primaryXAxis]='{ \n labelStyle: { color: \"transparent\" } // Hide labels\n}'\n```\n\n### Label Angle\n\n```typescript\n[primaryXAxis]='{ \n labelIntersectAction: \"Rotate45\" // Angle when labels overlap\n}'\n```\n\n---\n\n## Axis Title\n\n### Adding Axis Titles\n\n```typescript\n\u003cejs-stockchart \n [primaryXAxis]='{ \n title: \"Date\"\n }' \n [primaryYAxis]='{ \n title: \"Price ($)\"\n }'>\n\u003c/ejs-stockchart>\n```\n\n### Title Positioning\n\n```typescript\ntitleStyle: { \n textAlignment: 'Far'\n}\n```\n\n---\n\n## Axis Ranges and Scaling\n\n### Fixed Range (Manual Scaling)\n\n```typescript\n\u003cejs-stockchart [primaryYAxis]='{ \n minimum: 90,\n maximum: 150,\n interval: 10 // Gridline every 10 units\n}'>\n\u003c/ejs-stockchart>\n```\n\n**Use When:** You want consistent price range (e.g., comparing multiple stocks or time periods with same scale).\n\n### Auto Range (Default)\n\n```typescript\n\u003cejs-stockchart [primaryYAxis]='{ \n rangePadding: \"Additional\" // Add 5% padding around min/max\n}'>\n\u003c/ejs-stockchart>\n```\n\n**rangePadding Options:**\n- `'Additional'`: Add 5% above/below min/max (default)\n- `'Normal'`: Add 3% padding\n- `'None'`: Exact min/max from data\n\n### Interval Configuration\n\n```typescript\n[primaryYAxis]='{ \n interval: 25, // Gridline every 25 units\n majorGridLines: { width: 1, color: \"#E0E0E0\" },\n minorTicksPerInterval: 4 // 4 minor ticks between majors\n}'\n```\n\n---\n\n## Crosshair Configuration\n\nCrosshair helps users inspect precise values at any point on the chart:\n\n### Basic Crosshair\n\n```typescript\n\u003cejs-stockchart [crosshair]='{ \n enable: true,\n lineType: \"Vertical\",\n line: { width: 1, color: \"#FF0000\" }\n}'>\n\u003c/ejs-stockchart>\n```\n\n### Crosshair Types\n\n```typescript\n[crosshair]='{ \n lineType: \"Vertical\" // Vertical line only\n // OR\n lineType: \"Horizontal\" // Horizontal line only\n // OR\n lineType: \"Both\" // Both vertical and horizontal\n}'\n```\n\n### Crosshair with Tooltip Integration\n\n```typescript\n\u003cejs-stockchart \n [crosshair]='{ enable: true, lineType: \"Both\" }'\n [tooltip]='{ enable: true }'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle' xName='x' high='high' low='low' open='open' close='close'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>\n```\n\n**User Interaction:** Hover over chart → crosshair appears → tooltip shows exact values\n\n### Customizing Crosshair Style\n\n```typescript\n[crosshair]='{ \n enable: true,\n lineType: \"Both\",\n line: { \n width: 2, \n color: \"#0099FF\",\n dashArray: \"5,5\" // Dashed line\n },\n lineStyle: \"Dashed\"\n}'\n```\n\n---\n\n## Zooming and Panning\n\n### Enable Zooming\n\n```typescript\n\u003cejs-stockchart [zoomSettings]='{ \n enableSelectionZooming: true,\n mode: \"XY\",\n toolbarItems: [\"Pan\", \"Zoom\", \"Reset\"]\n}'>\n\u003c/ejs-stockchart>\n```\n\n**Zoom Modes:**\n- `'X'`: Zoom horizontally (time axis)\n- `'Y'`: Zoom vertically (price axis)\n- `'XY'`: Zoom both directions\n\n**Zoom Interactions:**\n- **Selection Zoom:** Drag to select area, zoom into it\n- **Pan:** Drag after zoom to move around\n- **Reset:** Return to original view\n\n### Range Zooming\n\n```typescript\n\u003cejs-stockchart [zoomSettings]='{ \n enableScrollbar: true,\n enablePan: true\n}'>\n\u003c/ejs-stockchart>\n```\n\n\n---\n\n## Common Axis Patterns\n\n### Pattern 1: Stock Price Display with Currency\n\n```typescript\n[primaryYAxis]='{ \n labelFormat: \"${value}.00\",\n title: \"Price\",\n minimum: 0,\n rangePadding: \"Additional\"\n}'\n```\n\n### Pattern 2: DateTime with Monthly Labels\n\n```typescript\n[primaryXAxis]='{ \n valueType: \"DateTime\",\n intervalType: \"Months\",\n interval: 1,\n labelFormat: \"MMM yyyy\"\n}'\n```\n\n### Pattern 3: Volume with Secondary Axis\n\n```typescript\n[primaryYAxis]='{ \n title: \"Price ($)\"\n}' \n[secondaryYAxis]='{ \n title: \"Volume (M)\"\n}'\n```\n\nThen in series:\n```typescript\n\u003ce-stockchart-series type='Column' xName='x' yName='volume' yAxisName='secondary'>\n\u003c/e-stockchart-series>\n```\n\n### Pattern 4: Logarithmic for Wide Price Ranges\n\n```typescript\n[primaryYAxis]='{ \n valueType: \"Logarithmic\",\n title: \"Price (Log Scale)\" \n}'\n```\n\n**Use:** Comparing $5 stock with $500 stock on same chart\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":10035,"content_sha256":"0f8197b0995360449916c8a2a0328d9a4ff8b866f801c3085a77ffa0be8987c3"},{"filename":"references/export-print.md","content":"# Export and Print\n\nLearn how to export stock charts and print them for reports, analysis, or sharing.\n\n## Table of Contents\n- [Export Formats](#export-formats)\n- [PNG Export](#png-export)\n- [SVG Export](#svg-export)\n- [Advantages of SVG](#advantages-of-svg)\n- [PDF Export](#pdf-export)\n- [Print](#print)\n- [User Experience](#user-experience)\n- [Enabling Export & Print](#enabling-export--print)\n- [Disabling Export and Print](#disabling-export-and-print)\n- [Troubleshooting](#troubleshooting)\n\nLearn how to export stock charts and print them for reports, analysis, or sharing.\n\n## Export Formats\n\nStock Chart supports multiple export formats through the built‑in toolbar:\n - **PNG:** Raster image, good for web and email\n - **JPEG:** Raster image\n - **SVG:** Scalable vector, good for web and editing\n - **PDF:** Professional documents, best for reports\n - **Print:** Direct printing to paper\n\nThese export and print options appear automatically in the stock chart’s period‑selector toolbar.\n\n## PNG Export\n\nPNG export is available directly from the toolbar.\n\n**How to Export PNG:**\n 1. Click the **Export** dropdown in the chart toolbar.\n 2. Select **PNG**.\n 3. The chart will download as a PNG image.\n\n## SVG Export\n\nSVG export is useful for scalable, editable graphics.\n\n**How to Export SVG:**\n 1. Open the **Export** dropdown.\n 2. Choose **SVG**.\n 3. The chart downloads as a vector image.\n\n**Advantages of SVG:**\n - Scalable without quality loss\n - Smaller file size for simple visuals\n - Editable in Illustrator, Figma, Inkscape\n - Ideal for web embedding\n\n## PDF Export\n\n PDF export allows you to include charts in reports.\n\n**How to Export PDF:**\n 1. Open the **Export** dropdown.\n 2. Select **PDF**.\n 3. The chart downloads as a PDF document.\n\n## Print\n\n The Stock Chart includes a built‑in **Print** button.\n\n**How to Print:**\n 1. Click the **Print** icon in the toolbar.\n 2. The browser’s print dialog opens.\n 3. Choose printer or “Save as PDF”.\n 4. Print or export the chart.\n\n**User Experience:**\n 1. Click \"Print\"\n 2. Browser print dialog appears\n 3. Adjust print settings if needed\n 4. Print or save the output\n\n## Enabling Export & Print\n\nTo enable toolbar export and print, the `Export` module must be injected along with other StockChart modules.\n\n```typescript\nimport { Component, ViewEncapsulation } from '@angular/core';\nimport { ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n imports: [ChartAllModule, StockChartAllModule],\n standalone: true,\n selector: 'app-stock',\n template: `\u003cejs-stockchart id=\"chart-container\" [primaryXAxis]='primaryXAxis' [title]='title'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series [dataSource]='chartData' type='Candle' xName='date' yName='open' name='India' width=2 >\u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n \u003c/ejs-stockchart>`\n})\nexport class AppComponent implements OnInit {\n public primaryXAxis?: Object;\n public chartData?: Object[];\n public title?: string;\n public crosshair?: Object;\n ngOnInit(): void {\n this.chartData = [\n { x: new Date(2023, 0, 1), open: 100, high: 105, low: 95, close: 102 },\n { x: new Date(2023, 0, 2), open: 102, high: 108, low: 100, close: 105 },\n { x: new Date(2023, 0, 3), open: 105, high: 110, low: 103, close: 108 }\n ];\n this.title = 'Efficiency of oil-fired power production';\n this.primaryXAxis = {\n valueType: 'DateTime'\n };\n }\n}\n```\n## Disabling Export and Print\n\nTo hide the export dropdown in the toolbar:\n\n \u003cejs-stockchart [exportType]=\"[]\">\u003c/ejs-stockchart>\n\nSetting `exportType` to an empty list disables all export options.\n\n## Troubleshooting\n\n**Issue: Export button does nothing**\n- Ensure the chart is fully rendered\n- Make sure the Export module is included in your module imports\n\n**Issue: Exported image is blank**\n - Verify that chart data has finished loading\n - Ensure the element is visible when exporting\n\n**Issue: PDF export creates empty file**\n - Ensure the chart rendered successfully before exporting\n\n**Issue: Print dialog doesn't open**\n - Browser may require a direct user interaction\n - Click on the chart or toolbar first, then press Print\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":4362,"content_sha256":"3387abca2c38785fb257c15b264d998d2338e16efc5b867ba81ffde604978b8e"},{"filename":"references/getting-started.md","content":"# Getting Started with Stock Chart\n\nLearn how to install, set up, and create your first stock chart in an Angular application.\n\n## Table of Contents\n- [Getting Started with Stock Chart](#getting-started-with-stock-chart)\n- [Installation](#installation)\n - [Step 1: Install the Syncfusion Charts Package](#step-1-install-the-syncfusion-charts-package)\n - [Alternative: Manual NPM Installation](#alternative-manual-npm-installation)\n - [Step 2: Check Angular Version Compatibility](#step-2-check-angular-version-compatibility)\n- [Basic Implementation](#basic-implementation)\n - [Minimal Stock Chart](#minimal-stock-chart)\n- [Data Binding](#data-binding)\n - [Data Format](#data-format)\n - [Binding Data from Array](#binding-data-from-array)\n - [Binding with DataManager](#binding-with-datamanager)\n- [Verifying Your Setup](#verifying-your-setup)\n - [Check 1: Module Imports](#check-1-module-imports)\n - [Check 2: Template Structure](#check-2-template-structure)\n - [Check 3: Data Format](#check-3-data-format)\n - [Check 4: Visible Chart](#check-4-visible-chart)\n- [Common Initialization Issues](#common-initialization-issues)\n\n## Installation\n\n### Step 1: Install the Syncfusion Charts Package\n\nUse Angular CLI's `ng add` command to install the package and automatically configure your project:\n\n```bash\nng add @syncfusion/ej2-angular-charts\n```\n\nThis command:\n- Adds `@syncfusion/ej2-angular-charts` to your `package.json`\n- Installs peer dependencies automatically\n- Imports necessary modules in your application\n- Configures theme CSS imports\n\n### Alternative: Manual NPM Installation\n\nIf `ng add` isn't available in your environment:\n\n```bash\nnpm install @syncfusion/ej2-angular-charts\nnpm install @syncfusion/ej2-base @syncfusion/ej2-calendars @syncfusion/ej2-dropdowns\n```\n\n### Step 2: Check Angular Version Compatibility\n\nStock Chart requires:\n- **Angular 19+:** Uses standalone components (default in Angular 19+)\n- **Angular 12-18:** Legacy NgModule approach (see [Standalone Guide](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-standalone))\n\nVerify your version:\n\n```bash\nng version\n```\n\n## Basic Implementation\n\n### Minimal Stock Chart\n\nCreate a standalone component that imports the chart module:\n\n```typescript\nimport { Component, ViewEncapsulation } from '@angular/core';\nimport { ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n imports: [ChartAllModule, StockChartAllModule],\n standalone: true,\n selector: 'app-stock',\n template: `\u003cejs-stockchart id='chart-container'>\u003c/ejs-stockchart>`,\n encapsulation: ViewEncapsulation.None\n})\nexport class StockChartComponent {}\n```\n\nAdd to your `index.html`:\n\n```html\n\u003capp-stock>\u003c/app-stock>\n```\n\nRun your application:\n\n```bash\nng serve\n```\n\nThe chart renders with default styling and empty data.\n\n## Data Binding\n\nStock Chart needs data in an array of objects with OHLC (Open, High, Low, Close) values and a date field.\n\n### Data Format\n\n```typescript\ninterface StockData {\n x: Date; // Date for x-axis\n open: number; // Opening price\n high: number; // Highest price\n low: number; // Lowest price\n close: number; // Closing price\n volume?: number; // Optional volume data\n}\n```\n\n### Binding Data from Array\n\n```typescript\nimport { Component, ViewEncapsulation } from '@angular/core';\nimport { ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n imports: [ChartAllModule, StockChartAllModule],\n standalone: true,\n selector: 'app-stock',\n template: `\n \u003cejs-stockchart id='chart-container' [dataSource]='chartData'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series [dataSource]='chartData' type='Candle'\n xName='x' high='high' low='low' \n open='open' close='close'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n \u003c/ejs-stockchart>\n `,\n encapsulation: ViewEncapsulation.None\n})\nexport class StockChartComponent {\n chartData = [\n { x: new Date(2023, 0, 1), open: 100, high: 105, low: 95, close: 102 },\n { x: new Date(2023, 0, 2), open: 102, high: 108, low: 100, close: 105 },\n { x: new Date(2023, 0, 3), open: 105, high: 110, low: 103, close: 108 }\n ];\n}\n```\n\n**Key Points:**\n- `dataSource` can be on the chart or series level\n- Series `xName` property maps the date field\n- OHLC fields (high, low, open, close) are specified in series config\n- Data should be sorted by date (ascending)\n\n**Tips:**\n- Parse date strings from API to Date objects\n- Handle async loading with observables\n- Consider filtering large datasets (10k+ points may impact performance)\n\n### Binding with DataManager\n\nFor server-side data operations (filtering, sorting):\n\n```typescript\nimport { Component, ViewEncapsulation } from '@angular/core';\nimport { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';\nimport { ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n imports: [ChartAllModule, StockChartAllModule],\n standalone: true,\n selector: 'app-stock',\n template: `\n \u003cejs-stockchart\n id=\"stockChartSpline\"\n [enablePeriodSelector]=\"enable\"\n [chartArea]=\"chartArea\"\n [primaryXAxis]=\"primaryXAxis\"\n [primaryYAxis]=\"primaryYAxis\"\n [seriesType]=\"seriesType\"\n [indicatorType]=\"indicatorType\">\n\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series\n [dataSource]=\"dataManager\"\n [query]=\"query\"\n type=\"Line\"\n xName=\"OrderDate\"\n yName=\"Freight\">\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\n \u003c/ejs-stockchart>\n `,\n encapsulation: ViewEncapsulation.None\n})\nexport class StockChartComponent {\n public dataManager: DataManager = new DataManager({\n url: 'https://services.syncfusion.com/angular/production/api/orders'\n });\n\n public query: Query = new Query().take(50);\n\npublic seriesType: string[] = ['Spline'];\n public indicatorType: string[] = [];\n\n\n public chartArea: object = {\n border: { width: 0 }\n };\n\n public primaryXAxis: object = {\n valueType: 'DateTime',\n crosshairTooltip: { enable: true },\n majorGridLines: { width: 0 }\n };\n\n public primaryYAxis: object = {\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 }\n };\n\n public enable: boolean = true;\n}\n```\n\n## Verifying Your Setup\n\n### Check 1: Module Imports\n\nEnsure both `ChartAllModule` and `StockChartAllModule` are in your `imports` array:\n\n```typescript\nimports: [ChartAllModule, StockChartAllModule, ...otherModules]\n```\n\n### Check 2: Template Structure\n\nVerify your template has:\n- `\u003cejs-stockchart>` root element\n- `\u003ce-stockchart-series-collection>` container\n- At least one `\u003ce-stockchart-series>` with type and data fields\n\n### Check 3: Data Format\n\nConfirm your data includes:\n- `x` property with Date objects\n- `high`, `low`, `open`, `close` numeric values\n- Data sorted by date (ascending order recommended)\n\n### Check 4: Visible Chart\n\nAfter `ng serve`, your browser should show a chart container with candlestick series.\n\n**If you see a blank container:**\n- Check browser console for errors\n- Verify CSS imports are loaded (Syncfusion theme CSS)\n- Ensure data has non-zero values\n\n**If you see \"No data\" message:**\n- Verify data is being assigned to `chartData` property\n- Check that `[dataSource]` binding is correct\n- Ensure property names match (case-sensitive)\n\n## Common Initialization Issues\n\n**Issue: \"Cannot find module '@syncfusion/ej2-angular-charts'\"**\n- Solution: Run `npm install @syncfusion/ej2-angular-charts`\n- Or use: `ng add @syncfusion/ej2-angular-charts`\n\n**Issue: Chart appears but no data renders**\n- Solution: Verify `xName` and OHLC field names match your data\n- Check that data values are not null/undefined\n\n**Issue: Dates not formatting correctly**\n- Solution: Ensure date field uses JavaScript Date objects, not strings\n- Use: `new Date(dateString)` to convert strings\n\n**Issue: Chart is too small or not visible**\n- Solution: Set explicit `height` and `width` on `ejs-stockchart`\n- Example: `\u003cejs-stockchart height='400px' width='100%'>\u003c/ejs-stockchart>`\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":8257,"content_sha256":"2e608eb2c1e8fd10af87d9e54749f770b12078696a6a26fd2532c9e8ad46f7dc"},{"filename":"references/interactive-features.md","content":"# Interactive Features\n\n## Table of Contents\n- [Overview](#overview)\n- [Range Selector](#range-selector)\n - [Basic Range Selector](#basic-range-selector)\n- [Period Selector](#period-selector)\n - [Basic Period Selector](#basic-period-selector)\n - [Period Selector with Custom Buttons](#period-selector-with-custom-buttons)\n- [Tooltips](#tooltips)\n - [Enable Tooltips](#enable-tooltips)\n - [Custom Tooltip Format](#custom-tooltip-format)\n - [Tooltip Styling](#tooltip-styling)\n - [Shared Tooltip (All Series at Once)](#shared-tooltip-all-series-at-once)\n- [Crosshair](#crosshair)\n - [Enable Crosshair](#enable-crosshair)\n - [Crosshair with Custom Styling](#crosshair-with-custom-styling)\n - [Crosshair + Tooltip Integration](#crosshair--tooltip-integration)\n- [Data Labels](#data-labels)\n - [Enable Data Labels](#enable-data-labels)\n - [Data Label Format](#data-label-format)\n - [Formatted Data Labels](#formatted-data-labels)\n- [User Interactions](#user-interactions)\n - [Zooming](#zooming)\n - [Panning](#panning)\n- [Events](#events)\n - [onChartMouseMove](#onchartmousemove)\n - [onSeriesRender](#onseriesrender)\n - [onTooltipRender](#ontooltiprender)\n- [Complete Interactive Example](#complete-interactive-example)\n\n\n## Overview\n\nInteractive features allow users to explore financial data effectively. Stock Chart provides:\n- **Range Selector:** Date range selection buttons\n- **Period Selector:** Quick timeframe shortcuts (1M, 3M, 1Y, All)\n- **Tooltips:** Value display on hover\n- **Crosshair:** Precise value inspection\n- **Data Labels:** Display values on chart\n- **Events:** Respond to user actions\n\n---\n\n## Range Selector\n\nRange Selector displays buttons to select date ranges, common in stock chart applications.\n\n### Basic Range Selector\n\n```typescript\n\u003cejs-stockchart>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series [dataSource]='chartData' type='Candle' xName='x' \n high='high' low='low' open='open' close='close'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>\n```\n\n**Result:** Buttons showing \"1M\", \"3M\", \"6M\", \"1Y\", \"All\" above the chart. Clicking each filters data to that range.\n\n## Period Selector\n\nPeriod Selector provides quick buttons for common time periods (alternative to Range Selector or used together).\n\n### Basic Period Selector\n\n```typescript\n\u003cejs-stockchart [periods]='periods'>\n\u003c/ejs-stockchart>\n\nthis.periods = [\n { intervalType: 'Minutes', interval: 1, text: '1m' },\n { intervalType: 'Minutes', interval: 30, text: '30m' },\n { intervalType: 'Hours', interval: 1, text: '1H' },\n { intervalType: 'Hours', interval: 12, text: '12H', selected: true },\n { intervalType: 'Auto', text: '1D' }\n];\n```\n\n### Period Selector with Custom Buttons\n\n```typescript\n\u003cejs-stockchart [periods]='periods'>\nthis.periods = [\n { text: \"1M\", interval: 1, intervalType: \"Months\" },\n { text: \"3M\", interval: 3, intervalType: \"Months\" },\n { text: \"6M\", interval: 6, intervalType: \"Months\" },\n { text: \"1Y\", interval: 1, intervalType: \"Years\" }\n ]'\n```\n\n## Tooltips\n\nTooltips display detailed information when users hover over data points.\n\n### Enable Tooltips\n\n```typescript\n\u003cejs-stockchart [tooltip]='{ enable: true }'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle' xName='x' \n high='high' low='low' open='open' close='close'\n name='Stock A'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>\n```\n\n**User Interaction:** Hover over a candle → tooltip appears showing OHLC values\n\n### Custom Tooltip Format\n\n```typescript\n\u003cejs-stockchart [tooltip]='{ \n enable: true,\n format: '\u003cb>${point.x}\u003c/b>\u003cbr/>O: ${point.open} | H: ${point.high} | L: ${point.low} | C: ${point.close}'\n}'>\n\u003c/ejs-stockchart>\n```\n\n**Placeholders:**\n- `${point.x}`: Date/x-value\n- `${point.y}`: Y-value\n- `${point.open}`: Open price\n- `${point.high}`: High price\n- `${point.low}`: Low price\n- `${point.close}`: Close price\n- `${series.name}`: Series name\n\n### Tooltip Styling\n\n```typescript\n[tooltip]='{ \n enable: true,\n textStyle: {\n color: \"#FFFFFF\",\n fontFamily: \"Arial\",\n size: \"13px\"\n },\n opacity: 0.95,\n border: { \n color: \"#333333\",\n width: 1\n }\n}'\n```\n\n### Shared Tooltip (All Series at Once)\n\n```typescript\n[tooltip]='{ \n enable: true,\n shared: true // Show all series values in one tooltip\n}'\n```\n\n---\n\n## Crosshair\n\nCrosshair helps users pinpoint exact values by showing lines on both axes.\n\n### Enable Crosshair\n\n```typescript\n\u003cejs-stockchart [crosshair]='{ \n enable: true,\n lineType: \"Both\" // Vertical, Horizontal, Both\n}'>\n\u003c/ejs-stockchart>\n```\n\n### Crosshair with Custom Styling\n\n```typescript\n[crosshair]='{ \n enable: true,\n lineType: \"Both\",\n line: { \n width: 1, \n color: \"#FF0000\",\n dashArray: \"0\"\n }\n}'\n```\n\n### Crosshair + Tooltip Integration\n\n```typescript\n\u003cejs-stockchart \n [crosshair]='{ \n enable: true, \n lineType: \"Vertical\",\n line: { width: 1, color: \"#0099FF\" }\n }'\n [tooltip]='{ \n enable: true,\n format: 'High: ${point.high}\u003cbr/>Low: ${point.low}\u003cbr/>Close: ${point.close}'\n }'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle' xName='x' \n high='high' low='low' open='open' close='close'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>\n```\n\n**User Interaction:** Move mouse over chart → crosshair appears with tooltip showing precise OHLC values\n\n---\n\n## Data Labels\n\nDisplay values directly on chart elements (candles, lines, columns).\n\n### Enable Data Labels\n\n```typescript\n\u003ce-stockchart-series type='Candle' xName='x' \n high='high' low='low' open='open' close='close'\n [dataLabel]='{ visible: true }'>\n\u003c/e-stockchart-series>\n```\n\n### Data Label Format\n\n```typescript\n[dataLabel]='{ \n visible: true,\n position: \"Middle\" // Top, Middle, Bottom\n}'\n```\n\n### Formatted Data Labels\n\n```typescript\n[dataLabel]='{ \n visible: true,\n format: \"${point.close}\",\n position: \"Top\",\n font: { \n color: \"#333333\",\n size: \"12px\"\n }\n}'\n```\n\n**When to Use Data Labels:**\n- Small datasets (\u003c 50 points)\n- Highlighting specific values\n- Printed or shared reports\n- **Avoid:** Large datasets (100+ points cause visual clutter)\n\n---\n\n## User Interactions\n\n### Zooming\n\nEnable users to zoom into specific time ranges:\n\n```typescript\n\u003cejs-stockchart [zoomSettings]='{ \n enableSelectionZooming: true,\n enablePan: true,\n mode: \"XY\",\n enableScrollbar: true\n}'>\n\u003c/ejs-stockchart>\n```\n\n**User Interactions:**\n- **Drag to zoom:** Select area with mouse, release to zoom\n- **Pan after zoom:** Drag to move around zoomed area\n- **Scrollbar:** Slide scrollbar to navigate\n\n### Panning\n\nAllow users to scroll horizontally through time:\n\n```typescript\n[zoomSettings]='{ \n enablePan: true,\n enableScrollbar: true\n}'\n```\n\n---\n\n## Events\n\nRespond to user interactions with events:\n\n### onChartMouseMove\n\nTrack mouse position over chart:\n\n```typescript\n\u003cejs-stockchart (mouseMove)='onChartMouseMove($event)'>\n\u003c/ejs-stockchart>\n```\n\n```typescript\nonChartMouseMove(args: any) {\n console.log('Mouse position:', args);\n}\n```\n\n### onSeriesRender\n\nAccess series when rendering:\n\n```typescript\n\u003cejs-stockchart>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle' (seriesRender)='seriesRender($event)'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>\n```\n\n```typescript\nseriesRender(args: ISeriesRenderEventArgs): void {\n if (args.series.index === 1) {\n argsseries.fill = '#00FF00';\n } \n}\n```\n\n### onTooltipRender\n\nCustomize tooltip content dynamically:\n\n```typescript\n\u003cejs-stockchart (tooltipRender)='onTooltipRender($event)'>\n\u003c/ejs-stockchart>\n```\n\n```typescript\nonTooltipRender(args: ITooltipRenderEventArgs): void {\n // Customize tooltip before displaying\n if (args.data.pointIndex % 2 === 0) {\n args.text = 'Custom: ' + args.text;\n }\n}\n```\n\n---\n\n## Complete Interactive Example\n\nCombining all interactive features:\n\n```typescript\n\u003cejs-stockchart \n id='stockchart'\n [dataSource]='data'\n [periods]='periods'\n [crosshair]='{ enable: true, lineType: \"Vertical\" }'\n [tooltip]='{ \n enable: true,\n format: '\u003cb>Date:\u003c/b> ${point.x}\u003cbr/>\u003cb>O:\u003c/b> ${point.open} \u003cb>H:\u003c/b> ${point.high}\u003cbr/>\u003cb>L:\u003c/b> ${point.low} \u003cb>C:\u003c/b> ${point.close}'\n }'\n [zoomSettings]='{ \n enableSelectionZooming: true,\n mode: \"XY\",\n enableScrollbar: true\n }'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle' xName='x' \n high='high' low='low' open='open' close='close'\n name='AAPL'>\n \u003c/e-stockchart-series> \n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>\n\nthis.periods = [\n { intervalType: 'Minutes', interval: 1, text: '1m' },\n { intervalType: 'Minutes', interval: 30, text: '30m' },\n { intervalType: 'Hours', interval: 1, text: '1H' },\n { intervalType: 'Hours', interval: 12, text: '12H', selected: true },\n { intervalType: 'Auto', text: '1D' }\n];\n```\n\n**User Experience:**\n1. See last year of data\n2. Click \"1M\" to zoom to recent month\n3. Hover over candle → crosshair + tooltip appear\n4. Drag to zoom into specific period\n5. Use scrollbar to pan through data\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":9601,"content_sha256":"ff8225d9c5d54775898c952d4870d87a05c2d2bb1fa667e0bc7d6673848c91ff"},{"filename":"references/legend.md","content":"# Legend and Series Management\n\nLearn how to configure legends to display series information and allow users to toggle series visibility.\n\n## Table of Contents\n- [Basic Legend Setup](#basic-legend-setup)\n - [Enable Legend](#enable-legend)\n- [Legend Positioning](#legend-positioning)\n - [Legend Positioning](#position-options)\n - [Examples by Position](#examples-by-position)\n- [Legend Alignment](#legend-alignment)\n- [Legend Customization](#legend-customization)\n - [Legend Size and Padding](#legend-size-and-padding)\n - [Legend Item Size](#legend-item-size)\n - [Custom Font and Color](#custom-font-and-color)\n - [Background and Border](#background-and-border)\n- [Series Icon Shapes](#series-icon-shapes)\n - [Default Shapes](#default-shapes)\n - [Custom Shape Per Series](#custom-shape-per-series)\n- [Interactive Legend: Toggle Series](#interactive-legend-toggle-series)\n - [Enable Click to Toggle](#enable-click-to-toggle)\n - [Default Visibility Control](#default-visibility-control)\n - [Programmatic Toggle](#programmatic-toggle)\n- [Legend with Multiple Series](#legend-with-multiple-series)\n - [Organizing Many Series](#organizing-many-series)\n - [Wrapping Legend Items](#wrapping-legend-items)\n- [Common Legend Patterns](#common-legend-patterns)\n - [Pattern 1: Simple Legend Below Chart](#pattern-1-simple-legend-below-chart)\n - [Pattern 2: Compact Right-Side Legend](#pattern-2-compact-right-side-legend)\n - [Pattern 3: Top Legend with Toggle](#pattern-3-top-legend-with-toggle)\n - [Pattern 4: Custom Positioned Legend (Overlay)](#pattern-4-custom-positioned-legend-overlay)\n- [Troubleshooting](#troubleshooting)\n\n## Basic Legend Setup\n\n### Enable Legend\n\n```typescript\n\u003cejs-stockchart [legendSettings]='{ visible: true }'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle' xName='x' \n high='high' low='low' open='open' close='close' \n name='Stock A'>\n \u003c/e-stockchart-series>\n \u003ce-stockchart-series type='Line' xName='x' yName='ma20' \n name='MA 20'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>\n```\n\n**Key Properties:**\n- `visible`: Show/hide legend (true/false)\n- `name`: Series label displayed in legend\n- Each series can have different colors and styles shown in legend\n\n## Legend Positioning\n\n### Position Options\n\n```typescript\n[legendSettings]='{ \n position: \"Top\" // Top, Bottom, Right, Left, Custom\n}'\n```\n\n**Positions:**\n- `'Top'`: Above the chart\n- `'Bottom'`: Below the chart (default)\n- `'Right'`: Right side of chart\n- `'Left'`: Left side of chart\n- `'Custom'`: Manual x/y coordinates\n\n### Examples by Position\n\n**Top Position:**\n```typescript\n[legendSettings]='{ \n position: \"Top\",\n alignment: \"Center\"\n}'\n```\n\n**Right Position:**\n```typescript\n[legendSettings]='{ \n position: \"Right\",\n alignment: \"Far\" // Align to bottom of right side\n}'\n```\n\n**Custom Position:**\n```typescript\n[legendSettings]='{ \n position: \"Custom\",\n location: { x: 50, y: 20 } // 50px from left, 20px from top\n}'\n```\n\n## Legend Alignment\n\nAlign legend within its position:\n\n```typescript\n[legendSettings]='{ \n alignment: \"Near\" // Near, Center, Far\n}'\n```\n\n**For Top/Bottom Positioning:**\n- `'Near'`: Left side\n- `'Center'`: Middle (default)\n- `'Far'`: Right side\n\n**For Left/Right Positioning:**\n- `'Near'`: Top\n- `'Center'`: Middle (default)\n- `'Far'`: Bottom\n\n## Legend Customization\n\n### Legend Size and Padding\n\n```typescript\n[legendSettings]='{ \n visible: true,\n width: \"400px\", // Specific width\n height: \"60px\", // Specific height\n padding: 15 // Space around legend\n}'\n```\n\n### Legend Item Size\n\n```typescript\n[legendSettings]='{ \n shapeWidth: 12, // Icon width\n shapeHeight: 12\n}'\n```\n\n### Custom Font and Color\n\n```typescript\n\u003cejs-stockchart [legendSettings]='{ \n visible: true,\n textStyle: { \n color: \"#333333\",\n fontFamily: \"Arial\",\n size: \"14px\"\n }\n}'>\n\u003c/ejs-stockchart>\n```\n\n### Background and Border\n\n```typescript\n[legendSettings]='{ \n background: \"white\",\n border: { \n color: \"#CCCCCC\",\n width: 1\n }\n}'\n```\n\n## Series Icon Shapes\n\n### Default Shapes\n\n```typescript\n\u003ce-stockchart-series type='Candle' xName='x' high='high' low='low' open='open' close='close'\n name='Stock A'\n legendShape='SeriesType'> // Uses series type as shape\n\u003c/e-stockchart-series>\n```\n\n**Shape Options:**\n- `'SeriesType'`: Uses the series rendering type icon (default)\n- `'Circle'`: Circle icon\n- `'Rectangle'`: Square icon\n- `'VerticalLine'`: Vertical line\n- `'Triangle'`: Triangle\n- `'Diamond'`: Diamond\n- `'Cross'`: Cross/X shape\n\n### Custom Shape Per Series\n\n```typescript\n\u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle' xName='x' \n high='high' low='low' open='open' close='close'\n name='Price' legendShape='SeriesType'>\n \u003c/e-stockchart-series>\n \u003ce-stockchart-series type='Line' xName='x' yName='ma20'\n name='MA 20' legendShape='Circle'>\n \u003c/e-stockchart-series>\n \u003ce-stockchart-series type='Line' xName='x' yName='ma50'\n name='MA 50' legendShape='Triangle'>\n \u003c/e-stockchart-series>\n\u003c/e-stockchart-series-collection>\n```\n\n## Interactive Legend: Toggle Series\n\n### Enable Click to Toggle\n\n```typescript\n\u003cejs-stockchart [legendSettings]='{ \n visible: true,\n toggleVisibility: true\n}'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle' xName='x' \n high='high' low='low' open='open' close='close'\n name='Stock A' [visible]='true'>\n \u003c/e-stockchart-series>\n \u003ce-stockchart-series type='Line' xName='x' yName='ma20'\n name='MA 20' [visible]='true'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>\n```\n\n**User Interaction:** Click legend item → series appears/disappears\n\n### Default Visibility Control\n\n```typescript\n\u003ce-stockchart-series type='Line' xName='x' yName='volume'\n name='Volume' [visible]='false'> \u003c!-- Hidden by default -->\n\u003c/e-stockchart-series>\n```\n\n### Programmatic Toggle\n\n```typescript\nexport class StockChartComponent {\n @ViewChild('chart') chart: StockChartComponent;\n\n toggleSeries(index: number) {\n const series = this.chart.series[index];\n series.visible = !series.visible;\n this.chart.refresh();\n }\n}\n```\n\nTemplate:\n```typescript\n\u003cbutton (click)=\"toggleSeries(1)\">Toggle MA 20\u003c/button>\n```\n\n## Legend with Multiple Series\n\n### Organizing Many Series\n\nWhen you have 5+ series (price + 3 indicators + volume), legends help organize:\n\n```typescript\n\u003cejs-stockchart [legendSettings]='{ \n visible: true,\n position: \"Right\",\n width: \"200px\"\n}'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle' name='Stock Price'>\u003c/e-stockchart-series>\n \u003ce-stockchart-series type='Line' name='MA 20' yAxisName='secondary'>\u003c/e-stockchart-series>\n \u003ce-stockchart-series type='Line' name='MA 50' yAxisName='secondary'>\u003c/e-stockchart-series>\n \u003ce-stockchart-series type='Line' name='EMA 12' yAxisName='secondary'>\u003c/e-stockchart-series>\n \u003ce-stockchart-series type='Column' name='Volume' yAxisName='secondary'>\u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>\n```\n\n### Wrapping Legend Items\n\nFor many items in limited space:\n\n```typescript\n[legendSettings]='{ \n width: \"250px\"\n}'\n```\n\n## Common Legend Patterns\n\n### Pattern 1: Simple Legend Below Chart\n\n```typescript\n[legendSettings]='{ \n position: \"Bottom\",\n alignment: \"Center\",\n visible: true\n}'\n```\n\n### Pattern 2: Compact Right-Side Legend\n\n```typescript\n[legendSettings]='{ \n position: \"Right\",\n alignment: \"Center\",\n width: \"150px\",\n shapeWidth: 10,\n shapeHeight: 10\n}'\n```\n\n### Pattern 3: Top Legend with Toggle\n\n```typescript\n[legendSettings]='{ \n position: \"Top\",\n visible: true,\n toggleVisibility: true,\n textStyle: { size: \"12px\" }\n}'\n```\n\n### Pattern 4: Custom Positioned Legend (Overlay)\n\n```typescript\n[legendSettings]='{ \n position: \"Custom\",\n location: { x: 85, y: 10 },\n background: \"rgba(255, 255, 255, 0.9)\",\n border: { color: \"#CCCCCC\", width: 1 }\n}'\n```\n\n## Troubleshooting\n\n**Issue: Legend not showing**\n- Verify `visible: true`\n- Ensure series have `name` property set\n- Check browser console for errors\n\n**Issue: Legend items overlap chart**\n- Use `position: \"Right\"` or `\"Left\"` instead of overlaying\n- Or use `location` to move custom positioned legend\n\n**Issue: Legend items too cramped**\n- Increase `width` for horizontal legends\n- Use `mode: \"Vertical\"` to stack items\n- Reduce `padding` or `shapeWidth`\n\n**Issue: Series toggle doesn't work**\n- Enable `toggleSeriesVisibility: true`\n- Verify clicking legend item (not just hovering)\n- Check browser console for JavaScript errors\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":8857,"content_sha256":"be8354902573b7a013a8a0cb585a1a2ca8e73c25e6ddea07f23e210644725f6b"},{"filename":"references/series-types.md","content":"# Series Types\n\n## Table of Contents\n- [Overview](#overview)\n- [Line Series](#line-series)\n - [Basic Implementation](#basic-implementation)\n - [With Markers and Smooth Line](#with-markers-and-smooth-line)\n - [Customizing Line Appearance](#customizing-line-appearance)\n- [Spline Series](#spline-series)\n - [Basic Implementation](#basic-implementation-1)\n - [Smooth Trend with Tension Control](#smooth-trend-with-tension-control)\n - [With Markers](#with-markers)\n - [When to Use Spline vs Line](#when-to-use-spline-vs-line)\n- [Area Series](#area-series)\n - [Basic Implementation](#basic-implementation-2)\n - [Stacked Areas (Multiple Series)](#stacked-areas-multiple-series)\n - [Customizing Area Fill](#customizing-area-fill)\n- [HiLo Series](#hilo-series)\n - [Basic Implementation](#basic-implementation-3)\n - [Use Cases](#use-cases)\n- [HiLoOpenClose Series](#hiloopenclose-series)\n - [Basic Implementation](#basic-implementation-4)\n - [Visual Representation](#visual-representation)\n- [Hollow Candle Series](#hollow-candle-series)\n - [Basic Implementation](#basic-implementation-5)\n - [Visual Difference from Candle](#visual-difference-from-candle)\n - [Use Cases](#use-cases-1)\n- [Candle Series](#candle-series)\n - [Basic Implementation](#basic-implementation-6)\n - [Candle Visual Breakdown](#candle-visual-breakdown)\n - [Default Candle Colors](#default-candle-colors)\n - [Customizing Candle Colors](#customizing-candle-colors)\n - [Reading Candle Charts](#reading-candle-charts)\n- [Switching Series Dynamically](#switching-series-dynamically)\n- [Series Colors and Customization](#series-colors-and-customization)\n - [Individual Series Color](#individual-series-color)\n - [Series-Specific Properties](#series-specific-properties)\n\n---\n\n## Overview\n\nStock Chart supports 7 major series types for rendering financial data. Each type visualizes price movements differently and works best with specific use cases.\n\n| Series Type | Best For | Shows |\n|---|---|---|\n| **Candle** | OHLC data, price trends | Open, High, Low, Close as candles |\n| **HiLo** | Price range only | High and Low as bars |\n| **HiLoOpenClose** | OHLC without volume | Open, High, Low, Close as bars |\n| **Line** | Simple trends, moving averages | Price movement as lines |\n| **Spline** | Smooth trends | Price movement as smooth curves |\n| **Area** | Volume trends, cumulative values | Filled area under price curve |\n| **Hollow Candle** | OHLC with hollow candles | Same as Candle but without fill |\n\n---\n\n## Line Series\n\n**Use When:** Tracking simple price trends, displaying moving averages, or showing data with fewer visual details.\n\n### Basic Implementation\n\n```typescript\n\u003cejs-stockchart id='chart-container' [dataSource]='data'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Line' xName='x' yName='close'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>\n```\n\n**Key Properties:**\n- `type`: 'Line'\n- `yName`: Data field to plot on y-axis (typically closing price)\n- `xName`: Date field for x-axis\n- `marker`: Optional markers at data points\n\n### With Markers and Smooth Line\n\n```typescript\n\u003ce-stockchart-series type='Line' xName='x' yName='close'\n [marker]='{ visible: true, shape: \"Circle\", width: 4, height: 4 }'>\n\u003c/e-stockchart-series>\n```\n\n### Customizing Line Appearance\n\n```typescript\n\u003ce-stockchart-series type='Line' xName='x' yName='close'\n width='2' [marker]='{ visible: true }'\n dashArray='5'>\n\u003c/e-stockchart-series>\n```\n\n**Properties:**\n- `width`: Line thickness (default: 2)\n- `dashArray`: Dashed line pattern ('5', '5,5', etc.)\n- `marker.visible`: Show/hide data point markers\n- `marker.shape`: Circle, Rectangle, Triangle, Diamond, etc.\n\n---\n\n## Spline Series\n\n**Use When:** You want smooth interpolated curves between price points, creating visually appealing trends without breaking at data points.\n\n### Basic Implementation\n\n```typescript\n\u003ce-stockchart-series type='Spline' xName='x' yName='close'>\n\u003c/e-stockchart-series>\n```\n\nSpline automatically calculates smooth curves between points using interpolation algorithms.\n\n### Smooth Trend with Tension Control\n\n```typescript\n\u003ce-stockchart-series type='Spline' xName='x' yName='close'\n splineType='Natural'>\n\u003c/e-stockchart-series>\n```\n\n**Spline Types:**\n- `'Natural'`: Default smooth curve (recommended for most cases)\n- `'Monotonic'`: Smooth but prevents crossing axis unexpectedly\n- `'Cardinal'`: Uses tension property for curve tightness\n- `'Clamped'`: More pronounced curves at endpoints\n\n### With Markers\n\n```typescript\n\u003ce-stockchart-series type='Spline' xName='x' yName='close'\n splineType='Cardinal'\n [marker]='{ visible: true, shape: \"Circle\", width: 5, height: 5 }'>\n\u003c/e-stockchart-series>\n```\n\n**When to Use Spline vs Line:**\n- **Line:** Stock data (OHLC), when data points are important\n- **Spline:** Technical indicators, trends, smooth visualizations\n\n---\n\n## Area Series\n\n**Use When:** Showing volume trends, cumulative data, or emphasizing area under the curve.\n\n### Basic Implementation\n\n```typescript\n\u003ce-stockchart-series type='Area' xName='x' yName='close'>\n\u003c/e-stockchart-series>\n```\n\n### Stacked Areas (Multiple Series)\n\n```typescript\n\u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Area' xName='x' yName='close1' name='Stock A'>\n \u003c/e-stockchart-series>\n \u003ce-stockchart-series type='Area' xName='x' yName='close2' name='Stock B'>\n \u003c/e-stockchart-series>\n\u003c/e-stockchart-series-collection>\n```\n\n### Customizing Area Fill\n\n```typescript\n\u003ce-stockchart-series type='Area' xName='x' yName='close'\n fill='rgba(100, 150, 200, 0.3)'>\n\u003c/e-stockchart-series>\n```\n\n**Properties:**\n- `interior`: Fill color and opacity\n- `opacity`: Transparency level (0-1)\n- `border.color`: Line color around area\n\n---\n\n## HiLo Series\n\n**Use When:** Displaying price range (High and Low) without showing open/close values.\n\n### Basic Implementation\n\n```typescript\n\u003ce-stockchart-series type='Hilo' xName='x' high='high' low='low'>\n\u003c/e-stockchart-series>\n```\n\n**Data Format:**\n```typescript\n{ x: new Date(2023, 0, 1), high: 105, low: 95 }\n```\n\n### Use Cases\n- Showing price range with minimal visual clutter\n- Comparing multiple instruments' ranges\n- Focus on extreme values without OHLC details\n\n---\n\n## HiLoOpenClose Series\n\n**Use When:** Displaying complete OHLC data with high/low as vertical lines and open/close as horizontal ticks (bar-style, without volume indication).\n\n### Basic Implementation\n\n```typescript\n\u003ce-stockchart-series type='HiloOpenClose' xName='x' \n high='high' low='low' open='open' close='close'>\n\u003c/e-stockchart-series>\n```\n\n### Visual Representation\n- **Vertical Line:** High to Low range\n- **Left Tick:** Opening price\n- **Right Tick:** Closing price\n- **Color:** Green if close > open, red if close \u003c open\n\n---\n\n## Hollow Candle Series\n\n**Use When:** Displaying OHLC data with transparent (hollow) candles instead of filled candles. Often used to show sessions or alternative time periods.\n\n### Basic Implementation\n\n```typescript\n\u003ce-stockchart-series type='Candle' xName='x' \n high='high' low='low' open='open' close='close'\n enableSolidCandles='false'>\n\u003c/e-stockchart-series>\n```\n\n**Visual Difference from Candle:**\n- Candle: Filled rectangles (solid candles)\n- Hollow Candle: Outlined rectangles (transparent bodies)\n\n### Use Cases\n- Showing intra-session vs end-of-day\n- Comparing two periods with different visuals\n- Alternative rendering preference\n\n---\n\n## Candle Series\n\n**Use When:** Displaying traditional OHLC candlestick data. Most common for stock charts.\n\n### Basic Implementation\n\n```typescript\n\u003ce-stockchart-series type='Candle' xName='x' \n high='high' low='low' open='open' close='close'>\n\u003c/e-stockchart-series>\n```\n\n### Candle Visual Breakdown\n\n**Anatomy of a Candle:**\n- **Body (Rectangle):** Open to Close range\n - **Green/Up candle:** Close > Open (bullish)\n - **Red/Down candle:** Close \u003c Open (bearish)\n- **Wicks (Lines):** High and Low extremes\n - **Upper wick:** From Close (or Open) to High\n - **Lower wick:** From Open (or Close) to Low\n\n### Default Candle Colors\n\n```typescript\n// Green candle (up): Close > Open\n// Red candle (down): Close \u003c Open\n```\n\n### Customizing Candle Colors\n\n```typescript\n\u003ce-stockchart-series type='Candle' xName='x' \n high='high' low='low' open='open' close='close'\n bearFillColor='#FF6B6B' bullFillColor='#51CF66'>\n\u003c/e-stockchart-series>\n```\n\n**Properties:**\n- `bearFillColor`: Color when close \u003c open (default: red)\n- `bullFillColor`: Color when close > open (default: green)\n- `enableSolidCandles`: Use filled candles (true) or hollow (false)\n\n### Reading Candle Charts\n\n**Up Candle (Green):**\n- **Body:** Shows opening and closing prices\n- **Upper wick:** Distance to highest price\n- **Lower wick:** Usually small (floor support)\n- **Interpretation:** Buyers in control, bullish\n\n**Down Candle (Red):**\n- **Body:** Shows opening and closing prices\n- **Lower wick:** Distance to lowest price\n- **Upper wick:** Usually small (ceiling resistance)\n- **Interpretation:** Sellers in control, bearish\n\n---\n\n## Switching Series Dynamically\n\nAllow users to switch between series types via buttons or dropdown:\n\n```typescript\nimport { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { StockChartComponent } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n selector: 'app-stock',\n template: `\n \u003cdiv>\n \u003cbutton (click)=\"changeSeries('Candle')\">Candlestick\u003c/button>\n \u003cbutton (click)=\"changeSeries('Line')\">Line\u003c/button>\n \u003cbutton (click)=\"changeSeries('Area')\">Area\u003c/button>\n \u003c/div>\n \u003cejs-stockchart #chart [dataSource]='data'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series [type]='seriesType' xName='x' \n yName='close' high='high' low='low' open='open' close='close'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n \u003c/ejs-stockchart>\n `,\n encapsulation: ViewEncapsulation.None\n})\nexport class StockChartComponent {\n @ViewChild('chart') chart: StockChartComponent;\n \n seriesType = 'Candle';\n data = [...]; // Your data\n\n changeSeries(type: string) {\n this.seriesType = type;\n // Chart re-renders with new series type\n }\n}\n```\n\n**Performance Note:** Changing series type on large datasets (10k+ points) may cause lag. Consider debouncing or showing loading indicator.\n\n---\n\n## Series Colors and Customization\n\n\n### Individual Series Color\n\n```typescript\n\u003ce-stockchart-series type='Line' xName='x' yName='close'\n fill='#4ECDC4'>\n\u003c/e-stockchart-series>\n```\n\n### Series-Specific Properties\n\n```typescript\n\u003ce-stockchart-series type='Candle' xName='x' \n high='high' low='low' open='open' close='close'\n width='2'\n bearFillColor='#FF0000'\n bullFillColor='#00FF00'\n [border]='borderConfig'\n >\n\u003c/e-stockchart-series>\nexport class StockChartComponent {\n public borderConfig: any = {\n width: 2\n };\n}\n```\n\n**Properties Across Series:**\n- `fill`: Main color\n- `width`: Line/border thickness\n- `opacity`: Transparency (0-1)\n- `dashArray`: Dashed pattern for lines\n- `border`: Line border properties\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":11191,"content_sha256":"d3a3db1d003a0eec611d461b83cc39cbfce6dc2e11e254959d4af39d444e8ad6"},{"filename":"references/technical-indicators.md","content":"# Technical Indicators\n\n## Table of Contents\n- [Overview](#overview)\n- [Simple Moving Average (SMA)](#simple-moving-average-sma)\n - [Basic SMA](#basic-sma)\n - [SMA Parameters](#sma-parameters)\n - [Multiple SMAs for Trend Confirmation](#multiple-smas-for-trend-confirmation)\n - [SMA Trading Signals](#sma-trading-signals)\n- [Exponential Moving Average (EMA)](#exponential-moving-average-ema)\n - [Basic EMA](#basic-ema)\n - [SMA vs EMA Comparison](#sma-vs-ema-comparison)\n- [Bollinger Bands (BB)](#bollinger-bands-bb)\n - [Basic Bollinger Bands](#basic-bollinger-bands)\n - [Interpreting Bollinger Bands](#interpreting-bollinger-bands)\n - [Customizing Band Appearance](#customizing-band-appearance)\n- [Relative Strength Index (RSI)](#relative-strength-index-rsi)\n - [Basic RSI](#basic-rsi)\n - [RSI Reference Lines](#rsi-reference-lines)\n - [RSI Signals](#rsi-signals)\n- [MACD](#macd)\n - [Basic MACD](#basic-macd)\n - [MACD Signals](#macd-signals)\n - [MACD with Custom Parameters](#macd-with-custom-parameters)\n- [Other Indicators](#other-indicators)\n - [Stochastic](#stochastic)\n - [Average True Range (ATR)](#average-true-range-atr)\n - [Accumulation/Distribution Line (ADL)](#accumulationdistribution-line-adl)\n - [Accelerator Oscillator](#accelerator-oscillator)\n- [Multiple Indicators](#multiple-indicators)\n- [Customizing Indicators](#customizing-indicators)\n - [Indicator Colors](#indicator-colors)\n - [Dashed Lines](#dashed-lines)\n - [Indicator Visibility Toggle](#indicator-visibility-toggle)\n- [Common Indicator Combinations](#common-indicator-combinations)\n - [Combination 1: Trend Trading](#combination-1-trend-trading)\n - [Combination 2: Mean Reversion](#combination-2-mean-reversion)\n - [Combination 3: Momentum](#combination-3-momentum)\n\n\n## Overview\n\nTechnical Indicators help identify trends, momentum, and trading signals. Stock Chart supports indicators like:\n- **Trend Indicators:** SMA, EMA, KAMA, TMA\n- **Volatility Indicators:** Bollinger Bands, Accelerator Bands, ATR\n- **Momentum Indicators:** RSI, MACD, Stochastic, CCI\n- **Volume Indicators:** ADX, ADL, OBV, Alligator\n\nEach indicator calculates values from price data and displays on a separate y-axis (secondary axis).\n\n---\n\n## Simple Moving Average (SMA)\n\nSimple Moving Average smooths price data by averaging prices over a period.\n\n### Basic SMA\n\n```typescript\n\u003cejs-stockchart>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle' xName='x' \n high='high' low='low' open='open' close='close'\n name='Price'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n \u003ce-stockchart-indicators>\n \u003ce-stockchart-indicator type='Sma' field='Close' period=20 seriesName='SMA 20'>\n \u003c/e-stockchart-indicator>\n \u003c/e-stockchart-indicators>\n\u003c/ejs-stockchart>\n```\n\n**Result:** Line overlay on price showing 20-period moving average\n\n### SMA Parameters\n\n```typescript\n\u003ce-indicator \n type='Sma' \n field='Close' // Price field to average\n period=50 // Number of periods (50-day MA)\n seriesName='MA 50' \n yAxisName='secondary' // Optional: separate axis for indicator\n>\n\u003c/e-indicator>\n```\n\n### Multiple SMAs for Trend Confirmation\n\n```typescript\n\u003ce-stockchart-indicators>\n \u003ce-stockchart-indicator type='Sma' field='Close' period=20 seriesName='SMA 20'>\u003c/e-stockchart-indicator>\n \u003ce-stockchart-indicator type='Sma' field='Close' period=50 seriesName='SMA 50'>\u003c/e-stockchart-indicator>\n \u003ce-stockchart-indicator type='Sma' field='Close' period=200 seriesName='SMA 200'>\u003c/e-stockchart-indicator>\n\u003c/e-stockchart-indicators>\n```\n\n**Use:** Compare multiple timeframes (20-day, 50-day, 200-day crossovers signal trends)\n\n### SMA Trading Signals\n\n```typescript\n// Golden Cross: 50-MA crosses above 200-MA (bullish)\n// Death Cross: 50-MA crosses below 200-MA (bearish)\n// Price above MA: Uptrend\n// Price below MA: Downtrend\n```\n\n---\n\n## Exponential Moving Average (EMA)\n\nEMA gives more weight to recent prices, responding faster than SMA to price changes.\n\n### Basic EMA\n\n```typescript\n\u003ce-indicator \n type='Ema' \n field='Close' \n period=12 \n seriesName='EMA 12'>\n\u003c/e-indicator>\n```\n\n### SMA vs EMA Comparison\n\n```typescript\n\u003ce-stockchart-indicators>\n \u003ce-stockchart-indicator type='Sma' field='Close' period=20 seriesName='SMA 20'>\u003c/e-stockchart-indicator>\n \u003ce-stockchart-indicator type='Ema' field='Close' period=20 seriesName='EMA 20'>\u003c/e-stockchart-indicator>\n\u003c/e-stockchart-indicators>\n```\n\n**Difference:**\n- **SMA:** Weighted equally, slower to respond\n- **EMA:** Recent prices weighted more, faster to respond to price changes\n\n**Use EMA when:** You need responsive indicators for fast-moving markets\n\n---\n\n## Bollinger Bands (BB)\n\nBollinger Bands show volatility and potential reversal points using upper/middle/lower bands.\n\n### Basic Bollinger Bands\n\n```typescript\n\u003ce-stockchart-indicator \n type='BollingerBands' \n field='Close' \n period=20\n seriesName='BB'\n standardDeviation=2>\n\u003c/e-stockchart-indicator>\n```\n\n**Result:** Three bands:\n- **Middle Band:** 20-period SMA\n- **Upper Band:** Middle + (2 × Standard Deviation)\n- **Lower Band:** Middle − (2 × Standard Deviation)\n\n### Interpreting Bollinger Bands\n\n```typescript\n// Price touches upper band: Potentially overbought, consider selling\n// Price touches lower band: Potentially oversold, consider buying\n// Bands expanding: Increasing volatility\n// Bands contracting: Decreasing volatility\n```\n\n### Customizing Band Appearance\n\n```typescript\n\u003ce-stockchart-indicator\n type='BollingerBands' \n field='Close' \n period=20\n standardDeviation=2\n seriesName='BB'\n [lowerLine]='{ color: \"#FF0000\", dashArray: \"2,2\" }'\n [upperLine]='{ color: \"#00FF00\", dashArray: \"2,2\" }'>\n\u003c/e-stockchart-indicator>\n```\n\n---\n\n## Relative Strength Index (RSI)\n\nRSI measures momentum, showing overbought (>70) and oversold (\u003c30) conditions.\n\n### Basic RSI\n\n```typescript\n\u003ce-stockchart-indicator \n type='Rsi' \n field='Close' \n period=14 \n seriesName='RSI'>\n\u003c/e-stockchart-indicator>\n```\n\n**Result:** Oscillator ranging 0-100 on secondary y-axis\n\n### RSI Reference Lines\n\n```typescript\n\u003cejs-stockchart>\n \u003ce-stockchart-indicators>\n \u003ce-stockchart-indicator type='Rsi' field='Close' period=14 seriesName='RSI'>\u003c/e-stockchart-indicator>\n \u003c/e-stockchart-indicators>\n \u003ce-stockchart-series-collection>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>\n```\n\n### RSI Signals\n\n```typescript\n// RSI > 70: Overbought, potential sell signal\n// RSI \u003c 30: Oversold, potential buy signal\n// RSI crossing 50: Momentum shift (bullish if crossing up, bearish if crossing down)\n// Divergence: RSI doesn't confirm new price high/low (potential reversal)\n```\n\n---\n\n## MACD\n\nMACD (Moving Average Convergence Divergence) identifies trend changes and momentum.\n\n### Basic MACD\n\n```typescript\n\u003ce-stockchart-indicator\n type='Macd' \n field='Close'\n seriesName='MACD'\n fastPeriod=12\n slowPeriod=26>\n\u003c/e-stockchart-indicator>\n```\n\n**Result:** Three lines on secondary y-axis:\n- **MACD Line:** 12-EMA − 26-EMA\n- **Signal Line:** 9-EMA of MACD\n- **Histogram:** MACD − Signal (vertical bars)\n\n### MACD Signals\n\n```typescript\n// MACD > Signal: Bullish, uptrend\n// MACD \u003c Signal: Bearish, downtrend\n// MACD crosses above Signal: Potential buy signal\n// MACD crosses below Signal: Potential sell signal\n// Positive histogram: Bullish momentum\n// Negative histogram: Bearish momentum\n```\n\n### MACD with Custom Parameters\n\n```typescript\n// Standard: Fast=12, Slow=26, Signal=9\n// Fast markets: Fast=5, Slow=13, Signal=5\n// Slower markets: Fast=19, Slow=39, Signal=9\n\n\u003ce-stockchart-indicator\n type='Macd' \n field='Close'\n fastPeriod=5 // Changed from 12\n slowPeriod=13 // Changed from 26\n signalPeriod=5 // Changed from 9\n seriesName='MACD Fast'>\n\u003c/e-stockchart-indicator>\n```\n\n---\n\n## Other Indicators\n\n### Stochastic\n\nCompares price to price range over period, identifies overbought/oversold.\n\n```typescript\n\u003ce-stockchart-indicator \n type='Stochastic' \n field='Close' \n period=14\n kPeriod=3\n dPeriod=3\n seriesName='Stochastic'>\n\u003c/e-stockchart-indicator>\n```\n\n**Output:** K% and D% lines (0-100 scale)\n\n### Average True Range (ATR)\n\nMeasures volatility without direction.\n\n```typescript\n\u003ce-stockchart-indicator\n type='Atr' \n field='Close' \n period=14\n seriesName='ATR'>\n\u003c/e-stockchart-indicator>\n```\n\n### Accumulation/Distribution Line (ADL)\n\nRelates price and volume to identify buying/selling pressure.\n\n```typescript\n\u003ce-stockchart-indicator \n type='Adl' \n field='Close'\n seriesName='ADL'>\n\u003c/e-stockchart-indicator>\n```\n\n### Accelerator Oscillator\n\nMeasures acceleration/deceleration of price.\n\n```typescript\n\u003ce-stockchart-indicator\n type='AcceleratorBands' \n field='Close'\n seriesName='Accelerator'\n period=34>\n\u003c/e-stockchart-indicator>\n```\n\n---\n\n## Multiple Indicators\n\nCombine indicators for comprehensive analysis:\n\n```typescript\n\u003cejs-stockchart>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle' xName='x' \n high='high' low='low' open='open' close='close'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n \u003ce-stockchart-indicators>\n \u003c!-- Trend -->\n \u003ce-stockchart-indicator type='Sma' field='Close' period=20 seriesName='MA 20'>\u003c/e-stockchart-indicator>\n \n \u003c!-- Volatility -->\n \u003ce-stockchart-indicator type='BollingerBands' field='Close' period=20 seriesName='BB'>\u003c/e-stockchart-indicator>\n \n \u003c!-- Momentum -->\n \u003ce-stockchart-indicator type='Rsi' field='Close' period=14 seriesName='RSI'>\u003c/e-stockchart-indicator>\n \n \u003c!-- Trend Change -->\n \u003ce-stockchart-indicator type='Macd' field='Close' seriesName='MACD'>\u003c/e-stockchart-indicator>\n \u003c/e-stockchart-indicators>\n\u003c/ejs-stockchart>\n```\n\n**Chart Layout:**\n- Primary Y-axis: Price with candles and SMA 20\n- Secondary Y-axis: Bollinger Bands bands\n- Tertiary Y-axis: RSI (0-100)\n- Quaternary Y-axis: MACD histogram\n\n---\n\n## Customizing Indicators\n\n### Indicator Colors\n\n```typescript\n\u003ce-stockchart-indicator\n type='Sma' \n field='Close' \n period=20 \n seriesName='SMA 20'\n fill='#0099FF'\n width=2>\n\u003c/e-stockchart-indicator>\n```\n\n### Dashed Lines\n\n```typescript\n\u003ce-stockchart-indicator\n type='Ema' \n field='Close' \n period=12\n dashArray='5,5'\n width=2>\n\u003c/e-stockchart-indicator>\n```\n\n### Indicator Visibility Toggle\n\n```typescript\nexport class StockChartComponent {\n showSMA = true;\n showBB = true;\n showRSI = false;\n\n toggleIndicator(indicator: string) {\n if (indicator === 'SMA') this.showSMA = !this.showSMA;\n if (indicator === 'BB') this.showBB = !this.showBB;\n if (indicator === 'RSI') this.showRSI = !this.showRSI;\n // Update chart by changing data binding\n }\n}\n```\n\nTemplate:\n```typescript\n\u003cbutton (click)=\"toggleIndicator('SMA')\">Toggle SMA\u003c/button>\n\u003cbutton (click)=\"toggleIndicator('BB')\">Toggle BB\u003c/button>\n\u003cbutton (click)=\"toggleIndicator('RSI')\">Toggle RSI\u003c/button>\n\n\u003cejs-stockchart [showSMA]='showSMA' [showBB]='showBB' [showRSI]='showRSI'>\n \u003c!-- Series and indicators -->\n\u003c/ejs-stockchart>\n```\n\n---\n\n## Common Indicator Combinations\n\n### Combination 1: Trend Trading\n```typescript\n// SMA 20/50 crossover\n\u003ce-stockchart-indicator type='Sma' field='Close' period=20 seriesName='SMA 20'>\u003c/e-stockchart-indicator>\n\u003ce-stockchart-indicator type='Sma' field='Close' period=50 seriesName='SMA 50'>\u003c/e-stockchart-indicator>\n```\n**Signal:** When SMA 20 crosses above SMA 50, enter long\n\n### Combination 2: Mean Reversion\n```typescript\n// Bollinger Bands with RSI\n\u003ce-stockchart-indicator type='BollingerBands' field='Close' period=20 seriesName='BB'>\u003c/e-stockchart-indicator>\n\u003ce-stockchart-indicator type='Rsi' field='Close' period=14 seriesName='RSI'>\u003c/e-stockchart-indicator>\n```\n**Signal:** Price near upper band + RSI > 70 = sell\n\n### Combination 3: Momentum\n```typescript\n// MACD and Stochastic\n\u003ce-stockchart-indicator type='Macd' field='Close' seriesName='MACD'>\u003c/e-stockchart-indicator>\n\u003ce-stockchart-indicator type='Stochastic' field='Close' period=14 seriesName='Stochastic'>\u003c/e-stockchart-indicator>\n```\n**Signal:** MACD and Stochastic both showing strong momentum = strong trend\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":12331,"content_sha256":"084586e034dba9b34c2a133461174422925a694ff6e957225575188a5e261f67"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Implementing Stock Chart","type":"text"}]},{"type":"paragraph","content":[{"text":"The Stock Chart component is a specialized visualization for displaying financial data over time, including OHLC (Open, High, Low, Close) data, technical indicators, and interactive range selection. Perfect for stock market analysis, cryptocurrency tracking, and any time-series financial data visualization.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"When to Use This Skill","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Financial Data Visualization:","type":"text","marks":[{"type":"strong"}]},{"text":" Display stock prices, cryptocurrency prices, or forex data over time","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"OHLC Charts:","type":"text","marks":[{"type":"strong"}]},{"text":" Render candlestick, bar, or line data for price movements","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Technical Analysis:","type":"text","marks":[{"type":"strong"}]},{"text":" Add moving averages, Bollinger Bands, RSI, MACD, and other indicators","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Date Range Selection:","type":"text","marks":[{"type":"strong"}]},{"text":" Allow users to select specific time periods with range or period selectors","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interactive Exploration:","type":"text","marks":[{"type":"strong"}]},{"text":" Implement crosshairs, tooltips, and dynamic series switching","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Real-time Updates:","type":"text","marks":[{"type":"strong"}]},{"text":" Handle live data feeds with automatic chart updates","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Export & Sharing:","type":"text","marks":[{"type":"strong"}]},{"text":" Generate PNG, SVG, PDF exports or print charts","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Multi-series Analysis:","type":"text","marks":[{"type":"strong"}]},{"text":" Compare multiple financial instruments on the same chart","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Component Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"Stock Chart is built on Syncfusion's Chart component with specialized features:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"7 Series Types:","type":"text","marks":[{"type":"strong"}]},{"text":" Line, Spline, Area, HiLo, HiLoOpenClose, Hollow Candle, Candle","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Technical Indicators:","type":"text","marks":[{"type":"strong"}]},{"text":" MA, BB, RSI, MACD, Stochastic, and more","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interactive Controls:","type":"text","marks":[{"type":"strong"}]},{"text":" Range selector, period selector, crosshair, tooltips","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"DateTime Axes:","type":"text","marks":[{"type":"strong"}]},{"text":" Automatically handles dates, supports zooming and panning","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Export Ready:","type":"text","marks":[{"type":"strong"}]},{"text":" PNG, SVG, PDF, and print capabilities","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Standalone Architecture:","type":"text","marks":[{"type":"strong"}]},{"text":" Works with Angular 19+ standalone components","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Documentation and Navigation Guide","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"API Reference","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/api-reference.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/api-reference.md","title":null}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Getting Started & Setup","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/getting-started.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/getting-started.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Installing @syncfusion/ej2-angular-charts package","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Initial module imports and providers","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Creating your first stock chart","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Binding data from JSON, API, or DataManager","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Verifying the setup works","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Series Configuration","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/series-types.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/series-types.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Understanding 7 series types (Candle, HiLo, Line, Area, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"When to use each series type for different data","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Configuring series properties and colors","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Switching between series types dynamically","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Multi-series charts","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Axis Customization","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/axis-customization.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/axis-customization.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"DateTime axis for time-series data","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Numeric and logarithmic axes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Axis labels, titles, and ranges","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Crosshair and tooltip configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Range zooming and panning","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Legend and Styling","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/legend.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/legend.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Enabling and positioning legends","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Legend alignment and sizing","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Custom icon shapes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Toggling series visibility","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Legend interaction patterns","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Interactive Features","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/interactive-features.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/interactive-features.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Range selector (select date ranges)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Period selector (1M, 3M, 6M, 1Y shortcuts)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Data labels and formatting","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Tooltip customization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Crosshair display and interaction","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Events and user actions","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Technical Indicators","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/technical-indicators.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/technical-indicators.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Adding technical indicators (MA, BB, RSI, MACD, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Indicator calculation parameters","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Multiple indicators on same chart","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Customizing indicator colors and style","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Removing or toggling indicators","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Export and Print","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/export-print.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/export-print.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Exporting chart as PNG, SVG, PDF","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Print preview functionality","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Saving exported files","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Batch exporting multiple charts","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Advanced Features & Optimization","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/advanced-features.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/advanced-features.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Live data updates and real-time refresh","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Accessibility (WCAG, ARIA, keyboard navigation)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Internationalization and localization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Trend lines and annotations","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Performance optimization for large datasets","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Quick Start","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Minimal Stock Chart Setup","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n imports: [ChartAllModule, StockChartAllModule],\n standalone: true,\n selector: 'app-stock-chart',\n template: `\n \u003cejs-stockchart id='stockchart-container' [dataSource]='data'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series [dataSource]='data' type='Candle' \n xName='x' high='high' low='low' \n open='open' close='close'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n \u003c/ejs-stockchart>\n `,\n encapsulation: ViewEncapsulation.None\n})\nexport class StockChartComponent {\n data: any[] = [\n { x: new Date(2023, 0, 1), open: 100, high: 105, low: 95, close: 102 },\n { x: new Date(2023, 0, 2), open: 102, high: 108, low: 100, close: 105 },\n { x: new Date(2023, 0, 3), open: 105, high: 110, low: 103, close: 108 }\n ];\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Common Patterns","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 1: Candlestick Chart with DateTime Axis","type":"text"}]},{"type":"paragraph","content":[{"text":"Render OHLC data as candlesticks with automatic date formatting on the x-axis.","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"\u003cejs-stockchart>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle' xName='date' \n high='high' low='low' open='open' close='close'>\n \u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>","type":"text"}]},{"type":"paragraph","content":[{"text":"When:","type":"text","marks":[{"type":"strong"}]},{"text":" Displaying stock OHLC data, analyzing price patterns","type":"text"},{"type":"br"},{"text":"Why:","type":"text","marks":[{"type":"strong"}]},{"text":" Candlesticks show open/close relationship at a glance","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 2: Multiple Series with Range Selector","type":"text"}]},{"type":"paragraph","content":[{"text":"Compare different indicators or instruments with date range selection.","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"\u003cejs-stockchart [rangeSelector]='{ periods: [{text: \"1M\", interval: 1, intervalType: \"Months\"}, \n {text: \"1Y\", interval: 1, intervalType: \"Years\"}] }'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle'>\u003c/e-stockchart-series>\n \u003ce-stockchart-series type='Line'>\u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>","type":"text"}]},{"type":"paragraph","content":[{"text":"When:","type":"text","marks":[{"type":"strong"}]},{"text":" Users need to view different time windows, analyzing trends","type":"text"},{"type":"br"},{"text":"Why:","type":"text","marks":[{"type":"strong"}]},{"text":" Rapid period switching improves exploration efficiency","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 3: Add Technical Indicator","type":"text"}]},{"type":"paragraph","content":[{"text":"Display a moving average overlay on price data.","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"\u003cejs-stockchart>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle'>\u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n \u003ce-indicators>\n \u003ce-indicator type='Sma' field='close' period='14' seriesName='SMA'>\u003c/e-indicator>\n \u003c/e-indicators>\n\u003c/ejs-stockchart>","type":"text"}]},{"type":"paragraph","content":[{"text":"When:","type":"text","marks":[{"type":"strong"}]},{"text":" Adding moving averages, RSI, or other technical analysis","type":"text"},{"type":"br"},{"text":"Why:","type":"text","marks":[{"type":"strong"}]},{"text":" Indicators help identify trends and signals","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 4: Interactive Crosshair and Tooltip","type":"text"}]},{"type":"paragraph","content":[{"text":"Enable detailed value inspection on hover.","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"\u003cejs-stockchart [crosshair]='{ enable: true, lineType: \"Vertical\" }' \n [tooltip]='{ enable: true }'>\n \u003ce-stockchart-series-collection>\n \u003ce-stockchart-series type='Candle'>\u003c/e-stockchart-series>\n \u003c/e-stockchart-series-collection>\n\u003c/ejs-stockchart>","type":"text"}]},{"type":"paragraph","content":[{"text":"When:","type":"text","marks":[{"type":"strong"}]},{"text":" Users need precise value inspection","type":"text"},{"type":"br"},{"text":"Why:","type":"text","marks":[{"type":"strong"}]},{"text":" Reduces cognitive load, enables data discovery","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Key Props","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Series Configuration","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"type","type":"text","marks":[{"type":"code_inline"}]},{"text":": Series rendering type (Candle, Line, Area, HiLo, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"xName","type":"text","marks":[{"type":"code_inline"}]},{"text":": Data field for x-axis (dates)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"high","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"low","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"open","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"close","type":"text","marks":[{"type":"code_inline"}]},{"text":": OHLC data fields","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"dataSource","type":"text","marks":[{"type":"code_inline"}]},{"text":": Array of data points or DataManager","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Chart Display","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"height","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"width","type":"text","marks":[{"type":"code_inline"}]},{"text":": Chart dimensions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"title","type":"text","marks":[{"type":"code_inline"}]},{"text":": Chart title","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"legendSettings","type":"text","marks":[{"type":"code_inline"}]},{"text":": Legend positioning and appearance","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"tooltip","type":"text","marks":[{"type":"code_inline"}]},{"text":": Value display on hover","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"crosshair","type":"text","marks":[{"type":"code_inline"}]},{"text":": Crosshair display and behavior","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Interactive Features","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"rangeSelector","type":"text","marks":[{"type":"code_inline"}]},{"text":": Date range selection buttons","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"periodSelector","type":"text","marks":[{"type":"code_inline"}]},{"text":": Quick period buttons (1M, 1Y, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"zoomSettings","type":"text","marks":[{"type":"code_inline"}]},{"text":": Chart zooming configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"chartArea","type":"text","marks":[{"type":"code_inline"}]},{"text":": Chart drawing area dimensions","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Axis Configuration","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"primaryXAxis","type":"text","marks":[{"type":"code_inline"}]},{"text":": X-axis (typically date/time)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"primaryYAxis","type":"text","marks":[{"type":"code_inline"}]},{"text":": Y-axis (price values)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"secondaryYAxis","type":"text","marks":[{"type":"code_inline"}]},{"text":": Optional secondary Y-axis for indicators","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Common Use Cases","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Use Case 1: Stock Analysis Dashboard","type":"text"}]},{"type":"paragraph","content":[{"text":"Display multiple stocks side-by-side with range selector for comparing performance over different periods. Technical indicators (MA, RSI) help identify trend strength.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Use Case 2: Real-time Cryptocurrency Tracker","type":"text"}]},{"type":"paragraph","content":[{"text":"Update chart data every few seconds as new price candles form. Live range selector updates to include latest data. Tooltip shows real-time bid/ask spread.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Use Case 3: Historical Data Analysis","type":"text"}]},{"type":"paragraph","content":[{"text":"Load complete historical dataset (months/years). Zoom/pan allows detailed inspection of specific periods. Export functionality lets users save analysis.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Use Case 4: Multi-indicator Technical Analysis","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Overlay multiple technical indicators on same price chart. Independent axes for different value ranges. Toggle indicators on/off via legend interaction.","type":"text"}]}]},"metadata":{"date":"2026-06-05","name":"syncfusion-angular-stock-chart","author":"@skillopedia","source":{"stars":0,"repo_name":"angular-ui-components-skills","origin_url":"https://github.com/syncfusion/angular-ui-components-skills/blob/HEAD/skills/syncfusion-angular-stock-chart/SKILL.md","repo_owner":"syncfusion","body_sha256":"6cb2509a531869bd39cafd4cb0c43e08af22d121d587e6015e279e91b820e04d","cluster_key":"9ecf8c2e78cdf6466946651135d5ae879c8a7dd952580d0f94b222bdc809c092","clean_bundle":{"format":"clean-skill-bundle-v1","source":"syncfusion/angular-ui-components-skills/skills/syncfusion-angular-stock-chart/SKILL.md","attachments":[{"id":"72b65573-ec80-5dcd-984d-01a55566afbf","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/72b65573-ec80-5dcd-984d-01a55566afbf/attachment.md","path":"references/advanced-features.md","size":5866,"sha256":"fceb195e4fed1d1ac46989e921f13e47562566168baacab1055c9804bd9edae5","contentType":"text/markdown; charset=utf-8"},{"id":"3b62eec0-bf95-5c00-b038-1ff1b3914517","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/3b62eec0-bf95-5c00-b038-1ff1b3914517/attachment.md","path":"references/api-reference.md","size":5531,"sha256":"3bb026a8ff6e648eb211cf5e1d5969c3f3392b2e7206ad51008f624b9ce82af6","contentType":"text/markdown; charset=utf-8"},{"id":"85898520-84b1-5665-86bb-45d804b6b6ac","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/85898520-84b1-5665-86bb-45d804b6b6ac/attachment.md","path":"references/axis-customization.md","size":10035,"sha256":"0f8197b0995360449916c8a2a0328d9a4ff8b866f801c3085a77ffa0be8987c3","contentType":"text/markdown; charset=utf-8"},{"id":"0a90eceb-536f-5d12-8627-e875e6434678","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/0a90eceb-536f-5d12-8627-e875e6434678/attachment.md","path":"references/export-print.md","size":4362,"sha256":"3387abca2c38785fb257c15b264d998d2338e16efc5b867ba81ffde604978b8e","contentType":"text/markdown; charset=utf-8"},{"id":"e2fcb738-a077-5e08-bbe8-98a113e8d253","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/e2fcb738-a077-5e08-bbe8-98a113e8d253/attachment.md","path":"references/getting-started.md","size":8257,"sha256":"2e608eb2c1e8fd10af87d9e54749f770b12078696a6a26fd2532c9e8ad46f7dc","contentType":"text/markdown; charset=utf-8"},{"id":"13abb4e8-7637-54f0-98d9-024d1647b2d2","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/13abb4e8-7637-54f0-98d9-024d1647b2d2/attachment.md","path":"references/interactive-features.md","size":9601,"sha256":"ff8225d9c5d54775898c952d4870d87a05c2d2bb1fa667e0bc7d6673848c91ff","contentType":"text/markdown; charset=utf-8"},{"id":"11603521-a5be-5ed3-b1db-67c6e7ae066b","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/11603521-a5be-5ed3-b1db-67c6e7ae066b/attachment.md","path":"references/legend.md","size":8857,"sha256":"be8354902573b7a013a8a0cb585a1a2ca8e73c25e6ddea07f23e210644725f6b","contentType":"text/markdown; charset=utf-8"},{"id":"ee6e6dd9-ce12-5e1b-8543-dbf96c9fdbfb","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/ee6e6dd9-ce12-5e1b-8543-dbf96c9fdbfb/attachment.md","path":"references/series-types.md","size":11191,"sha256":"d3a3db1d003a0eec611d461b83cc39cbfce6dc2e11e254959d4af39d444e8ad6","contentType":"text/markdown; charset=utf-8"},{"id":"c6dff078-9648-596e-90d2-fe135102990f","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/c6dff078-9648-596e-90d2-fe135102990f/attachment.md","path":"references/technical-indicators.md","size":12331,"sha256":"084586e034dba9b34c2a133461174422925a694ff6e957225575188a5e261f67","contentType":"text/markdown; charset=utf-8"}],"bundle_sha256":"7cda2eb1ade8881f6b3cc92ed2e38302983d900d1202dd74e4129bf00d3a42f6","attachment_count":9,"text_attachments":9,"attachment_storage":"skillopedia-attachments-v1","binary_attachments":0,"excluded_attachments":[]},"cluster_size":1,"skill_md_path":"skills/syncfusion-angular-stock-chart/SKILL.md","import_metadata":{"date":"2026-06-05","author":"@skillopedia","version":"v1","category":"finance-legal-compliance","category_label":"Finance"},"exact_dupes_collapsed_into_this":0},"version":"v1","category":"finance-legal-compliance","metadata":{"author":"Syncfusion Inc","version":"33.1.44","category":"Data Visualization"},"import_tag":"clean-skills-v1","description":"Implement Syncfusion Angular Stock Chart component for displaying financial data and OHLC charts. Use this skill whenever users need to create stock charts, display candlestick or OHLC data, add technical indicators, implement date range selection, or work with time-series financial visualization. Includes series types, axis customization, interactive features, and export capabilities."}},"renderedAt":1782979735106}

Implementing Stock Chart The Stock Chart component is a specialized visualization for displaying financial data over time, including OHLC (Open, High, Low, Close) data, technical indicators, and interactive range selection. Perfect for stock market analysis, cryptocurrency tracking, and any time-series financial data visualization. When to Use This Skill - Financial Data Visualization: Display stock prices, cryptocurrency prices, or forex data over time - OHLC Charts: Render candlestick, bar, or line data for price movements - Technical Analysis: Add moving averages, Bollinger Bands, RSI, MAC…