Implementing Syncfusion React Stock Charts The Stock Chart component is a specialized financial chart for visualizing stock price movements over time. It provides essential features for financial data analysis including candlestick/OHLC visualization, period selectors for quick date range navigation, range selectors for precise data filtering, technical indicators, and interactive tools like tooltips and crosshair. When to Use This Skill Use this skill when you need to: - Visualize financial/stock data - Display stock prices, trading volumes, market movements - Display OHLC data - Show Open,…

+ args.text;\n }\n }}\n/>\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axislabelrender\n\n#### crosshairLabelRender\nTriggers before the crosshair tooltip for the series is rendered.\n\n**Signature:**\n```typescript\nonCrosshairLabelRender?: (args: ICrosshairLabelRenderEventArgs) => void\n```\n\n**Example:**\n```typescript\n\u003cStockChartComponent\n onCrosshairLabelRender={(args) => {\n args.text = 'Price: ' + args.text;\n }}\n/>\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#crosshairlabelrender\n\n#### seriesRender\nFired when a series is rendered.\n\n**Signature:**\n```typescript\nonSeriesRender?: (args: ISeriesRenderEventArgs) => void\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#seriesrender\n\n#### beforeExport\nFired before export operation begins.\n\n**Signature:**\n```typescript\nonBeforeExport?: (args: IExportEventArgs) => void\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#beforeexport\n\n### User Interaction Events\n\n#### pointClick\nFired when a data point is clicked.\n\n**Signature:**\n```typescript\nonPointClick?: (args: IPointEventArgs) => void\n```\n\n**Parameters:**\n- `args.pointIndex` — Index of clicked point\n- `args.seriesIndex` — Index of clicked series\n- `args.x` — X-value\n- `args.y` — Y-value\n\n**Example:**\n```typescript\n\u003cStockChartComponent\n onPointClick={(args) => {\n console.log(`Clicked point at ${args.x}: ${args.y}`);\n }}\n/>\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointclick\n\n#### pointMove\nFired when mouse moves over a data point.\n\n**Signature:**\n```typescript\nonPointMove?: (args: IPointEventArgs) => void\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointmove\n\n### Mouse & Chart Events\n\n#### stockChartMouseClick\nTriggers when clicking on the stock chart.\n\n**Signature:**\n```typescript\nonStockChartMouseClick?: (args: IMouseEventArgs) => void\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockchartmouseclick\n\n#### stockChartMouseDown\nTriggers on mouse down event.\n\n**Signature:**\n```typescript\nonStockChartMouseDown?: (args: IMouseEventArgs) => void\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockchartmousedown\n\n#### stockChartMouseLeave\nTriggers when cursor leaves the chart.\n\n**Signature:**\n```typescript\nonStockChartMouseLeave?: (args: IMouseEventArgs) => void\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockchartmouseleave\n\n#### stockChartMouseMove\nTriggers when hovering over the stock chart.\n\n**Signature:**\n```typescript\nonStockChartMouseMove?: (args: IMouseEventArgs) => void\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockchartmousemove\n\n#### stockChartMouseUp\nTriggers on mouse up event.\n\n**Signature:**\n```typescript\nonStockChartMouseUp?: (args: IMouseEventArgs) => void\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockchartmouseup\n\n### Legend Events\n\n#### legendClick\nFired when a legend item is clicked.\n\n**Signature:**\n```typescript\nonLegendClick?: (args: ILegendClickEventArgs) => void\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendclick\n\n#### legendRender\nFired when legend items are rendered.\n\n**Signature:**\n```typescript\nonLegendRender?: (args: ILegendRenderEventArgs) => void\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendrender\n\n### Tooltip & Crosshair Events\n\n#### tooltipRender\nModify tooltip content before display.\n\n**Signature:**\n```typescript\nonTooltipRender?: (args: ITooltipRenderEventArgs) => void\n```\n\n**Parameters:**\n- `args.text` — Tooltip text\n- `args.pointIndex` — Point index\n- `args.seriesIndex` — Series index\n- `args.textStyle` — Text styling\n\n**Example:**\n```typescript\n\u003cStockChartComponent\n onTooltipRender={(args) => {\n args.text = `Custom: ${args.text}`;\n }}\n/>\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#tooltiprender\n\n### Range & Selector Events\n\n#### rangeChange\nEmitted when the selected date range changes.\n\n**Signature:**\n```typescript\nonRangeChange?: (args: IRangeChangeEventArgs) => void\n```\n\n**Parameters:**\n- `args.start` — Range start date\n- `args.end` — Range end date\n\n**Example:**\n```typescript\n\u003cStockChartComponent\n onRangeChange={(args) => {\n console.log(`Range changed: ${args.start} to ${args.end}`);\n }}\n/>\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechange\n\n#### selectorRender\nTriggered when range selector renders.\n\n**Signature:**\n```typescript\nonSelectorRender?: (args: IRangeSelectorRenderEventArgs) => void\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectorrender\n\n### Technical Analysis Events\n\n#### stockEventRender\nCustomize stock event marker rendering.\n\n**Signature:**\n```typescript\nonStockEventRender?: (args: IStockEventRenderArgs) => void\n```\n\n**Parameters:**\n- `args.text` — Event text\n- `args.description` — Event description\n- `args.type` — Event marker type\n- `args.background` — Event color\n\n**Example:**\n```typescript\n\u003cStockChartComponent\n onStockEventRender={(args) => {\n if (args.type === 'Flag') {\n args.background = '#ff0000';\n }\n }}\n/>\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockeventrender\n\n#### onZooming\nFired during zoom interactions.\n\n**Signature:**\n```typescript\nonZooming?: (args: IZoomingEventArgs) => void\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#onzooming\n\n---\n\n## Directives\n\nDirectives are used in JSX markup to define nested structures for series and indicators.\n\n### StockChartSeriesCollectionDirective / StockChartSeriesDirective\n\nDefine chart series using directives.\n\n**Usage:**\n```typescript\n\u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={data}\n type='Candle'\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n volume='volume'\n name='Stock Price'\n />\n\u003c/StockChartSeriesCollectionDirective>\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model\n\n### StockChartIndicatorsDirective / StockChartIndicatorDirective\n\nDefine technical indicators using directives.\n\n**Usage:**\n```typescript\n\u003cStockChartIndicatorsDirective>\n \u003cStockChartIndicatorDirective\n type='Sma'\n field='Close'\n seriesName='Stock'\n period={20}\n fill='#0000ff'\n />\n\u003c/StockChartIndicatorsDirective>\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel\n\n### Stock Events (Prop-based, Not a Directive)\n\nStock events are defined as a **prop array** on `StockChartComponent`, not using directives.\n\n**Usage:**\n```typescript\n\u003cStockChartComponent\n stockEvents={[\n {\n date: new Date('2012-02-01'),\n text: 'Q1',\n description: 'Q1 Earnings',\n type: 'Flag',\n background: '#6c757d',\n seriesIndexes: [0]\n }\n ]}\n>\n {/* Chart content */}\n\u003c/StockChartComponent>\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockEventModel\n\n### StockChartTrendlinesDirective / StockChartTrendlineDirective\n\nDefine trend lines for series.\n\n**Usage:**\n```typescript\n\u003cStockChartSeriesDirective>\n \u003cStockChartTrendlinesDirective>\n \u003cStockChartTrendlineDirective\n type='Linear'\n fill='#ff0000'\n width={2}\n />\n \u003c/StockChartTrendlinesDirective>\n\u003c/StockChartSeriesDirective>\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTrendlineModel\n\n### StockChartAxesDirective / StockChartAxisDirective\n\nDefine additional Y-axes for multi-axis charts.\n\n**Usage:**\n```typescript\n\u003cStockChartAxesDirective>\n \u003cStockChartAxisDirective\n name='volumeAxis'\n opposedPosition={true}\n title='Volume'\n />\n\u003c/StockChartAxesDirective>\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model\n\n### StockChartRowsDirective / StockChartRowDirective\n\nDefine multi-row/pane layouts.\n\n**Usage:**\n```typescript\n\u003cStockChartRowsDirective>\n \u003cStockChartRowDirective height='60%' />\n \u003cStockChartRowDirective height='40%' />\n\u003c/StockChartRowsDirective>\n```\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartRowModel\n\n---\n\n## Models & Interfaces\n\n### StockSeriesModel\n\nDefines a single stock chart series.\n\n**Key Properties:**\n- `dataSource: Object[]` — Series data\n- `type: 'Candle' | 'Line' | 'Spline' | 'Hilo' | 'HiloOpenClose'` — Series type\n- `xName: string` — X field name\n- `open: string` — Open price field\n- `high: string` — High price field\n- `low: string` — Low price field\n- `close: string` — Close price field\n- `volume: string` — Volume field\n- `name: string` — Series name for legend\n- `fill: string` — Series color\n- `opacity: number` — Series opacity (0-1)\n- `width: number` — Line width\n- `bearFillColor: string` — Bearish candle color\n- `bullFillColor: string` — Bullish candle color\n- `enableSolidCandle: boolean` — Use solid candles instead of hollow\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model\n\n### StockChartAxisModel\n\nDefines a chart axis (X or Y).\n\n**Key Properties:**\n- `valueType: 'DateTime' | 'Numeric' | 'Logarithmic' | 'Category'` — Axis type\n- `title: string` — Axis title\n- `labelFormat: string` — Label format\n- `interval: number` — Interval between labels\n- `intervalType: string` — Interval type (for DateTime)\n- `minimum: number` — Minimum value\n- `maximum: number` — Maximum value\n- `rangePadding: string` — Padding mode\n- `majorGridLines: {}` — Grid line styling\n- `minorGridLines: {}` — Minor grid line styling\n- `lineStyle: {}` — Axis line styling\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model\n\n### StockChartIndicatorModel\n\nDefines a technical indicator.\n\n**Key Properties:**\n- `type: string` — Indicator type\n- `field: string` — Data field\n- `seriesName: string` — Target series\n- `period: number` — Calculation period\n- `fill: string` — Indicator color\n- Additional type-specific properties (e.g., `standardDeviation` for Bollinger Bands)\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel\n\n### StockEventModel\n\nDefines a stock event marker.\n\n**Key Properties:**\n- `date: Date` — Event date\n- `text: string` — Event label\n- `description: string` — Event description\n- `type: string` — Marker type\n- `background: string` — Marker color\n- `border: {}` — Border styling\n- `seriesIndexes: number[]` — Limit to specific series\n\n**Official API:** https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockEventModel\n\n---\n\n## Modules to Inject\n\n### Essential Modules\n\nAll Stock Chart features must be explicitly injected:\n\n```typescript\nimport { Inject } from '@syncfusion/ej2-react-charts';\n\n\u003cStockChartComponent>\n \u003cInject services={[/* modules */]} />\n\u003c/StockChartComponent>\n```\n\n### Axis Module\n\n**DateTime** (required for stock charts)\n```typescript\nimport { DateTime } from '@syncfusion/ej2-react-charts';\n\n\u003cInject services={[DateTime]} />\n```\n\n### Series Type Modules\n\n```typescript\nimport {\n LineSeries,\n SplineSeries,\n CandleSeries,\n HiloSeries,\n HiloOpenCloseSeries,\n RangeAreaSeries,\n Trendlines\n} from '@syncfusion/ej2-react-charts';\n\n\u003cInject services={[LineSeries, SplineSeries, CandleSeries, HiloSeries, HiloOpenCloseSeries, RangeAreaSeries, Trendlines]} />\n```\n\n### Interaction Modules\n\n```typescript\nimport {\n Tooltip,\n RangeTooltip,\n Crosshair,\n StockLegend,\n DataLabel\n} from '@syncfusion/ej2-react-charts';\n\n\u003cInject services={[Tooltip, RangeTooltip, Crosshair, StockLegend, DataLabel]} />\n```\n\n### Technical Indicator Modules\n\n```typescript\nimport {\n SmaIndicator,\n EmaIndicator,\n RsiIndicator,\n MacdIndicator,\n BollingerBands,\n TmaIndicator,\n MomentumIndicator,\n StochasticIndicator,\n AtrIndicator,\n AccumulationDistributionIndicator\n} from '@syncfusion/ej2-react-charts';\n\n\u003cInject services={[\n SmaIndicator,\n EmaIndicator,\n RsiIndicator,\n MacdIndicator,\n BollingerBands,\n TmaIndicator,\n MomentumIndicator,\n StochasticIndicator,\n AtrIndicator,\n AccumulationDistributionIndicator\n]} />\n```\n\n### Export & Print Modules\n\n- No modules are required for stock chart printing.\n\n```typescript\nimport { Export } from '@syncfusion/ej2-react-charts';\n\n\u003cInject services={[Export]} />\n```\n\n### Complete Module Injection\n\nFor a fully-featured Stock Chart:\n\n```typescript\nimport {\n // Main component\n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n StockChartIndicatorsDirective,\n StockChartIndicatorDirective,\n StockEventsDirective,\n StockEventDirective,\n StockChartTrendlinesDirective,\n StockChartTrendlineDirective,\n Inject,\n // Axes\n DateTime,\n // Series\n LineSeries,\n SplineSeries,\n CandleSeries,\n HiloSeries,\n HiloOpenCloseSeries,\n RangeAreaSeries,\n Trendlines,\n // Interaction\n Tooltip,\n RangeTooltip,\n Crosshair,\n StockLegend,\n DataLabel,\n // Indicators\n SmaIndicator,\n EmaIndicator,\n RsiIndicator,\n MacdIndicator,\n BollingerBands,\n TmaIndicator,\n MomentumIndicator,\n StochasticIndicator,\n AtrIndicator,\n AccumulationDistributionIndicator,\n // Export\n Export\n} from '@syncfusion/ej2-react-charts';\n\n\u003cInject services={[\n DateTime,\n LineSeries,\n SplineSeries,\n CandleSeries,\n HiloSeries,\n HiloOpenCloseSeries,\n RangeAreaSeries,\n Trendlines,\n Tooltip,\n RangeTooltip,\n Crosshair,\n StockLegend,\n DataLabel,\n SmaIndicator,\n EmaIndicator,\n RsiIndicator,\n MacdIndicator,\n BollingerBands,\n TmaIndicator,\n MomentumIndicator,\n StochasticIndicator,\n AtrIndicator,\n AccumulationDistributionIndicator,\n Export\n]} />\n```\n\n---\n\n## Common Patterns\n\n### 1. Basic Stock Chart with Candle Series\n\n```typescript\nimport { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, CandleSeries, Tooltip, RangeTooltip, Crosshair } from '@syncfusion/ej2-react-charts';\n\nfunction BasicStockChart() {\n const data = [\n { x: new Date('2012-04-02'), open: 85.97, high: 90.58, low: 85.97, close: 90.58 },\n { x: new Date('2012-04-03'), open: 89.02, high: 92.50, low: 88.50, close: 92.90 }\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Price'\n primaryXAxis={{ valueType: 'DateTime' }}\n tooltip={{ enable: true }}\n crosshair={{ enable: true }}\n >\n \u003cInject services={[DateTime, CandleSeries, Tooltip, RangeTooltip, Crosshair]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={data}\n type='Candle'\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n### 2. Stock Chart with Multiple Series and Comparison\n\n```typescript\n\u003cStockChartComponent>\n \u003cInject services={[DateTime, LineSeries, Tooltip, RangeTooltip, Crosshair, StockLegend]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={applData}\n type='Line'\n name='AAPL'\n xName='x'\n yName='close'\n fill='#0080ff'\n />\n \u003cStockChartSeriesDirective\n dataSource={googData}\n type='Line'\n name='GOOG'\n xName='x'\n yName='close'\n fill='#ff8000'\n />\n \u003c/StockChartSeriesCollectionDirective>\n\u003c/StockChartComponent>\n```\n\n### 3. Stock Chart with Technical Indicators\n\n```typescript\n\u003cStockChartComponent>\n \u003cInject services={[DateTime, CandleSeries, SmaIndicator, EmaIndicator, Tooltip]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective dataSource={data} type='Candle' />\n \u003c/StockChartSeriesCollectionDirective>\n \u003cStockChartIndicatorsDirective>\n \u003cStockChartIndicatorDirective type='Sma' period={20} field='Close' fill='#0000ff' />\n \u003cStockChartIndicatorDirective type='Ema' period={50} field='Close' fill='#ff0000' />\n \u003c/StockChartIndicatorsDirective>\n\u003c/StockChartComponent>\n```\n\n### 4. Stock Chart with Events, Export, and Print\n\n```tsx\nimport { useRef } from 'react';\nimport {type StockEventsSettingsModel }from '@syncfusion/ej2-react-charts';\nfunction AdvancedStockChart() { \n const chartRef = useRef(null);\n const events: StockEventsSettingsModel[] = [\n { date: new Date('2012-02-01'), text: 'Earnings', type: 'Flag', background: '#6c757d' }\n ];\n\n return (\n \u003c>\n \u003cbutton onClick={() => chartRef.current?.export('PNG', 'StockChart')}>\n Export PNG\n \u003c/button>\n \u003cbutton onClick={() => chartRef.current?.print()}>Print\u003c/button>\n\n \u003cStockChartComponent\n ref={chartRef}\n stockEvents={events}\n exportType={['PNG', 'JPEG', 'SVG', 'PDF']}\n >\n \u003cInject services={[DateTime, CandleSeries, Export, Tooltip]} />\n \u003c/StockChartComponent>\n \u003c/>\n );\n}\n```\n\n---\n\n## API Quick Links\n\n**Master API Documentation:**\n- Stock Chart Component: https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default\n- Stock Chart Models: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel\n\n**Detailed API References:**\n- Stock Chart Main Model: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel\n- Stock Series Model: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model\n- Stock Chart Axis Model: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model\n- Stock Chart Indicator Model: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel\n- Stock Event Model: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockEventModel\n- Stock Chart Legend Settings: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartLegendSettingsModel\n- Stock Chart Tooltip Settings: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTooltipSettingsModel\n\n**Feature Documentation:**\n- Getting Started: https://ej2.syncfusion.com/react/documentation/stock-chart/getting-started\n- Stock Chart Features: https://ej2.syncfusion.com/react/documentation/stock-chart/\n- Export & Print: https://ej2.syncfusion.com/react/documentation/stock-chart/\n- Technical Indicators: https://ej2.syncfusion.com/react/documentation/stock-chart/\n- Stock Events: https://ej2.syncfusion.com/react/documentation/stock-chart/\n\n---\n\n**Last Updated:** March 27, 2026 \n**API Version:** Stock Chart v24.1+ \n**React Version:** 16.8+\n````","content_type":"text/markdown; charset=utf-8","language":"markdown","size":48060,"content_sha256":"cc0771449b9d81508e5548338b8609e0c2c1fa5d2484703e689a402bc1a668ca"},{"filename":"references/configuration.md","content":"# Chart Configuration: Axes, Dimensions, Appearance, and Gradients\n\nComprehensive guide for configuring Stock Chart axes, controlling dimensions, customizing appearance with themes, and applying gradient fills.\n\n> See the concise API summary in [API Reference](./api.md) for prop/method/event names and quick examples.\n\n**Additional StockChart features covered (from API):**\n- `enableCustomRange`, `enablePersistence`, `enableRtl`, `zoomSettings`, `selectionMode`, `enablePeriodSelector`, `enableSelector`\n\n**Quick link:** Full API summary: [references/api.md](./api.md)\n\n## Table of Contents\n- [Axes Configuration](#axes-configuration)\n - [Axis Types](#axis-types)\n - [DateTime Axis](#datetime-axis-configuration)\n - [Numeric Axis](#numeric-axis-configuration)\n - [Axis Customization](#axis-customization)\n - [Multiple Axes](#multiple-axes)\n- [Chart Dimensions](#chart-dimensions)\n - [Container-Based Sizing](#container-based-sizing)\n - [Direct Sizing](#direct-sizing-width-and-height)\n - [Responsive Design](#responsive-design)\n- [Appearance](#appearance-and-theming)\n - [Chart Title](#chart-title)\n - [Built-in Themes](#built-in-themes)\n - [Background and Border](#background-and-border)\n - [Chart Area Customization](#chart-area-customization)\n- [Gradient Fills](#gradient-fills)\n - [Linear Gradients](#linear-gradients)\n - [Radial Gradients](#radial-gradients)\n\n## Axes Configuration\n\n### Axis Types\n\nStock Chart supports four axis types:\n\n1. **DateTime** - For date/time data (most common for stock charts)\n2. **Numeric** - For numerical data\n3. **Logarithmic** - For logarithmic scales\n4. **Category** - For categorical data\n\n### DateTime Axis Configuration\n\nDateTime axis is essential for stock charts as it handles date-based data:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n CandleSeries\n} from '@syncfusion/ej2-react-charts';\n\nfunction DateTimeAxisChart() {\n const stockData = [\n { x: new Date('2012-04-02'), open: 320.71, high: 324.07, low: 317.74, close: 323.78 },\n { x: new Date('2012-04-03'), open: 323.03, high: 324.30, low: 319.64, close: 321.63 },\n // More data...\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ \n valueType: 'DateTime', // Essential for date-based data\n title: 'Date',\n labelFormat: 'MMM yyyy'\n }}\n primaryYAxis={{\n title: 'Price ($)',\n labelFormat: '${value}'\n }}\n >\n \u003cInject services={[DateTime, CandleSeries]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n**DateTime axis properties:**\n- `valueType: 'DateTime'` - Sets axis to handle dates\n- `labelFormat` - Date format string (e.g., 'MMM dd, yyyy', 'dd/MM/yyyy')\n- `intervalType` - 'Auto', 'Years', 'Months', 'Days', 'Hours', 'Minutes'\n- `interval` - Interval between labels\n\n### Numeric Axis Configuration\n\nNumeric axis for price values:\n\n```typescript\n\u003cStockChartComponent\n primaryYAxis={{\n valueType: 'Double', // Numeric axis (default)\n title: 'Stock Price',\n minimum: 300,\n maximum: 400,\n interval: 20,\n labelFormat: '${value}',\n rangePadding: 'Additional'\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Numeric axis properties:**\n- `minimum` - Minimum axis value\n- `maximum` - Maximum axis value\n- `interval` - Interval between labels\n- `labelFormat` - Format string for labels\n- `rangePadding` - 'None', 'Normal', 'Additional', 'Round', 'Auto'\n\n### Axis Customization\n\n#### Label Formatting\n\n```typescript\n// Currency format\nprimaryYAxis={{\n labelFormat: '${value}',\n title: 'Price (USD)'\n}}\n\n// Percentage format\nprimaryYAxis={{\n labelFormat: '{value}%',\n title: 'Change (%)'\n}}\n\n// Custom format\nprimaryYAxis={{\n labelFormat: 'Price: {value}',\n title: 'Stock Price'\n}}\n```\n\n#### Axis Range\n\nSet explicit ranges:\n\n```typescript\nprimaryYAxis={{\n minimum: 100,\n maximum: 200,\n interval: 10\n}}\n```\n\n#### Axis Title\n\n```typescript\nprimaryXAxis={{\n valueType: 'DateTime',\n title: 'Trading Date',\n titleStyle: {\n fontFamily: 'Arial',\n fontSize: '14px',\n fontWeight: 'bold',\n color: '#333333'\n }\n}}\n```\n\n#### Grid Lines\n\nCustomize grid appearance:\n\n```typescript\nprimaryYAxis={{\n majorGridLines: {\n width: 1,\n color: '#e0e0e0',\n dashArray: '5,5'\n },\n minorGridLines: {\n width: 0.5,\n color: '#f0f0f0',\n dashArray: '3,3'\n },\n minorTicksPerInterval: 5\n}}\n```\n\n#### Axis Line\n\nCustomize axis line:\n\n```typescript\nprimaryYAxis={{\n lineStyle: {\n width: 2,\n color: '#000000',\n dashArray: '0'\n }\n}}\n```\n\n### Multiple Axes\n\nAdd multiple Y-axes for different value scales:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n StockChartAxisDirective,\n StockChartAxesDirective,\n Inject,\n DateTime,\n LineSeries,\n ColumnSeries\n} from '@syncfusion/ej2-react-charts';\n\nfunction MultipleAxesChart() {\n const priceData = [ /* price data */ ];\n const volumeData = [ /* volume data */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n primaryYAxis={{\n title: 'Price ($)',\n labelFormat: '${value}'\n }}\n >\n \u003cInject services={[DateTime, LineSeries, ColumnSeries]} />\n \n {/* Additional Y-axis for volume */}\n \u003cStockChartAxesDirective>\n \u003cStockChartAxisDirective\n name='volumeAxis'\n opposedPosition={true}\n title='Volume'\n labelFormat='{value}M'\n majorGridLines={{ width: 0 }}\n />\n \u003c/StockChartAxesDirective>\n \n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={priceData}\n type='Line'\n yAxisName='primaryYAxis' // Uses primary Y-axis\n />\n \u003cStockChartSeriesDirective\n dataSource={volumeData}\n type='Column'\n yAxisName='volumeAxis' // Uses volume axis\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n### Complete Axis Configuration Example\n\n```typescript\nfunction ComprehensiveAxisChart() {\n const stockData = [ /* data */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Price Analysis'\n primaryXAxis={{\n valueType: 'DateTime',\n title: 'Trading Date',\n labelFormat: 'MMM dd',\n intervalType: 'Days',\n interval: 5,\n majorGridLines: {\n width: 1,\n color: '#e0e0e0'\n },\n minorGridLines: {\n width: 0.5,\n color: '#f5f5f5'\n },\n lineStyle: {\n width: 1,\n color: '#333333'\n },\n titleStyle: {\n fontSize: '14px',\n fontWeight: 'bold'\n }\n }}\n primaryYAxis={{\n title: 'Price (USD)',\n labelFormat: '${value}',\n minimum: 300,\n maximum: 400,\n interval: 20,\n rangePadding: 'Additional',\n majorGridLines: {\n width: 1,\n color: '#e0e0e0',\n dashArray: '5,5'\n },\n lineStyle: {\n width: 1,\n color: '#333333'\n },\n titleStyle: {\n fontSize: '14px',\n fontWeight: 'bold'\n }\n }}\n >\n \u003cInject services={[DateTime, CandleSeries]} />\n {/* ... series ... */}\n \u003c/StockChartComponent>\n );\n}\n```\n\n## Chart Dimensions\n\n### Container-Based Sizing\n\nChart automatically sizes to its container:\n\n```typescript\n// HTML container\n\u003cdiv id=\"chart-container\" style={{ width: '800px', height: '450px' }}>\n \u003cStockChartComponent id='stockchart'>\n {/* Chart inherits container dimensions */}\n \u003c/StockChartComponent>\n\u003c/div>\n```\n\n```typescript\n// React component with styled container\nfunction ContainerSizedChart() {\n return (\n \u003cdiv style={{ width: '100%', height: '500px', padding: '20px' }}>\n \u003cStockChartComponent id='stockchart'>\n \u003cInject services={[DateTime, CandleSeries]} />\n {/* ... */}\n \u003c/StockChartComponent>\n \u003c/div>\n );\n}\n```\n\n### Direct Sizing (Width and Height)\n\nSet chart size directly using `width` and `height` properties:\n\n**Pixel sizing:**\n```typescript\n\u003cStockChartComponent\n id='stockchart'\n width='800px'\n height='450px'\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Percentage sizing:**\n```typescript\n\u003cStockChartComponent\n id='stockchart'\n width='100%' // 100% of container width\n height='80%' // 80% of container height\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Mixed sizing:**\n```typescript\n\u003cStockChartComponent\n id='stockchart'\n width='1200px' // Fixed width\n height='60%' // Percentage height\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Default size:** When not specified, chart uses `450px` height and window width.\n\n### Responsive Design\n\nCreate responsive charts:\n\n```typescript\nfunction ResponsiveChart() {\n return (\n \u003cdiv className=\"chart-container\" style={{\n width: '100%',\n height: '100vh',\n maxWidth: '1400px',\n minHeight: '400px',\n margin: '0 auto',\n padding: '20px'\n }}>\n \u003cStockChartComponent\n id='stockchart'\n width='100%'\n height='90%'\n >\n {/* ... */}\n \u003c/StockChartComponent>\n \u003c/div>\n );\n}\n```\n\n**Responsive patterns:**\n```typescript\n// Full viewport\nwidth='100vw' height='100vh'\n\n// Card/panel sizing\nwidth='100%' height='400px'\n\n// Aspect ratio\nwidth='100%' height='56.25%' // 16:9 aspect ratio\n\n// Media query with React state\nconst [chartSize, setChartSize] = useState({ width: '1200px', height: '600px' });\n```\n\n## Appearance and Theming\n\n### Chart Title\n\nAdd and customize chart title:\n\n```typescript\n\u003cStockChartComponent\n title='AAPL Stock Price Analysis'\n titleStyle={{\n fontFamily: 'Arial, sans-serif',\n fontSize: '18px',\n fontWeight: 'bold',\n color: '#333333',\n textAlignment: 'Center',\n textOverflow: 'Wrap'\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Title style properties:**\n- `fontFamily` - Font family\n- `fontSize` - Font size (e.g., '16px', '1.2em')\n- `fontWeight` - 'normal', 'bold', '400', '700'\n- `color` - Text color\n- `textAlignment` - 'Near', 'Center', 'Far'\n- `textOverflow` - 'None', 'Wrap', 'Trim'\n\n### Built-in Themes\n\nStock Chart ships with 9 built-in themes:\n\n```typescript\n\u003cStockChartComponent\n theme='Material' // Choose from available themes\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Available themes:**\n1. **Material** - Google Material Design\n2. **MaterialDark** - Material dark theme\n3. **Fabric** - Microsoft Fabric Design\n4. **FabricDark** - Fabric dark theme\n5. **Bootstrap** - Bootstrap styling\n6. **Bootstrap4** - Bootstrap 4 styling\n7. **BootstrapDark** - Bootstrap dark theme\n8. **HighContrast** - High contrast for accessibility\n9. **HighContrastLight** - Light high contrast\n\n**Theme examples:**\n```typescript\n// Material theme\n\u003cStockChartComponent theme='Material'>\n\n// Dark theme for dashboards\n\u003cStockChartComponent theme='MaterialDark'>\n\n// High contrast for accessibility\n\u003cStockChartComponent theme='HighContrast'>\n```\n\n### Background and Border\n\nCustomize chart background and border:\n\n```typescript\n\u003cStockChartComponent\n background='#f9f9f9' // Background color\n border={{\n width: 2,\n color: '#dddddd'\n }}\n margin={{\n left: 40,\n right: 40,\n top: 40,\n bottom: 40\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n### Chart Area Customization\n\nCustomize the chart plotting area:\n\n```typescript\n\u003cStockChartComponent\n chartArea={{\n background: '#ffffff',\n border: {\n width: 1,\n color: '#e0e0e0'\n }\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n### Complete Appearance Example\n\n```typescript\nfunction StyledChart() {\n const stockData = [ /* data */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Professional Stock Analysis'\n titleStyle={{\n fontFamily: '\"Segoe UI\", Arial, sans-serif',\n fontSize: '20px',\n fontWeight: 'bold',\n color: '#1a1a1a'\n }}\n theme='Material'\n background='#fafafa'\n border={{\n width: 1,\n color: '#e0e0e0'\n }}\n margin={{\n left: 50,\n right: 50,\n top: 50,\n bottom: 50\n }}\n chartArea={{\n background: '#ffffff',\n border: {\n width: 1,\n color: '#e8e8e8'\n }\n }}\n primaryXAxis={{\n valueType: 'DateTime',\n majorGridLines: { color: '#f0f0f0' }\n }}\n primaryYAxis={{\n majorGridLines: { color: '#f0f0f0', dashArray: '5,5' }\n }}\n >\n \u003cInject services={[DateTime, CandleSeries]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n bearFillColor='#ef5350'\n bullFillColor='#26a69a'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n## Gradient Fills\n\nApply gradient fills to series for enhanced visual appeal.\n\n### Linear Gradients\n\nLinear gradients transition colors along a line:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n AreaSeries\n} from '@syncfusion/ej2-react-charts';\n\nfunction LinearGradientChart() {\n const stockData = [ /* data */ ];\n\n const linearGradient = {\n id: 'gradient1',\n x1: '0%',\n y1: '0%',\n x2: '0%',\n y2: '100%',\n stops: [\n { offset: '0%', color: 'rgba(0, 128, 255, 0.9)' },\n { offset: '100%', color: 'rgba(0, 128, 255, 0.1)' }\n ]\n };\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n >\n \u003cInject services={[DateTime, AreaSeries]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Area'\n xName='x'\n yName='close'\n fill='url(#gradient1)'\n border={{ width: 2, color: '#0080ff' }}\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n**Linear gradient configuration:**\n- `x1, y1` - Start point (0%-100%)\n- `x2, y2` - End point (0%-100%)\n- `stops` - Color stops array\n - `offset` - Position (0%-100%)\n - `color` - Color at that position\n\n**Gradient directions:**\n```typescript\n// Vertical (top to bottom)\n{ x1: '0%', y1: '0%', x2: '0%', y2: '100%' }\n\n// Horizontal (left to right)\n{ x1: '0%', y1: '0%', x2: '100%', y2: '0%' }\n\n// Diagonal\n{ x1: '0%', y1: '0%', x2: '100%', y2: '100%' }\n```\n\n### Radial Gradients\n\nRadial gradients radiate from a center point:\n\n```typescript\nfunction RadialGradientChart() {\n const stockData = [ /* data */ ];\n\n const radialGradient = {\n id: 'gradient2',\n cx: '50%',\n cy: '50%',\n r: '50%',\n stops: [\n { offset: '0%', color: 'rgba(255, 128, 0, 0.9)' },\n { offset: '100%', color: 'rgba(255, 128, 0, 0.2)' }\n ]\n };\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n >\n \u003cInject services={[DateTime, AreaSeries]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Area'\n fill='url(#gradient2)'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n**Radial gradient configuration:**\n- `cx, cy` - Center point (0%-100%)\n- `r` - Radius (0%-100%)\n- `stops` - Color stops array\n\n### Multiple Series with Gradients\n\n```typescript\nfunction MultiGradientChart() {\n const series1Data = [ /* data */ ];\n const series2Data = [ /* data */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n >\n \u003cInject services={[DateTime, AreaSeries]} />\n \u003cStockChartSeriesCollectionDirective>\n {/* Blue gradient series */}\n \u003cStockChartSeriesDirective\n dataSource={series1Data}\n type='Area'\n fill='url(#blueGradient)'\n name='Series 1'\n />\n {/* Orange gradient series */}\n \u003cStockChartSeriesDirective\n dataSource={series2Data}\n type='Area'\n fill='url(#orangeGradient)'\n name='Series 2'\n opacity={0.7}\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n### Complete Gradient Example\n\n```typescript\nfunction ComprehensiveGradientChart() {\n const stockData = [\n { x: new Date('2012-01-01'), close: 125.50 },\n { x: new Date('2012-02-01'), close: 132.30 },\n { x: new Date('2012-03-01'), close: 145.00 },\n { x: new Date('2012-04-01'), close: 138.75 },\n { x: new Date('2012-05-01'), close: 152.25 }\n ];\n\n return (\n \u003cdiv>\n \u003csvg style={{ height: 0 }}>\n \u003cdefs>\n \u003clinearGradient id=\"priceGradient\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n \u003cstop offset=\"0%\" style={{ stopColor: 'rgba(0, 128, 255, 0.9)', stopOpacity: 1 }} />\n \u003cstop offset=\"50%\" style={{ stopColor: 'rgba(0, 128, 255, 0.5)', stopOpacity: 1 }} />\n \u003cstop offset=\"100%\" style={{ stopColor: 'rgba(0, 128, 255, 0.1)', stopOpacity: 1 }} />\n \u003c/linearGradient>\n \u003c/defs>\n \u003c/svg>\n \n \u003cStockChartComponent\n id='stockchart'\n title='Stock Price with Gradient Fill'\n primaryXAxis={{ valueType: 'DateTime' }}\n primaryYAxis={{ title: 'Price ($)' }}\n >\n \u003cInject services={[DateTime, AreaSeries]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Area'\n xName='x'\n yName='close'\n fill='url(#priceGradient)'\n border={{ width: 3, color: '#0080ff' }}\n opacity={1}\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n \u003c/div>\n );\n}\n\nexport default ComprehensiveGradientChart;\n```\n\n## Best Practices\n\n**Axes:**\n- Always use DateTime axis for stock data\n- Set meaningful axis titles\n- Format labels for readability ($, %, etc.)\n- Use appropriate ranges to avoid distortion\n- Enable grid lines for easier value reading\n\n**Dimensions:**\n- Use percentage sizing for responsive layouts\n- Set minimum dimensions for readability (min 400px height)\n- Test on different screen sizes\n- Consider 16:9 or 4:3 aspect ratios\n\n**Appearance:**\n- Choose themes consistent with your application\n- Use high contrast themes for accessibility\n- Keep backgrounds subtle to focus on data\n- Maintain consistent styling across charts\n\n**Gradients:**\n- Use gradients sparingly for visual appeal\n- Ensure gradients don't obscure data readability\n- Use semi-transparent gradients for area charts\n- Test gradient visibility across themes\n\n**Performance:**\n- Theming has no performance impact\n- Complex gradients may slightly affect rendering\n- Minimize re-renders by memoizing configurations\n- Use appropriate intervals for large date ranges\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":19181,"content_sha256":"51f188c7532e84092d8fff629a7cc80690203bdd292dec64541ec8838ca4004a"},{"filename":"references/getting-started.md","content":"# Getting Started with Stock Charts\n\nThis guide covers the initial setup and basic implementation of the Syncfusion React Stock Chart component.\n\n> See the concise API summary in [API Reference](./api.md) for full prop and event details.\n\n## Table of Contents\n\n- [Installation and Dependencies](#installation-and-dependencies)\n - [Required Package](#required-package)\n - [](#import-syncfusion-css-styles)\n - [Dependencies Tree](#dependencies-tree)\n- [Project Setup](#project-setup)\n - [Using Vite Recommended](#using-vite-recommended)\n - [Using Create React App Alternative](#using-create-react-app-alternative)\n- [Basic Stock Chart Implementation](#basic-stock-chart-implementation)\n - [Minimal Example](#minimal-example)\n- [Module Injection](#module-injection)\n - [Inject Modules](#inject-modules)\n - [Essential Modules for Stock Charts](#essential-modules-for-stock-charts)\n - [Stock Chart Series Modules](#stock-chart-series-modules)\n - [Range Navigator Modules](#range-navigator-modules)\n - [Axis Modules](#axis-modules)\n - [User Interaction Modules](#user-interaction-modules)\n - [Legend Module](#legend-module)\n - [Technical Indicator Modules](#technical-indicator-modules)\n - [Analysis Modules](#analysis-modules)\n - [Period Selector Module](#period-selector-module)\n - [Export Module](#export-module)\n - [Example Full Stock Chart Module Injection](#example-full-stock-chart-module-injection)\n- [Interfaces](#interfaces)\n - [Stock Chart Configuration Interfaces](#stock-chart-configuration-interfaces)\n - [Stock Chart Axis Interfaces](#stock-chart-axis-interfaces)\n - [Stock Chart Series Interfaces](#stock-chart-series-interfaces)\n - [Tooltip and Crosshair Interfaces](#tooltip-and-crosshair-interfaces)\n - [Legend Interface](#legend-interface)\n - [Technical Indicator Interfaces](#technical-indicator-interfaces)\n - [Trendline Interfaces](#trendline-interfaces)\n - [Period Selector Interfaces](#period-selector-interfaces)\n - [Stock Event Setting Interfaces](#stock-event-setting-interfaces)\n - [Annotation Interfaces](#annotation-interfaces)\n - [Range Navigator Configuration Interfaces](#range-navigator-configuration-interfaces)\n - [Range Navigator Style Interfaces](#range-navigator-style-interfaces)\n - [Shared Chart Layout Interfaces](#shared-chart-layout-interfaces)\n - [Stock Chart Lifecycle Event Interfaces](#stock-chart-lifecycle-event-interfaces)\n - [Stock Chart Series and Point Event Interfaces](#stock-chart-series-and-point-event-interfaces)\n - [Stock Chart Axis Event Interfaces](#stock-chart-axis-event-interfaces)\n - [Stock Chart Tooltip Event Interfaces](#stock-chart-tooltip-event-interfaces)\n - [Stock Chart Legend Event Interfaces](#stock-chart-legend-event-interfaces)\n - [Stock Chart Interaction Event Interfaces](#stock-chart-interaction-event-interfaces)\n - [Stock Chart Range Selector Event Interfaces](#stock-chart-range-selector-event-interfaces)\n - [Stock Event Interfaces](#stock-event-interfaces)\n - [Export and Print Event Interfaces](#export-and-print-event-interfaces)\n - [Range Navigator Event Interfaces](#range-navigator-event-interfaces)\n - [Example Importing Interfaces](#example-importing-interfaces)\n- [Understanding Stock Data Structure](#understanding-stock-data-structure)\n - [Data Format](#data-format)\n- [Creating Your First Stock Chart with Data](#creating-your-first-stock-chart-with-data)\n - [Complete Working Example](#complete-working-example)\n - [Key Configuration Points](#key-configuration-points)\n- [Adding Chart Title](#adding-chart-title)\n- [Adding Crosshair for Precise Reading](#adding-crosshair-for-precise-reading)\n- [Adding Trackball for Multi-Series](#adding-trackball-for-multi-series)\n- [Complete Starter Template](#complete-starter-template)\n- [Troubleshooting](#troubleshooting)\n- [Next Steps](#next-steps)\n\n## Installation and Dependencies\n\n### Required Package\n\nInstall the Stock Chart package from npm:\n\n```bash\nnpm install @syncfusion/ej2-react-charts --save\n```\n### Import Syncfusion CSS Styles \nSyncfusion React components support CSS and Sass styles through dedicated npm theme packages. \n```bash\nnpm install @syncfusion/ej2-material3-theme\n```\nThis example uses the Material 3 theme. \n\nImport the Stock Chart component styles in `src/index.css`: \n\n```css \n@import '@syncfusion/ej2-material3-theme/styles/stock-chart/index.css';\n```\n\n# Updated Create React App setup\n\n### Dependencies Tree\n\nThe `@syncfusion/ej2-react-charts` package includes these dependencies:\n\n- `@syncfusion/ej2-base` - Base library\n- `@syncfusion/ej2-data` - Data management\n- `@syncfusion/ej2-charts` - Core charting library\n- `@syncfusion/ej2-react-base` - React base\n- `@syncfusion/ej2-pdf-export` - PDF export\n- `@syncfusion/ej2-file-utils` - File utilities\n- `@syncfusion/ej2-compression` - Compression\n- `@syncfusion/ej2-svg-base` - SVG rendering\n- `@syncfusion/ej2-navigations` - Navigation components\n- `@syncfusion/ej2-calendars` - Calendar components\n- `@syncfusion/ej2-popups` - Popup components\n- `@syncfusion/ej2-lists` - List components\n- `@syncfusion/ej2-inputs` - Input components\n- `@syncfusion/ej2-buttons` - Button components\n- `@syncfusion/ej2-splitbuttons` - Split button components\n\nAll dependencies are automatically installed with the main package.\n\n## Project Setup\n\n### Using Vite Recommended\n\nVite provides faster development and smaller bundle sizes. Create a new React project:\n\n```bash\nnpm create vite@latest my-stock-app\ncd my-stock-app\nnpm install\nnpm install @syncfusion/ej2-react-charts --save\nnpm install @syncfusion/ej2-material3-theme\nnpm run dev\n```\n\nFor TypeScript:\n\n```bash\nnpm create vite@latest my-stock-app -- --template react-ts\ncd my-stock-app\nnpm install\nnpm install @syncfusion/ej2-react-charts --save\nnpm install @syncfusion/ej2-material3-theme\nnpm run dev\n```\n\nFor JavaScript:\n\n```bash\nnpm create vite@latest my-stock-app -- --template react\ncd my-stock-app\nnpm install\nnpm install @syncfusion/ej2-react-charts --save\nnpm install @syncfusion/ej2-material3-theme\nnpm run dev\n```\nImport the Material 3 Stock Chart styles in src/index.css:\n```css\n@import '@syncfusion/ej2-material3-theme/styles/stock-chart/index.css';\n```\n### Using Create React App Alternative\n\n```bash\nnpx create-react-app my-stock-app\ncd my-stock-app\nnpm install @syncfusion/ej2-react-charts --save\nnpm install @syncfusion/ej2-material3-theme\nnpm start\n```\n\n## Basic Stock Chart Implementation\n\n### Minimal Example\n\nAdd the Stock Chart component to your `src/App.tsx` or `src/App.jsx` file:\n\n```typescript\nimport { StockChartComponent } from '@syncfusion/ej2-react-charts';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom/client';\n\nfunction App() {\n return \u003cStockChartComponent />;\n}\n\nexport default App;\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(\u003cApp />);\n```\n\nThis creates an empty stock chart container. Add data and inject the required modules to render a functional stock chart.\n\n## Module Injection\n\nReact Stock Chart features are modular and require module injection to enable them. This reduces bundle size by loading only the required stock chart series, range navigator series, axis types, indicators, and interactive features.\n\nBecause Stock Chart includes range selection behavior, the injected modules can include both Stock Chart modules and Range Navigator-related modules.\n\n### Inject Modules\n\n```tsx\nimport * as React from 'react';\nimport {\n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n LineSeries,\n SplineSeries,\n AreaSeries,\n StepLineSeries,\n RangeAreaSeries,\n HiloSeries,\n HiloOpenCloseSeries,\n CandleSeries,\n ColumnSeries,\n DateTime,\n DateTimeCategory,\n Category,\n Logarithmic,\n Tooltip,\n RangeTooltip,\n Crosshair,\n Zoom,\n StockLegend,\n SmaIndicator,\n EmaIndicator,\n TmaIndicator,\n AtrIndicator,\n AccumulationDistributionIndicator,\n BollingerBands,\n MacdIndicator,\n MomentumIndicator,\n RsiIndicator,\n StochasticIndicator,\n Trendlines,\n PeriodSelector,\n Export\n} from '@syncfusion/ej2-react-charts';\n\nfunction App() {\n const primaryXAxis: Object = {\n valueType: 'DateTime'\n };\n\n const data: Object[] = [\n { date: new Date('2024-01-01'), open: 120, high: 125, low: 118, close: 123, volume: 1000 },\n { date: new Date('2024-01-02'), open: 123, high: 128, low: 121, close: 126, volume: 1200 },\n { date: new Date('2024-01-03'), open: 126, high: 130, low: 124, close: 129, volume: 1400 }\n ];\n\n return (\n \u003cStockChartComponent primaryXAxis={primaryXAxis}>\n \u003cInject\n services={[\n LineSeries,\n SplineSeries,\n AreaSeries,\n StepLineSeries,\n RangeAreaSeries,\n HiloSeries,\n HiloOpenCloseSeries,\n CandleSeries,\n ColumnSeries,\n DateTime,\n DateTimeCategory,\n Category,\n Logarithmic,\n Tooltip,\n RangeTooltip,\n Crosshair,\n Zoom,\n StockLegend,\n SmaIndicator,\n EmaIndicator,\n TmaIndicator,\n AtrIndicator,\n AccumulationDistributionIndicator,\n BollingerBands,\n MacdIndicator,\n MomentumIndicator,\n RsiIndicator,\n StochasticIndicator,\n Trendlines,\n PeriodSelector,\n Export\n ]}\n />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={data}\n type=\"Candle\"\n xName=\"date\"\n high=\"high\"\n low=\"low\"\n open=\"open\"\n close=\"close\"\n volume=\"volume\"\n name=\"Stock\"\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n\nexport default App;\n```\n\n### Essential Modules for Stock Charts\n\nCommon modules to inject:\n\n- `CandleSeries` - Candle/candlestick charts\n- `LineSeries` - Line charts\n- `SplineSeries` - Spline/smooth line charts\n- `HiloSeries` - High-Low range bars\n- `HiloOpenCloseSeries` - OHLC bars\n- `DateTime` - DateTime axis, essential for stock data\n- `Tooltip` - Hover tooltips\n- `RangeTooltip` - Range selector tooltips\n- `Crosshair` - Crosshair lines\n- `DataLabel` - Data labels on points\n- `StockLegend` - Legend support for Stock Chart\n- `PeriodSelector` - Period selector support for range filtering\n- `Export` - Export and print support\n\n### Stock Chart Series Modules\n\n| Module | Purpose | Import package |\n|--------|---------|----------------|\n| `LineSeries` | Enable line series in Stock Chart | `@syncfusion/ej2-react-charts` |\n| `SplineSeries` | Enable spline series in Stock Chart | `@syncfusion/ej2-react-charts` |\n| `AreaSeries` | Enable area series in Stock Chart | `@syncfusion/ej2-react-charts` |\n| `HiloSeries` | Enable high-low financial series in Stock Chart | `@syncfusion/ej2-react-charts` |\n| `HiloOpenCloseSeries` | Enable high-low-open-close financial series in Stock Chart | `@syncfusion/ej2-react-charts` |\n| `CandleSeries` | Enable candle and hollow candle financial series in Stock Chart | `@syncfusion/ej2-react-charts` |\n| `ColumnSeries` | Enable column rendering for volume or chart-based stock visualization | `@syncfusion/ej2-react-charts` |\n\n### Range Navigator Modules\n\n| Module | Purpose | Import package |\n|--------|---------|----------------|\n| `LineSeries` | Enable line series rendering in the range navigator | `@syncfusion/ej2-react-charts` |\n| `AreaSeries` | Enable area series rendering in the range navigator | `@syncfusion/ej2-react-charts` |\n| `RangeAreaSeries` | Enable range area series rendering in the Stock Chart range selector | `@syncfusion/ej2-react-charts` |\n| `StepLineSeries` | Enable step line series rendering in the range navigator | `@syncfusion/ej2-react-charts` |\n| `RangeTooltip` | Enable tooltip support in the range navigator | `@syncfusion/ej2-react-charts` |\n| `PeriodSelector` | Enable period selector support for range filtering | `@syncfusion/ej2-react-charts` |\n\n### Axis Modules\n\n| Module | Purpose | Import package |\n|--------|---------|----------------|\n| `DateTime` | Enable date-time axis support for stock data | `@syncfusion/ej2-react-charts` |\n| `DateTimeCategory` | Enable date-time category axis support | `@syncfusion/ej2-react-charts` |\n| `Category` | Enable category axis support | `@syncfusion/ej2-react-charts` |\n| `Logarithmic` | Enable logarithmic axis support | `@syncfusion/ej2-react-charts` |\n\n### User Interaction Modules\n\n| Module | Purpose | Import package |\n|--------|---------|----------------|\n| `Tooltip` | Enable tooltip and trackball support in Stock Chart | `@syncfusion/ej2-react-charts` |\n| `RangeTooltip` | Enable tooltip support in the range navigator | `@syncfusion/ej2-react-charts` |\n| `Crosshair` | Enable crosshair interaction in Stock Chart | `@syncfusion/ej2-react-charts` |\n| `Zoom` | Enable zooming and panning support in Stock Chart | `@syncfusion/ej2-react-charts` |\n\n### Legend Module\n\n| Module | Purpose | Import package |\n|--------|---------|----------------|\n| `StockLegend` | Enable legend support in Stock Chart | `@syncfusion/ej2-react-charts` |\n\n### Technical Indicator Modules\n\n| Module | Purpose | Import package |\n|--------|---------|----------------|\n| `SmaIndicator` | Enable Simple Moving Average indicator | `@syncfusion/ej2-react-charts` |\n| `EmaIndicator` | Enable Exponential Moving Average indicator | `@syncfusion/ej2-react-charts` |\n| `TmaIndicator` | Enable Triangular Moving Average indicator | `@syncfusion/ej2-react-charts` |\n| `AtrIndicator` | Enable Average True Range indicator | `@syncfusion/ej2-react-charts` |\n| `AccumulationDistributionIndicator` | Enable Accumulation Distribution indicator | `@syncfusion/ej2-react-charts` |\n| `BollingerBands` | Enable Bollinger Bands indicator | `@syncfusion/ej2-react-charts` |\n| `MacdIndicator` | Enable MACD indicator | `@syncfusion/ej2-react-charts` |\n| `MomentumIndicator` | Enable Momentum indicator | `@syncfusion/ej2-react-charts` |\n| `RsiIndicator` | Enable Relative Strength Index indicator | `@syncfusion/ej2-react-charts` |\n| `StochasticIndicator` | Enable Stochastic indicator | `@syncfusion/ej2-react-charts` |\n\n### Analysis Modules\n\n| Module | Purpose | Import package |\n|--------|---------|----------------|\n| `Trendlines` | Enable trendline support in Stock Chart | `@syncfusion/ej2-react-charts` |\n\n### Period Selector Module\n\n| Module | Purpose | Import package |\n|--------|---------|----------------|\n| `PeriodSelector` | Enable period selector support for Stock Chart range filtering | `@syncfusion/ej2-react-charts` |\n\n### Export Module\n\n| Module | Purpose | Import package |\n|--------|---------|----------------|\n| `Export` | Enable Stock Chart export and print support | `@syncfusion/ej2-react-charts` |\n\n### Example Full Stock Chart Module Injection\n\n```tsx\nimport * as React from 'react';\nimport {\n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n LineSeries,\n SplineSeries,\n AreaSeries,\n StepLineSeries,\n RangeAreaSeries,\n HiloSeries,\n HiloOpenCloseSeries,\n CandleSeries,\n ColumnSeries,\n DateTime,\n DateTimeCategory,\n Category,\n Logarithmic,\n Tooltip,\n RangeTooltip,\n Crosshair,\n Zoom,\n StockLegend,\n SmaIndicator,\n EmaIndicator,\n TmaIndicator,\n AtrIndicator,\n AccumulationDistributionIndicator,\n BollingerBands,\n MacdIndicator,\n MomentumIndicator,\n RsiIndicator,\n StochasticIndicator,\n Trendlines,\n PeriodSelector,\n Export\n} from '@syncfusion/ej2-react-charts';\n\nfunction App() {\n const data: Object[] = [\n { date: new Date('2024-01-01'), open: 120, high: 125, low: 118, close: 123, volume: 1000 },\n { date: new Date('2024-01-02'), open: 123, high: 128, low: 121, close: 126, volume: 1200 },\n { date: new Date('2024-01-03'), open: 126, high: 130, low: 124, close: 129, volume: 1400 }\n ];\n\n return (\n \u003cStockChartComponent>\n \u003cInject\n services={[\n LineSeries,\n SplineSeries,\n AreaSeries,\n StepLineSeries,\n RangeAreaSeries,\n HiloSeries,\n HiloOpenCloseSeries,\n CandleSeries,\n ColumnSeries,\n DateTime,\n DateTimeCategory,\n Category,\n Logarithmic,\n Tooltip,\n RangeTooltip,\n Crosshair,\n Zoom,\n StockLegend,\n SmaIndicator,\n EmaIndicator,\n TmaIndicator,\n AtrIndicator,\n AccumulationDistributionIndicator,\n BollingerBands,\n MacdIndicator,\n MomentumIndicator,\n RsiIndicator,\n StochasticIndicator,\n Trendlines,\n PeriodSelector,\n Export\n ]}\n />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={data}\n type=\"Candle\"\n xName=\"date\"\n high=\"high\"\n low=\"low\"\n open=\"open\"\n close=\"close\"\n volume=\"volume\"\n name=\"Stock\"\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n\nexport default App;\n```\n\n## Interfaces\n\nReact Stock Chart provides TypeScript interfaces to strongly type stock chart configuration, range navigator configuration, axis settings, series settings, indicators, trendlines, stock events, annotations, tooltips, legends, and event arguments.\n\n### Stock Chart Configuration Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `StockChartModel` | Defines the complete configuration model for the Stock Chart component | `@syncfusion/ej2-react-charts` |\n| `StockChartAreaModel` | Defines stock chart area customization options such as background and border | `@syncfusion/ej2-react-charts` |\n| `StockChartBorderModel` | Defines stock chart border color and width settings | `@syncfusion/ej2-react-charts` |\n| `StockChartFontModel` | Defines font style, size, color, weight, and family settings used in Stock Chart | `@syncfusion/ej2-react-charts` |\n| `StockMarginModel` | Defines margin settings for the Stock Chart | `@syncfusion/ej2-react-charts` |\n\n### Stock Chart Axis Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `StockChartAxisModel` | Defines configuration for primary and secondary Stock Chart axes | `@syncfusion/ej2-react-charts` |\n| `StockChartRowModel` | Defines row configuration for multi-row Stock Chart layout | `@syncfusion/ej2-react-charts` |\n| `StockChartColumnModel` | Defines column configuration for multi-column Stock Chart layout | `@syncfusion/ej2-react-charts` |\n| `MajorGridLinesModel` | Defines major grid line settings for chart axes | `@syncfusion/ej2-react-charts` |\n| `MinorGridLinesModel` | Defines minor grid line settings for chart axes | `@syncfusion/ej2-react-charts` |\n| `MajorTickLinesModel` | Defines major tick line settings for chart axes | `@syncfusion/ej2-react-charts` |\n| `MinorTickLinesModel` | Defines minor tick line settings for chart axes | `@syncfusion/ej2-react-charts` |\n| `AxisLineModel` | Defines axis line style settings | `@syncfusion/ej2-react-charts` |\n| `CrosshairTooltipModel` | Defines crosshair tooltip settings for Stock Chart axes | `@syncfusion/ej2-react-charts` |\n| `StripLineSettingsModel` | Defines strip line settings for Stock Chart axes | `@syncfusion/ej2-react-charts` |\n\n### Stock Chart Series Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `StockChartSeriesModel` | Defines Stock Chart series configuration | `@syncfusion/ej2-react-charts` |\n| `StockChartEmptyPointSettingsModel` | Defines empty point behavior and appearance for Stock Chart series | `@syncfusion/ej2-react-charts` |\n| `StockChartConnectorModel` | Defines connector line settings used by labels and related Stock Chart elements | `@syncfusion/ej2-react-charts` |\n| `StockChartIndexesModel` | Defines series and point index information used for selection or highlighting | `@syncfusion/ej2-react-charts` |\n| `AnimationModel` | Defines animation duration, delay, and enable settings for chart rendering | `@syncfusion/ej2-react-charts` |\n| `BorderModel` | Defines border color, width, and dash array settings used by series and chart elements | `@syncfusion/ej2-react-charts` |\n| `MarkerSettingsModel` | Defines marker settings for chart series points | `@syncfusion/ej2-react-charts` |\n| `DataLabelSettingsModel` | Defines data label settings for chart points | `@syncfusion/ej2-react-charts` |\n| `EmptyPointSettingsModel` | Defines empty point behavior and appearance for chart series | `@syncfusion/ej2-react-charts` |\n\n### Tooltip and Crosshair Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `TooltipSettingsModel` | Defines Stock Chart tooltip settings | `@syncfusion/ej2-react-charts` |\n| `TooltipLocationModel` | Defines tooltip location settings | `@syncfusion/ej2-react-charts` |\n| `CrosshairSettingsModel` | Defines crosshair settings for Stock Chart interaction | `@syncfusion/ej2-react-charts` |\n| `CrosshairTooltipModel` | Defines tooltip settings displayed with the crosshair | `@syncfusion/ej2-react-charts` |\n\n### Legend Interface\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `StockChartLegendSettingsModel` | Defines Stock Chart legend settings | `@syncfusion/ej2-react-charts` |\n| `LegendSettingsModel` | Defines shared chart legend settings | `@syncfusion/ej2-react-charts` |\n\n### Technical Indicator Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `StockChartIndicatorModel` | Defines Stock Chart technical indicator settings such as SMA, EMA, RSI, MACD, Bollinger Bands, Momentum, ATR, TMA, Stochastic, and Accumulation Distribution indicators | `@syncfusion/ej2-react-charts` |\n| `TechnicalIndicatorModel` | Defines shared technical indicator settings | `@syncfusion/ej2-react-charts` |\n\n### Trendline Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `StockChartTrendlineModel` | Defines trendline settings for Stock Chart series | `@syncfusion/ej2-react-charts` |\n| `TrendlineModel` | Defines shared trendline settings for chart series | `@syncfusion/ej2-react-charts` |\n| `TrendlineMarkerModel` | Defines marker settings for trendline points | `@syncfusion/ej2-react-charts` |\n\n### Period Selector Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `StockChartPeriodModel` | Defines period selector button configuration for Stock Chart | `@syncfusion/ej2-react-charts` |\n| `PeriodSelectorSettingsModel` | Defines period selector configuration used for range filtering | `@syncfusion/ej2-react-charts` |\n| `PeriodModel` | Defines individual period button settings | `@syncfusion/ej2-react-charts` |\n\n### Stock Event Setting Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `StockEventsSettingsModel` | Defines stock event marker settings such as date, text, description, type, background, border, and series indexes | `@syncfusion/ej2-react-charts` |\n| `StockChartStockEventsModel` | Defines Stock Chart stock event collection settings | `@syncfusion/ej2-react-charts` |\n\n### Annotation Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `StockChartAnnotationSettingsModel` | Defines annotation settings for Stock Chart | `@syncfusion/ej2-react-charts` |\n| `ChartAnnotationSettingsModel` | Defines shared annotation settings for chart | `@syncfusion/ej2-react-charts` |\n\n### Range Navigator Configuration Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `RangeNavigatorModel` | Defines the complete configuration model for the Range Navigator component | `@syncfusion/ej2-react-charts` |\n| `RangeNavigatorSeriesModel` | Defines Range Navigator series configuration | `@syncfusion/ej2-react-charts` |\n| `RangeNavigatorMajorGridLinesModel` | Defines major grid line settings for Range Navigator | `@syncfusion/ej2-react-charts` |\n| `RangeNavigatorMajorTickLinesModel` | Defines major tick line settings for Range Navigator | `@syncfusion/ej2-react-charts` |\n| `RangeNavigatorLabelStyleModel` | Defines label style settings for Range Navigator axis labels | `@syncfusion/ej2-react-charts` |\n| `RangeNavigatorMarginModel` | Defines margin settings for Range Navigator | `@syncfusion/ej2-react-charts` |\n\n### Range Navigator Style Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `RangeNavigatorStyleSettingsModel` | Defines selected region, unselected region, thumb, grid, and background style settings | `@syncfusion/ej2-react-charts` |\n| `RangeNavigatorThumbSettingsModel` | Defines thumb border, fill, size, and type settings | `@syncfusion/ej2-react-charts` |\n| `RangeNavigatorBorderModel` | Defines border settings for Range Navigator elements | `@syncfusion/ej2-react-charts` |\n| `RangeNavigatorFontModel` | Defines font settings for Range Navigator labels and text | `@syncfusion/ej2-react-charts` |\n\n### Shared Chart Layout Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `ChartAreaModel` | Defines chart area customization options such as background and border | `@syncfusion/ej2-react-charts` |\n| `MarginModel` | Defines margin settings for chart components | `@syncfusion/ej2-react-charts` |\n| `FontModel` | Defines font style, size, color, weight, and family settings | `@syncfusion/ej2-react-charts` |\n| `BorderModel` | Defines border color, width, and dash array settings | `@syncfusion/ej2-react-charts` |\n\n### Stock Chart Lifecycle Event Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `IStockChartEventArgs` | Defines common Stock Chart event arguments for load, loaded, and Stock Chart lifecycle events | `@syncfusion/ej2-react-charts` |\n| `ILoadEventArgs` | Defines event arguments for chart load event | `@syncfusion/ej2-react-charts` |\n| `ILoadedEventArgs` | Defines event arguments after chart rendering is completed | `@syncfusion/ej2-react-charts` |\n| `IResizeEventArgs` | Defines event arguments for chart resize events | `@syncfusion/ej2-react-charts` |\n\n### Stock Chart Series and Point Event Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `IPointEventArgs` | Defines event arguments for point mouse and interaction events | `@syncfusion/ej2-react-charts` |\n| `IPointRenderEventArgs` | Defines event arguments used while rendering each chart point | `@syncfusion/ej2-react-charts` |\n| `ISeriesRenderEventArgs` | Defines event arguments used while rendering each Stock Chart series | `@syncfusion/ej2-react-charts` |\n| `ITextRenderEventArgs` | Defines event arguments used while rendering chart text such as labels | `@syncfusion/ej2-react-charts` |\n\n### Stock Chart Axis Event Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `IAxisLabelRenderEventArgs` | Defines event arguments used while rendering axis labels | `@syncfusion/ej2-react-charts` |\n| `IAxisRangeCalculatedEventArgs` | Defines event arguments after axis range calculation | `@syncfusion/ej2-react-charts` |\n\n### Stock Chart Tooltip Event Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `ITooltipRenderEventArgs` | Defines event arguments used while rendering Stock Chart tooltip | `@syncfusion/ej2-react-charts` |\n| `ISharedTooltipRenderEventArgs` | Defines event arguments used while rendering shared tooltip content | `@syncfusion/ej2-react-charts` |\n| `ITooltipRenderCompleteEventArgs` | Defines event arguments after tooltip rendering is completed | `@syncfusion/ej2-react-charts` |\n\n### Stock Chart Legend Event Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `IStockLegendRenderEventArgs` | Defines event arguments used while rendering Stock Chart legend items | `@syncfusion/ej2-react-charts` |\n| `IStockLegendClickEventArgs` | Defines event arguments for Stock Chart legend click events | `@syncfusion/ej2-react-charts` |\n| `ILegendRenderEventArgs` | Defines shared chart legend render event arguments | `@syncfusion/ej2-react-charts` |\n| `ILegendClickEventArgs` | Defines shared chart legend click event arguments | `@syncfusion/ej2-react-charts` |\n\n### Stock Chart Interaction Event Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `IMouseEventArgs` | Defines event arguments for Stock Chart mouse events | `@syncfusion/ej2-react-charts` |\n| `IZoomingEventArgs` | Defines event arguments while zooming is performed | `@syncfusion/ej2-react-charts` |\n| `IZoomCompleteEventArgs` | Defines event arguments after zooming is completed | `@syncfusion/ej2-react-charts` |\n| `ISelectionCompleteEventArgs` | Defines event arguments after point or series selection is completed | `@syncfusion/ej2-react-charts` |\n\n### Stock Chart Range Selector Event Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `IRangeChangeEventArgs` | Defines event arguments when the Stock Chart range is changed | `@syncfusion/ej2-react-charts` |\n| `IRangeSelectorRenderEventArgs` | Defines event arguments before the range selector is rendered | `@syncfusion/ej2-react-charts` |\n\n### Stock Event Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `IStockEventRenderArgs` | Defines event arguments used while rendering stock event markers | `@syncfusion/ej2-react-charts` |\n\n### Export and Print Event Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `IPrintEventArgs` | Defines event arguments for Stock Chart print events | `@syncfusion/ej2-react-charts` |\n| `IExportEventArgs` | Defines event arguments for Stock Chart export events | `@syncfusion/ej2-react-charts` |\n\n### Range Navigator Event Interfaces\n\n| Interface | Purpose | Import package |\n|-----------|---------|----------------|\n| `IRangeLoadedEventArgs` | Defines event arguments for Range Navigator load and loaded events | `@syncfusion/ej2-react-charts` |\n| `IRangeBeforeResizeEventArgs` | Defines event arguments before Range Navigator resize | `@syncfusion/ej2-react-charts` |\n| `IResizeRangeNavigatorEventArgs` | Defines event arguments after Range Navigator resize | `@syncfusion/ej2-react-charts` |\n| `IChangedEventArgs` | Defines event arguments after the selected Range Navigator range changes | `@syncfusion/ej2-react-charts` |\n| `ILabelRenderEventsArgs` | Defines event arguments before Range Navigator labels are rendered | `@syncfusion/ej2-react-charts` |\n| `IRangeSelectorRenderEventArgs` | Defines event arguments before the Range Navigator selector is rendered | `@syncfusion/ej2-react-charts` |\n| `IRangeTooltipRenderEventArgs` | Defines event arguments before Range Navigator tooltip rendering | `@syncfusion/ej2-react-charts` |\n\n### Example Importing Interfaces\n\n```tsx\nimport {\n StockChartModel,\n StockChartAxisModel,\n StockChartSeriesModel,\n StockChartIndicatorModel,\n StockChartTrendlineModel,\n StockChartPeriodModel,\n StockEventsSettingsModel,\n StockChartAnnotationSettingsModel,\n TooltipSettingsModel,\n CrosshairSettingsModel,\n StockChartLegendSettingsModel,\n RangeNavigatorModel,\n RangeNavigatorSeriesModel,\n IStockChartEventArgs,\n IStockLegendClickEventArgs,\n IStockLegendRenderEventArgs,\n IStockEventRenderArgs,\n IRangeChangeEventArgs,\n IRangeSelectorRenderEventArgs,\n ITooltipRenderEventArgs,\n IAxisLabelRenderEventArgs,\n ISeriesRenderEventArgs,\n IPointEventArgs,\n IMouseEventArgs,\n IExportEventArgs,\n IPrintEventArgs\n} from '@syncfusion/ej2-react-charts';\n\nconst primaryXAxis: StockChartAxisModel = {\n valueType: 'DateTime'\n};\n\nconst tooltip: TooltipSettingsModel = {\n enable: true\n};\n\nconst crosshair: CrosshairSettingsModel = {\n enable: true\n};\n\nconst series: StockChartSeriesModel = {\n dataSource: [\n { date: new Date('2024-01-01'), open: 120, high: 125, low: 118, close: 123, volume: 1000 },\n { date: new Date('2024-01-02'), open: 123, high: 128, low: 121, close: 126, volume: 1200 },\n { date: new Date('2024-01-03'), open: 126, high: 130, low: 124, close: 129, volume: 1400 }\n ],\n xName: 'date',\n type: 'Candle',\n high: 'high',\n low: 'low',\n open: 'open',\n close: 'close',\n volume: 'volume',\n name: 'Stock'\n};\n\nconst indicator: StockChartIndicatorModel = {\n type: 'Sma',\n field: 'Close',\n seriesName: 'Stock'\n};\n\nconst trendline: StockChartTrendlineModel = {\n type: 'Linear'\n};\n\nconst period: StockChartPeriodModel = {\n intervalType: 'Months',\n interval: 1,\n text: '1M'\n};\n\nconst stockEvent: StockEventsSettingsModel = {\n date: new Date('2024-01-02'),\n text: 'E',\n description: 'Stock event',\n type: 'Flag'\n};\n\nconst annotation: StockChartAnnotationSettingsModel = {\n content: '\u003cdiv>Annotation\u003c/div>',\n coordinateUnits: 'Point',\n x: new Date('2024-01-02'),\n y: 126\n};\n\nconst legendSettings: StockChartLegendSettingsModel = {\n visible: true,\n position: 'Top'\n};\n\nconst stockChartOptions: StockChartModel = {\n primaryXAxis,\n tooltip,\n crosshair,\n series: [series],\n indicators: [indicator],\n trendlines: [trendline],\n periods: [period],\n stockEvents: [stockEvent],\n annotations: [annotation],\n legendSettings\n};\n\nconst rangeNavigatorSeries: RangeNavigatorSeriesModel = {\n dataSource: [\n { x: new Date('2024-01-01'), y: 123 },\n { x: new Date('2024-01-02'), y: 126 },\n { x: new Date('2024-01-03'), y: 129 }\n ],\n xName: 'x',\n yName: 'y',\n type: 'Line'\n};\n\nconst rangeNavigatorOptions: RangeNavigatorModel = {\n valueType: 'DateTime',\n series: [rangeNavigatorSeries],\n tooltip: {\n enable: true\n }\n};\n\nconst load = (args: IStockChartEventArgs): void => {\n // Stock Chart loading.\n};\n\nconst legendClick = (args: IStockLegendClickEventArgs): void => {\n // Stock Chart legend clicked.\n};\n\nconst legendRender = (args: IStockLegendRenderEventArgs): void => {\n // Stock Chart legend rendering.\n};\n\nconst stockEventRender = (args: IStockEventRenderArgs): void => {\n // Stock event marker rendering.\n};\n\nconst rangeChange = (args: IRangeChangeEventArgs): void => {\n // Stock Chart selected range changed.\n};\n\nconst selectorRender = (args: IRangeSelectorRenderEventArgs): void => {\n // Range selector rendering.\n};\n\nconst tooltipRender = (args: ITooltipRenderEventArgs): void => {\n // Tooltip rendering.\n};\n\nconst axisLabelRender = (args: IAxisLabelRenderEventArgs): void => {\n // Axis label rendering.\n};\n\nconst seriesRender = (args: ISeriesRenderEventArgs): void => {\n // Series rendering.\n};\n\nconst pointClick = (args: IPointEventArgs): void => {\n // Point clicked.\n};\n\nconst stockChartMouseMove = (args: IMouseEventArgs): void => {\n // Stock Chart mouse move.\n};\n\nconst beforeExport = (args: IExportEventArgs): void => {\n // Before Stock Chart export.\n};\n\nconst beforePrint = (args: IPrintEventArgs): void => {\n // Before Stock Chart print.\n};\n```\n\n## Understanding Stock Data Structure\n\nStock Chart expects data in a specific format with datetime and OHLC (Open, High, Low, Close) values.\n\n### Data Format\n\n```typescript\nconst stockData = [\n {\n x: new Date('2012-04-02T00:00:00.000Z'),\n open: 320.705719,\n high: 324.074066,\n low: 317.737732,\n close: 323.783783,\n volume: 45638000\n },\n {\n x: new Date('2012-04-03T00:00:00.000Z'),\n open: 323.028015,\n high: 324.299286,\n low: 319.639648,\n close: 321.631622,\n volume: 40857000\n }\n];\n```\n\n**Required fields for different series types:**\n\n- **Candle/HiloOpenClose:** `x`, `open`, `high`, `low`, `close`\n- **Hilo:** `x`, `high`, `low`\n- **Line/Spline:** `x`, `close` or any y-value field\n- **Volume:** `volume` field for optional volume visualization\n\n## Creating Your First Stock Chart with Data\n\n### Complete Working Example\n\n```typescript\nimport {\n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n Tooltip,\n RangeTooltip,\n Crosshair,\n CandleSeries\n} from '@syncfusion/ej2-react-charts';\nimport * as React from 'react';\n\nfunction App() {\n const data = [\n {\n x: new Date('2012-04-02'),\n open: 320.705719,\n high: 324.074066,\n low: 317.737732,\n close: 323.783783,\n volume: 45638000\n },\n {\n x: new Date('2012-04-03'),\n open: 323.028015,\n high: 324.299286,\n low: 319.639648,\n close: 321.631622,\n volume: 40857000\n },\n {\n x: new Date('2012-04-04'),\n open: 319.544556,\n high: 319.819824,\n low: 315.865875,\n close: 317.892883,\n volume: 32519000\n },\n {\n x: new Date('2012-04-05'),\n open: 316.436432,\n high: 318.533539,\n low: 314.599609,\n close: 316.476471,\n volume: 46327000\n }\n ];\n\n return (\n \u003cStockChartComponent\n id=\"stockchart\"\n primaryXAxis={{\n valueType: 'DateTime'\n }}\n >\n \u003cInject services={[DateTime, Tooltip, RangeTooltip, Crosshair, CandleSeries]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={data}\n type=\"Candle\"\n xName=\"x\"\n high=\"high\"\n low=\"low\"\n open=\"open\"\n close=\"close\"\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n\nexport default App;\n```\n\n### Key Configuration Points\n\n1. **Primary X-axis with DateTime:** Always set `valueType: 'DateTime'` for stock data.\n2. **Series dataSource:** Bind your data array to the Stock Chart series.\n3. **Series type:** Choose from `Candle`, `Line`, `Spline`, `Hilo`, and `HiloOpenClose`.\n4. **Field mapping:** Map data fields to chart properties such as `xName`, `high`, `low`, `open`, and `close`.\n\n## Adding Chart Title\n\nProvide context with a descriptive title:\n\n```typescript\n\u003cStockChartComponent\n id=\"stockchart\"\n title=\"AAPL Stock Price\"\n primaryXAxis={{ valueType: 'DateTime' }}\n>\n {/* series configuration */}\n\u003c/StockChartComponent>\n```\n\n## Adding Crosshair for Precise Reading\n\nCrosshair adds vertical and horizontal lines to help users read exact values:\n\n```typescript\n\u003cStockChartComponent\n id=\"stockchart\"\n title=\"Stock Price with Crosshair\"\n primaryXAxis={{ valueType: 'DateTime' }}\n crosshair={{\n enable: true,\n lineType: 'Both'\n }}\n>\n \u003cInject services={[DateTime, Tooltip, RangeTooltip, Crosshair, CandleSeries]} />\n {/* series */}\n\u003c/StockChartComponent>\n```\n\n## Adding Trackball for Multi-Series\n\nTrackball shows a shared tooltip across all series at the mouse position:\n\n```typescript\n\u003cStockChartComponent\n id=\"stockchart\"\n primaryXAxis={{ valueType: 'DateTime' }}\n crosshair={{ enable: true }}\n tooltip={{ enable: true, shared: true }}\n>\n \u003cInject services={[DateTime, Tooltip, RangeTooltip, Crosshair, CandleSeries]} />\n {/* series */}\n\u003c/StockChartComponent>\n```\n\n## Complete Starter Template\n\nHere's a complete, production-ready starter template:\n\n```typescript\nimport {\n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n Tooltip,\n RangeTooltip,\n Crosshair,\n LineSeries,\n SplineSeries,\n CandleSeries,\n HiloOpenCloseSeries,\n HiloSeries,\n RangeAreaSeries,\n Trendlines\n} from '@syncfusion/ej2-react-charts';\nimport * as React from 'react';\n\nfunction StockChartApp() {\n const stockData = [\n { x: new Date('2012-04-02'), open: 85.97, high: 90.58, low: 85.97, close: 90.58, volume: 660187068 },\n { x: new Date('2012-04-09'), open: 89.02, high: 92.50, low: 88.50, close: 92.90, volume: 490033264 },\n { x: new Date('2012-04-16'), open: 92.52, high: 93.00, low: 88.50, close: 92.52, volume: 450167016 }\n ];\n\n return (\n \u003cdiv style={{ padding: '20px' }}>\n \u003cStockChartComponent\n id=\"stockchart\"\n title=\"Stock Price Analysis\"\n primaryXAxis={{ valueType: 'DateTime' }}\n crosshair={{ enable: true }}\n tooltip={{ enable: true }}\n height=\"450px\"\n >\n \u003cInject services={[\n DateTime,\n Tooltip,\n RangeTooltip,\n Crosshair,\n LineSeries,\n SplineSeries,\n CandleSeries,\n HiloOpenCloseSeries,\n HiloSeries,\n RangeAreaSeries,\n Trendlines\n ]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type=\"Candle\"\n xName=\"x\"\n high=\"high\"\n low=\"low\"\n open=\"open\"\n close=\"close\"\n volume=\"volume\"\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n \u003c/div>\n );\n}\n\nexport default StockChartApp;\n```\n\n## Troubleshooting\n\n**Chart not displaying:**\n\n- Ensure the `DateTime` module is injected.\n- Verify `primaryXAxis.valueType` is set to `'DateTime'`.\n- Check the data format. The x field should contain valid `Date` objects.\n- Confirm the series type module is injected, such as `CandleSeries` for candle charts.\n\n**Data not showing:**\n\n- Verify field mappings such as `xName`, `high`, `low`, `open`, and `close`.\n- Check that the data array is not empty.\n- Ensure date values are valid `Date` objects.\n\n**Console errors about modules:**\n\n- Add the missing module to the `Inject` services array.\n- Import the module from `@syncfusion/ej2-react-charts`.\n\n## Next Steps\n\nAfter getting your basic stock chart running:\n\n1. **Explore different series types** - Try Line, Spline, Hilo, HiloOpenClose, and Candle.\n2. **Add period selector** - Add quick navigation buttons for date ranges such as 1D, 5D, and 1M.\n3. **Configure range selector** - Add thumb-based range selection.\n4. **Add technical indicators** - Add SMA, EMA, RSI, MACD, and Bollinger Bands.\n5. **Customize appearance** - Configure colors, themes, and gradients.\n6. **Add stock events** - Mark significant events on the chart.\n7. **Enable export/print** - Allow users to save or print charts.\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":42107,"content_sha256":"16a80b0d8e2017892f09024f8e9617b0b3a695b75ba5095629a3116d78b5c237"},{"filename":"references/interactive-features.md","content":"# Interactive Features: Legend, Tooltip, and Crosshair\n\nStock Chart provides three key interactive features for enhanced user experience: Legend for series information, Tooltip for point details on hover, and Crosshair for precise value reading.\n\n## Table of Contents\n> Reference API: [references/api.md](./api.md)\n\n- [Legend](#legend)\n - [Enabling Legend](#enabling-legend)\n - [Position and Alignment](#position-and-alignment)\n - [Customization](#legend-customization)\n - [Legend Title](#legend-title)\n - [Legend Template](#legend-template)\n- [Tooltip](#tooltip)\n - [Enabling Tooltip](#enabling-tooltip)\n - [Format Customization](#tooltip-format-customization)\n - [Position Control](#tooltip-position)\n - [Appearance Styling](#tooltip-appearance)\n- [Crosshair](#crosshair)\n - [Enabling Crosshair](#enabling-crosshair)\n - [Axis Tooltips](#crosshair-axis-tooltips)\n - [Customization](#crosshair-customization)\n - [Trackball](#trackball-shared-tooltip)\n\n## Legend\n\nLegend provides information about the series rendered in the Stock Chart. It's especially useful when displaying multiple series or comparing different stocks.\n\n### Enabling Legend\n\nEnable legend by setting `visible` to `true` in `legendSettings`:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n CandleSeries,\n StockLegend\n} from '@syncfusion/ej2-react-charts';\n\nfunction LegendChart() {\n const stockData = [\n // Stock data...\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n legendSettings={{ visible: true }}\n >\n \u003cInject services={[DateTime, CandleSeries, StockLegend]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n name='AAPL'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n**Important:** Inject `StockLegend` module to use legend features.\n\n### Position and Alignment\n\nLegend can be positioned at `Left`, `Right`, `Top`, `Bottom`, or `Custom` locations.\n\n**Bottom position (default):**\n```typescript\n\u003cStockChartComponent\n legendSettings={{ \n visible: true,\n position: 'Bottom' // Default position\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Top position:**\n```typescript\n\u003cStockChartComponent\n legendSettings={{ \n visible: true,\n position: 'Top'\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Custom position with x, y coordinates:**\n```typescript\n\u003cStockChartComponent\n legendSettings={{ \n visible: true,\n position: 'Custom',\n location: { x: 100, y: 50 }\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Legend alignment:**\n\nAlign legend as `Center`, `Far`, or `Near`:\n\n```typescript\n\u003cStockChartComponent\n legendSettings={{ \n visible: true,\n position: 'Bottom',\n alignment: 'Center' // 'Center', 'Far', or 'Near'\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n### Legend Customization\n\n**Legend icon shape:**\n\nChange the legend icon using `legendShape` in series:\n\n```typescript\n\u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n legendShape='Circle' // Circle, Rectangle, Triangle, Diamond, etc.\n name='Stock Price'\n/>\n```\n\n**Legend size:**\n\nControl legend dimensions with `width` and `height`:\n\n```typescript\n\u003cStockChartComponent\n legendSettings={{ \n visible: true,\n width: '300px', // Legend width\n height: '100px' // Legend height\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Legend item size:**\n\nCustomize icon size with `shapeHeight` and `shapeWidth`:\n\n```typescript\n\u003cStockChartComponent\n legendSettings={{ \n visible: true,\n shapeHeight: 15, // Icon height\n shapeWidth: 15 // Icon width\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Collapsing legend items:**\n\nSkip legend for a specific series by providing an empty series name:\n\n```typescript\n\u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Line'\n name='' // Empty name - series won't appear in legend\n/>\n```\n\n### Legend Title\n\nAdd a title to the legend:\n\n```typescript\n\u003cStockChartComponent\n legendSettings={{ \n visible: true,\n title: 'Stock Symbols',\n titleStyle: {\n fontFamily: 'Arial',\n fontSize: '14px',\n fontWeight: 'bold',\n color: '#333333',\n textAlignment: 'Center'\n },\n titlePosition: 'Top', // 'Top', 'Left', 'Right'\n maximumTitleWidth: 200\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n### Legend Template\n\nCustomize legend items with HTML templates:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n CandleSeries,\n StockLegend\n } from '@syncfusion/ej2-react-charts';\nfunction LegendTemplateChart() {\n const stockData = [ /* data */ ];\n\n const legendTemplate = (args) => {\n return (\n \u003cdiv style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n \u003cdiv style={{\n width: '16px',\n height: '16px',\n backgroundColor: args.fill,\n borderRadius: '50%'\n }}>\u003c/div>\n \n \u003cspan style={{ fontWeight: 'bold' }}>{args.text}\u003c/span>\n \n \u003cspan style={{ color: '#666' }}>\n ({args.series?.dataSource?.length ?? 0} points)\n \u003c/span>\n \u003c/div>\n );\n };\n\n return (\n \u003cStockChartComponent\n legendSettings={{ \n visible: true,\n template: legendTemplate\n }}\n >\n \u003cInject services={[DateTime, CandleSeries, StockLegend]} />\n {/* ... series ... */}\n \u003c/StockChartComponent>\n );\n}\nexport default LegendTemplateChart;\n```\n\n### Complete Legend Example\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n CandleSeries,\n LineSeries,\n StockLegend\n} from '@syncfusion/ej2-react-charts';\n\nfunction CompleteLegendChart() {\n const applData = [ /* AAPL stock data */ ];\n const googData = [ /* GOOG stock data */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Comparison'\n primaryXAxis={{ valueType: 'DateTime' }}\n legendSettings={{\n visible: true,\n position: 'Bottom',\n alignment: 'Center',\n shapeHeight: 12,\n shapeWidth: 12,\n title: 'Stocks',\n titleStyle: {\n fontSize: '12px',\n fontWeight: 'bold'\n }\n }}\n >\n \u003cInject services={[DateTime, CandleSeries, LineSeries, StockLegend]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={applData}\n type='Line'\n xName='x'\n yName='close'\n name='AAPL'\n legendShape='Circle'\n fill='#0080ff'\n />\n \u003cStockChartSeriesDirective\n dataSource={googData}\n type='Line'\n xName='x'\n yName='close'\n name='GOOG'\n legendShape='Diamond'\n fill='#ff0080'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n## Tooltip\n\nTooltips display point details when users hover over the chart.\n\n### Enabling Tooltip\n\nEnable tooltip by setting `enable` to `true`:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n CandleSeries,\n Tooltip\n} from '@syncfusion/ej2-react-charts';\n\nfunction TooltipChart() {\n const stockData = [ /* data */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n tooltip={{ enable: true }}\n >\n \u003cInject services={[DateTime, CandleSeries, Tooltip]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n**Important:** Inject `Tooltip` module to use tooltip features.\n\n### Tooltip Format Customization\n\nCustomize tooltip content with format strings:\n\n```typescript\n\u003cStockChartComponent\n tooltip={{ \n enable: true,\n format: '${series.name} ${point.x}: Open: ${point.open}, Close: ${point.close}'\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Available format tokens:**\n- `${series.name}` - Series name\n- `${point.x}` - X-axis value (date)\n- `${point.y}` - Y-axis value\n- `${point.open}` - Open price\n- `${point.high}` - High price\n- `${point.low}` - Low price\n- `${point.close}` - Close price\n- `${point.volume}` - Volume\n\n**Examples:**\n\nSimple format:\n```typescript\ntooltip={{ \n enable: true,\n format: 'Price: ${point.close}'\n}}\n```\n\nDetailed format:\n```typescript\ntooltip={{ \n enable: true,\n format: '${point.x}\u003cbr/>O: ${point.open}\u003cbr/>H: ${point.high}\u003cbr/>L: ${point.low}\u003cbr/>C: ${point.close}'\n}}\n```\n\n### Inline Tooltip Formatting\n\nDateTime and number format specifiers can be applied directly to supported tooltip tokens within the `format` property. This allows stock values to be formatted without using the `tooltipRender` event.\n\n```typescript\n\u003cStockChartComponent\n primaryXAxis={{\n valueType: 'DateTime'\n }}\n tooltip={{\n enable: true,\n format: '\u003cb>${point.x:MMM yyyy}\u003c/b>\u003cbr/>Open: ${point.open:c2}\u003cbr/>High: ${point.high:c2}\u003cbr/>Low: ${point.low:c2}\u003cbr/>Close: ${point.close:c2}'\n }}\n>\n {/* chart */}\n\u003c/StockChartComponent>\n``*\n\nIn this example:\n\n- `${point.x:M*M yyyy}` formats the X-axis DateTi*e value as an abbreviated month an* year.\n- `${point.open:c2}` format* the opening price as currency wit* two decimal places.\n- `${point.hi*h:c2}` formats the highest price a* currency with two decimal places.*- `${point.low:c2}` formats the lo*est price as currency with two dec*mal places.\n- `${point.close:c2}` *ormats the closing price as curren*y with two decimal places.\n\nThe fo*lowing example formats the closing*price with two decimal places and *he volume as a number without decimal places:\n\n```typescript\n\u003cStockChartComponent\n tooltip={{\n enable: true,\n format: '\u003cb>${series.name}\u003c/b>\u003cbr/>Date: ${point.x:dd MMM yyyy}\u003cbr/>Close: ${point.close:n2}\u003cbr/>Volume: ${point.volume:n0}'\n }}\n>\n {/* chart */}\n\u003c/StockChartComponent>\n```\n\n**Note:** Add the format specifier inside the tooltip token after a colon, such as `${point.close:n2}`. The formatted output follows the Stock Chart's current locale.\n\n### Tooltip Position\n\nControl tooltip position relative to the mouse:\n\n```typescript\n\u003cStockChartComponent\n tooltip={{ \n enable: true,\n position: 'Nearest' // Tooltip follows mouse closely\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Position options:**\n- `'Auto'` - Positioned automatically (default)\n- `'Nearest'` - Stays near the mouse cursor\n\n### Tooltip Appearance\n\nCustomize tooltip background, border, and text style:\n\n```typescript\n\u003cStockChartComponent\n tooltip={{ \n enable: true,\n fill: '#333333', // Background color\n border: {\n width: 2,\n color: '#0080ff'\n },\n textStyle: {\n fontFamily: 'Arial',\n fontSize: '14px',\n fontWeight: 'normal',\n color: '#ffffff'\n }\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n### Complete Tooltip Example\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n CandleSeries,\n Tooltip,\n RangeTooltip\n} from '@syncfusion/ej2-react-charts';\n\nfunction StyledTooltipChart() {\n const stockData = [ /* data */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Price with Custom Tooltip'\n primaryXAxis={{ valueType: 'DateTime' }}\n tooltip={{\n enable: true,\n shared: false,\n format: '\u003cb>${point.x}\u003c/b>\u003cbr/>Open: \u003cb>${point.open}\u003c/b>\u003cbr/>High: \u003cb>${point.high}\u003c/b>\u003cbr/>Low: \u003cb>${point.low}\u003c/b>\u003cbr/>Close: \u003cb>${point.close}\u003c/b>',\n fill: 'rgba(0, 0, 0, 0.8)',\n border: { width: 1, color: '#0080ff' },\n textStyle: {\n fontSize: '12px',\n color: '#ffffff'\n },\n position: 'Nearest'\n }}\n >\n \u003cInject services={[DateTime, CandleSeries, Tooltip, RangeTooltip]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n## Crosshair\n\nCrosshair displays vertical and horizontal lines to help users read exact values at the mouse position.\n\n### Enabling Crosshair\n\nEnable crosshair lines:\n\n```typescript\nimport { \n StockChartComponent,\n Inject,\n DateTime,\n CandleSeries,\n Crosshair\n} from '@syncfusion/ej2-react-charts';\n\nfunction CrosshairChart() {\n const stockData = [ /* data */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n crosshair={{ enable: true }}\n >\n \u003cInject services={[DateTime, CandleSeries, Crosshair]} />\n {/* ... series ... */}\n \u003c/StockChartComponent>\n );\n}\n```\n\n**Important:** Inject `Crosshair` module to use crosshair features.\n\n**Line type options:**\n```typescript\ncrosshair={{ \n enable: true,\n lineType: 'Both' // 'Vertical', 'Horizontal', or 'Both'\n}}\n```\n\n### Crosshair Axis Tooltips\n\nEnable axis value tooltips on the crosshair:\n\n```typescript\n\u003cStockChartComponent\n primaryXAxis={{ \n valueType: 'DateTime',\n crosshairTooltip: { enable: true }\n }}\n primaryYAxis={{\n crosshairTooltip: { enable: true }\n }}\n crosshair={{ enable: true }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n### Crosshair Customization\n\nCustomize crosshair line and tooltip appearance:\n\n```typescript\n\u003cStockChartComponent\n primaryXAxis={{ \n valueType: 'DateTime',\n crosshairTooltip: { \n enable: true,\n fill: '#0080ff',\n textStyle: {\n color: '#ffffff',\n fontSize: '12px'\n }\n }\n }}\n primaryYAxis={{\n crosshairTooltip: { \n enable: true,\n fill: '#ff8000',\n textStyle: {\n color: '#ffffff',\n fontSize: '12px'\n }\n }\n }}\n crosshair={{ \n enable: true,\n line: {\n width: 2,\n color: '#0080ff',\n dashArray: '5,5' // Dashed line\n } , lineType: 'Both'\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Snap to data:**\n\nMake crosshair snap to nearest data point:\n\n```typescript\n\u003cStockChartComponent\n crosshair={{ \n enable: true,\n snapToData: true // Snaps to nearest point\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n### Complete Crosshair Example\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n CandleSeries,\n Crosshair,\n RangeTooltip\n} from '@syncfusion/ej2-react-charts';\n\nfunction StyledCrosshairChart() {\n const stockData = [ /* data */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Price with Crosshair'\n primaryXAxis={{ \n valueType: 'DateTime',\n crosshairTooltip: { \n enable: true,\n fill: 'rgba(0, 128, 255, 0.9)',\n textStyle: { color: '#ffffff' }\n }\n }}\n primaryYAxis={{\n crosshairTooltip: { \n enable: true,\n fill: 'rgba(255, 128, 0, 0.9)',\n textStyle: { color: '#ffffff' }\n }\n }}\n crosshair={{ \n enable: true,\n lineType: 'Both',\n line: {\n width: 1,\n color: '#0080ff',\n dashArray: '5,5'\n },\n snapToData: true\n }}\n >\n \u003cInject services={[DateTime, CandleSeries, Crosshair, RangeTooltip]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n### Trackball (Shared Tooltip)\n\nTrackball shows a shared tooltip across all series at the crosshair position, perfect for multi-series charts:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n LineSeries,\n Crosshair,\n Tooltip\n} from '@syncfusion/ej2-react-charts';\n\nfunction TrackballChart() {\n const applData = [ /* AAPL data */ ];\n const googData = [ /* GOOG data */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Comparison with Trackball'\n primaryXAxis={{ valueType: 'DateTime' }}\n crosshair={{ enable: true }}\n tooltip={{ \n enable: true,\n shared: true // Enables trackball\n }}\n >\n \u003cInject services={[DateTime, LineSeries, Crosshair, Tooltip]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={applData}\n type='Line'\n xName='x'\n yName='close'\n name='AAPL'\n />\n \u003cStockChartSeriesDirective\n dataSource={googData}\n type='Line'\n xName='x'\n yName='close'\n name='GOOG'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\nexport default TrackballChart;\n```\n\n**Key for trackball:**\n- `crosshair={{ enable: true }}` - Enables crosshair lines\n- `tooltip={{ enable: true, shared: true }}` - Enables shared tooltip (trackball)\n\n## Combining All Interactive Features\n\nComplete example with legend, tooltip, and crosshair:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n CandleSeries,\n LineSeries,\n StockLegend,\n Tooltip,\n RangeTooltip,\n Crosshair\n} from '@syncfusion/ej2-react-charts';\n\nfunction FullyInteractiveChart() {\n const stockData = [ /* data */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Fully Interactive Stock Chart'\n primaryXAxis={{ \n valueType: 'DateTime',\n crosshairTooltip: { enable: true }\n }}\n primaryYAxis={{\n crosshairTooltip: { enable: true }\n }}\n legendSettings={{\n visible: true,\n position: 'Bottom'\n }}\n tooltip={{\n enable: true,\n shared: true,\n format: '\u003cb>${point.x}\u003c/b>\u003cbr/>Open: ${point.open}\u003cbr/>Close: ${point.close}'\n }}\n crosshair={{\n enable: true,\n lineType: 'Both'\n }}\n >\n \u003cInject services={[\n DateTime, \n CandleSeries, \n LineSeries,\n StockLegend, \n Tooltip, \n RangeTooltip,\n Crosshair\n ]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n name='Stock Price'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n\nexport default FullyInteractiveChart;\n```\n\n## Best Practices\n\n**Legend:**\n- Use legend for multiple series comparison\n- Keep legend items concise with short names\n- Position legend to avoid overlapping chart data\n- Use legend template for rich, branded content\n\n**Tooltip:**\n- Enable tooltips for all stock charts (essential for detail viewing)\n- Format tooltips to show relevant OHLC data\n- Use shared tooltips for multi-series charts\n- Keep tooltip styling consistent with application theme\n\n**Crosshair:**\n- Enable crosshair for precise value reading\n- Use axis tooltips to show exact axis values\n- Enable snapToData for cleaner point selection\n- Combine with trackball for multi-series analysis\n\n**Performance:**\n- All three features are lightweight and can be used together\n- No performance impact for typical datasets (\u003c10,000 points)\n- Consider disabling features on mobile for touch optimization\n\n---\n\n## Mouse and Chart Events\n\nThe Stock Chart provides comprehensive mouse and interaction events for tracking user interactions and building custom behaviors.\n\n### Point Interaction Events\n\n#### pointClick\nFired when a data point is clicked.\n\n```typescript\nimport { StockChartComponent } from '@syncfusion/ej2-react-charts';\n\nfunction PointClickExample() {\n const handlePointClick = (args) => {\n console.log('Clicked point at:', args.x);\n console.log('Point value:', args.y);\n console.log('Series index:', args.seriesIndex);\n console.log('Point index:', args.pointIndex);\n };\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n pointClick={handlePointClick}\n >\n {/* Series configuration */}\n \u003c/StockChartComponent>\n );\n}\n```\n\n**Event Args:**\n- `pointIndex: number` — Index of clicked point\n- `seriesIndex: number` — Index of clicked series\n- `x: Date | number` — X-axis value\n- `y: number` — Y-axis value\n\n#### pointMove\nFired when mouse moves over a data point.\n\n```typescript\nconst handlePointMove = (args) => {\n console.log('Moving over point:', args.x);\n // Update UI based on current point\n};\n\n\u003cStockChartComponent pointMove={handlePointMove} />\n```\n\n### Mouse Events\n\nStock Chart provides fine-grained mouse event tracking.\n\n#### stockChartMouseClick\nTriggers when clicking on the chart area.\n\n```typescript\nconst handleMouseClick = (args) => {\n console.log('Chart clicked at coordinates:', args.x, args.y);\n};\n\n\u003cStockChartComponent stockChartMouseClick={handleMouseClick} />\n```\n\n#### stockChartMouseDown\nTriggers on mouse down event.\n\n```typescript\nconst handleMouseDown = (args) => {\n console.log('Mouse down');\n // Start drag operation or selection\n};\n\n\u003cStockChartComponent stockChartMouseDown={handleMouseDown} />\n```\n\n#### stockChartMouseUp\nTriggers on mouse up event.\n\n```typescript\nconst handleMouseUp = (args) => {\n console.log('Mouse up');\n // End drag operation or selection\n};\n\n\u003cStockChartComponent stockChartMouseUp={handleMouseUp} />\n```\n\n#### stockChartMouseMove\nTriggers when hovering over the stock chart.\n\n```typescript\nconst handleMouseMove = (args) => {\n console.log('Mouse position:', args.x, args.y);\n // Update crosshair or overlay based on position\n};\n\n\u003cStockChartComponent stockChartMouseMove={handleMouseMove} />\n```\n\n#### stockChartMouseLeave\nTriggers when cursor leaves the chart area.\n\n```typescript\nconst handleMouseLeave = (args) => {\n console.log('Mouse left chart');\n // Hide tooltips or reset UI state\n};\n\n\u003cStockChartComponent stockChartMouseLeave={handleMouseLeave} />\n```\n\n### Combined Mouse Event Example\n\n```typescript\nimport React, { useState } from 'react';\nimport { StockChartComponent, StockChartSeriesCollectionDirective,\n StockChartSeriesDirective, Inject, DateTime, CandleSeries,\n Tooltip, RangeTooltip, Crosshair } from '@syncfusion/ej2-react-charts';\n\nfunction InteractiveChartWithMouseEvents() {\n const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });\n const [isHovering, setIsHovering] = useState(false);\n\n const handleMouseMove = (args) => {\n setMousePosition({ x: args.x, y: args.y });\n setIsHovering(true);\n };\n\n const handleMouseLeave = () => {\n setIsHovering(false);\n };\n\n const handlePointClick = (args) => {\n alert(`Clicked: ${args.x}, Value: ${args.y}`);\n };\n\n return (\n \u003cdiv>\n \u003cp>Status: {isHovering ? 'Over Chart' : 'Outside Chart'}\u003c/p>\n \u003cp>Position: X={mousePosition.x}, Y={mousePosition.y}\u003c/p>\n \n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n tooltip={{ enable: true }}\n crosshair={{ enable: true }}\n stockChartMouseMove={handleMouseMove}\n stockChartMouseLeave={handleMouseLeave}\n pointClick={handlePointClick}\n >\n \u003cInject services={[DateTime, CandleSeries, Tooltip, RangeTooltip, Crosshair]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n \u003c/div>\n );\n}\n\nexport default InteractiveChartWithMouseEvents;\n```\n\n### Legend Events\n\n#### legendClick\nFired when a legend item is clicked (e.g., to toggle series visibility).\n\n```typescript\nconst handleLegendClick = (args) => {\n console.log('Legend item clicked:', args.legendText);\n};\n\n\u003cStockChartComponent legendClick={handleLegendClick} />\n```\n\n#### legendRender\nFired when legend items are rendered (for customization).\n\n```typescript\nconst handleLegendRender = (args) => {\n // Customize legend appearance\n if (args.legendText.includes('AAPL')) {\n args.fill = '#ff0000'; // Red for Apple\n }\n};\n\n\u003cStockChartComponent legendRender={handleLegendRender} />\n```\n\n### Range Selection Events\n\n#### rangeChange\nEmitted when the selected date range changes via period selector or range selector.\n\n```typescript\nconst handleRangeChange = (args) => {\n console.log('Range changed');\n console.log('Start:', args.start);\n console.log('End:', args.end);\n // Refresh data or update analysis\n};\n\n\u003cStockChartComponent rangeChange={handleRangeChange} />\n```\n\n### Tooltip Event\n\n#### tooltipRender\nModify tooltip content before display.\n\n```typescript\nconst handleTooltipRender = (args) => {\n // Customize tooltip text\n args.text = `\u003cb>Price: ${args.text}\u003c/b>`;\n};\n\n\u003cStockChartComponent tooltipRender={handleTooltipRender} />\n```\n\n### Crosshair Event\n\n#### crosshairLabelRender\nTriggers before the crosshair tooltip is rendered.\n\n```typescript\nconst handleCrosshairLabelRender = (args) => {\n // Add custom formatting to crosshair label\n args.text = '

Implementing Syncfusion React Stock Charts The Stock Chart component is a specialized financial chart for visualizing stock price movements over time. It provides essential features for financial data analysis including candlestick/OHLC visualization, period selectors for quick date range navigation, range selectors for precise data filtering, technical indicators, and interactive tools like tooltips and crosshair. When to Use This Skill Use this skill when you need to: - Visualize financial/stock data - Display stock prices, trading volumes, market movements - Display OHLC data - Show Open,…

+ parseFloat(args.text).toFixed(2);\n};\n\n\u003cStockChartComponent crosshairLabelRender={handleCrosshairLabelRender} />\n```\n\n### Best Practices for Events\n\n1. **Event Performance:**\n - Minimize heavy computations in event handlers\n - Use debouncing for high-frequency events like `stockChartMouseMove`\n - Avoid DOM manipulation in real-time events\n\n2. **Event Handling:**\n - Use `stockChartMouseMove` for continuous tracking\n - Use `pointClick` for discrete selections\n - Use `rangeChange` for data filtering/refresh\n\n3. **User Experience:**\n - Provide visual feedback for mouse interactions\n - Use events to update related UI elements\n - Combine multiple events for complex interactions\n\n4. **Common Patterns:**\n - Point selection: Use `pointClick` + `selectedDataIndexes`\n - Range filtering: Use `rangeChange` + `dataSource` update\n - Hover effects: Use `pointMove` + `stockChartMouseLeave`\n - Export on demand: Trigger `export()` method on button click","content_type":"text/markdown; charset=utf-8","language":"markdown","size":27024,"content_sha256":"e0cc32cfbb353548b13753d44a2a49675c0873b0d9b7d7d3d272a33cc5a21066"},{"filename":"references/selectors.md","content":"# Period Selector and Range Selector\n\nStock Chart provides two powerful navigation tools: the Period Selector for quick date range buttons and the Range Selector for precise range selection with thumb controls.\n\n> Reference API: [references/api.md](./api.md)\n\n## Table of Contents\n- [Period Selector](#period-selector)\n - [Overview](#period-selector-overview)\n - [Periods Configuration](#periods-configuration)\n - [Interval Types](#interval-types)\n - [Enabling and Disabling](#enabling-and-disabling-period-selector)\n - [Complete Examples](#period-selector-complete-examples)\n- [Range Selector](#range-selector)\n - [Overview](#range-selector-overview)\n - [Selection Methods](#selection-methods)\n - [Enabling and Disabling](#enabling-and-disabling-range-selector)\n - [Complete Examples](#range-selector-complete-examples)\n- [Combining Both Selectors](#combining-both-selectors)\n\n## Period Selector\n\n### Period Selector Overview\n\nThe Period Selector provides quick navigation buttons (like 1D, 5D, 1M, 6M, YTD, 1Y, ALL) that allow users to instantly filter the stock chart to specific time ranges. By default, the period selector is **enabled** in Stock Chart.\n\n**Key features:**\n- Pre-configured time range buttons\n- Customizable button text and intervals\n- Multiple interval types (Days, Months, Years, etc.)\n- Default enabled state\n- Toggle visibility with `enablePeriodSelector`\n\n### Periods Configuration\n\nThe `periods` property accepts an array of period objects, each defining a button in the selector.\n\n**Period object structure:**\n```typescript\n{\n interval: number, // Count value for the period\n intervalType: string, // Type of interval (Days, Months, Years, etc.)\n text: string // Button label text\n}\n```\n\n### Basic Period Selector Example\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n CandleSeries,\n Tooltip,\n RangeTooltip,\n Crosshair\n} from '@syncfusion/ej2-react-charts';\nimport { type PeriodsModel } from '@syncfusion/ej2-react-charts';\n\nfunction PeriodSelectorChart() {\n const stockData = [\n // Your stock data...\n ];\n\n const periods: PeriodsModel[] = [\n { intervalType: 'Days', interval: 1, text: '1D' },\n { intervalType: 'Days', interval: 5, text: '5D' },\n { intervalType: 'Months', interval: 1, text: '1M' },\n { intervalType: 'Months', interval: 3, text: '3M' },\n { intervalType: 'Months', interval: 6, text: '6M' },\n { intervalType: 'Years', interval: 1, text: '1Y' },\n { text: 'All' } // 'All' shows entire dataset\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Price with Period Selector'\n primaryXAxis={{ valueType: 'DateTime' }}\n periods={periods}\n >\n \u003cInject services={[DateTime, CandleSeries, Tooltip, RangeTooltip, Crosshair]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\nexport function PeriodSelectorChart;\n```\n\n### Interval Types\n\nThe `intervalType` property supports the following values:\n\n1. **Auto** - Automatically determines best interval\n2. **Years** - Year-based intervals (1Y, 2Y, 5Y)\n3. **Quarter** - Quarter-based intervals (1Q, 2Q, 4Q)\n4. **Months** - Month-based intervals (1M, 3M, 6M)\n5. **Weeks** - Week-based intervals (1W, 2W, 4W)\n6. **Days** - Day-based intervals (1D, 5D, 10D)\n7. **Hours** - Hour-based intervals (1H, 6H, 12H)\n8. **Minutes** - Minute-based intervals (15Min, 30Min, 60Min)\n9. **Seconds** - Second-based intervals (30S, 60S)\n\n### Custom Period Configurations\n\n**Trading periods (intraday focus):**\n```typescript\nconst intradayPeriods: PeriodsModel[] = [\n { intervalType: 'Minutes', interval: 15, text: '15Min' },\n { intervalType: 'Minutes', interval: 30, text: '30Min' },\n { intervalType: 'Hours', interval: 1, text: '1H' },\n { intervalType: 'Hours', interval: 4, text: '4H' },\n { intervalType: 'Days', interval: 1, text: '1D' }\n];\n```\n\n**Long-term investment periods:**\n```typescript\nconst longTermPeriods: PeriodsModel[] = [\n { intervalType: 'Months', interval: 1, text: '1M' },\n { intervalType: 'Months', interval: 6, text: '6M' },\n { intervalType: 'Years', interval: 1, text: '1Y' },\n { intervalType: 'Years', interval: 3, text: '3Y' },\n { intervalType: 'Years', interval: 5, text: '5Y' },\n { text: 'All' }\n];\n```\n\n**Standard stock analysis periods:**\n```typescript\nconst standardPeriods: PeriodsModel[] = [\n { intervalType: 'Days', interval: 1, text: '1D' },\n { intervalType: 'Days', interval: 5, text: '5D' },\n { intervalType: 'Months', interval: 1, text: '1M' },\n { intervalType: 'Months', interval: 3, text: '3M' },\n { intervalType: 'Months', interval: 6, text: '6M' },\n { text: 'YTD' }, // Year to date\n { intervalType: 'Years', interval: 1, text: '1Y' },\n { text: 'All' }\n];\n```\n\n### Enabling and Disabling Period Selector\n\nThe period selector is **enabled by default**. Control visibility with `enablePeriodSelector`:\n\n**Disable period selector:**\n```typescript\n\u003cStockChartComponent\n id='stockchart'\n enablePeriodSelector={false} // Hides period selector\n primaryXAxis={{ valueType: 'DateTime' }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Explicitly enable (default behavior):**\n```typescript\n\u003cStockChartComponent\n id='stockchart'\n enablePeriodSelector={true} // Shows period selector\n periods={customPeriods}\n primaryXAxis={{ valueType: 'DateTime' }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n### Period Selector Complete Examples\n\n**Complete intraday trading chart:**\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n LineSeries,\n Tooltip,\n RangeTooltip,\n Crosshair\n} from '@syncfusion/ej2-react-charts';\nimport { type PeriodsModel } from '@syncfusion/ej2-react-charts';\nfunction IntradayChart() {\n const intradayData = [\n // Minute-level stock data...\n ];\n\n const periods: PeriodsModel[] = [\n { intervalType: 'Minutes', interval: 15, text: '15Min' },\n { intervalType: 'Minutes', interval: 30, text: '30Min' },\n { intervalType: 'Hours', interval: 1, text: '1H' },\n { intervalType: 'Hours', interval: 2, text: '2H' },\n { intervalType: 'Hours', interval: 4, text: '4H' },\n { intervalType: 'Days', interval: 1, text: '1D' }\n ];\n\n return (\n \u003cStockChartComponent\n id='intradayChart'\n title='Intraday Stock Analysis'\n primaryXAxis={{ valueType: 'DateTime' }}\n periods={periods}\n enablePeriodSelector={true}\n tooltip={{ enable: true, shared: true }}\n crosshair={{ enable: true }}\n >\n \u003cInject services={[DateTime, LineSeries, Tooltip, Crosshair]} />\n \n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Line'\n\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n## Range Selector\n\n### Range Selector Overview\n\nThe Range Selector (also called Range Navigator) displays a miniature view of the entire dataset with draggable thumbs on the left and right sides. Users can select precise date ranges by dragging the thumbs or clicking on labels.\n\n**Key features:**\n- Left and right draggable thumbs\n- Visual preview of entire dataset\n- Multiple selection methods\n- Default enabled state\n- Toggle visibility with `enableSelector`\n\n### Selection Methods\n\nUsers can select ranges in three ways:\n\n1. **Dragging thumbs** - Click and drag left/right thumb handles\n2. **Tapping labels** - Click on axis labels to move thumbs\n3. **Date range button** - Use date picker button for precise range selection\n\n### Range Selector Implementation\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n CandleSeries,\n Tooltip,\n RangeTooltip,\n Crosshair\n} from '@syncfusion/ej2-react-charts';\n\nfunction RangeSelectorChart() {\n const stockData = [\n { x: new Date('2012-01-02'), open: 85.97, high: 90.58, low: 85.97, close: 90.58 },\n { x: new Date('2012-02-02'), open: 89.02, high: 92.50, low: 88.50, close: 92.90 },\n // ... extensive dataset for full year or more\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Price with Range Selector'\n primaryXAxis={{ valueType: 'DateTime' }}\n enableSelector={true} // Enables range selector (default)\n >\n \u003cInject services={[DateTime, CandleSeries, Tooltip, RangeTooltip, Crosshair]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n### Enabling and Disabling Range Selector\n\nThe range selector is **enabled by default**. Control visibility with `enableSelector`:\n\n**Disable range selector:**\n```typescript\n\u003cStockChartComponent\n id='stockchart'\n enableSelector={false} // Hides range selector\n primaryXAxis={{ valueType: 'DateTime' }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Explicitly enable (default behavior):**\n```typescript\n\u003cStockChartComponent\n id='stockchart'\n enableSelector={true} // Shows range selector\n primaryXAxis={{ valueType: 'DateTime' }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n### Range Selector Complete Examples\n\n**Complete range selector with styling:**\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n AreaSeries,\n RangeAreaSeries,\n Tooltip,\n RangeTooltip,\n Crosshair\n} from '@syncfusion/ej2-react-charts';\n\nfunction StyledRangeSelectorChart() {\n const yearlyStockData = [\n // Full year or multi-year data...\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Historical Stock Analysis'\n primaryXAxis={{ valueType: 'DateTime' }}\n enableSelector={true}\n tooltip={{ enable: true }}\n crosshair={{ enable: true }}\n >\n \u003cInject services={[DateTime, AreaSeries, RangeAreaSeries, Tooltip, RangeTooltip, Crosshair]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={yearlyStockData}\n type='Area'\n xName='x'\n yName='close'\n fill='rgba(0, 128, 255, 0.3)'\n border={{ width: 2, color: '#0080ff' }}\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n## Combining Both Selectors\n\nBoth Period Selector and Range Selector can work together, providing users with multiple navigation options.\n\n### Complete Example with Both Selectors\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n CandleSeries,\n LineSeries,\n Tooltip,\n RangeTooltip,\n Crosshair,\n RangeAreaSeries\n} from '@syncfusion/ej2-react-charts';\nimport * as React from 'react';\nimport { type PeriodsModel } from '@syncfusion/ej2-react-charts';\nfunction ComprehensiveNavigationChart() {\n // Generate extensive stock data (multi-year dataset)\n const generateStockData = () => {\n const data = [];\n let date = new Date('2020-01-01');\n let open = 100;\n \n for (let i = 0; i \u003c 500; i++) {\n const change = (Math.random() - 0.5) * 10;\n const high = open + Math.abs(change) + Math.random() * 5;\n const low = open - Math.abs(change) - Math.random() * 5;\n const close = open + change;\n \n data.push({\n x: new Date(date),\n open: open,\n high: high,\n low: low,\n close: close,\n volume: Math.floor(Math.random() * 100000000)\n });\n \n date.setDate(date.getDate() + 1);\n open = close;\n }\n \n return data;\n };\n\n const stockData = generateStockData();\n\n const periods: PeriodsModel[] = [\n { intervalType: 'Days', interval: 1, text: '1D' },\n { intervalType: 'Days', interval: 5, text: '5D' },\n { intervalType: 'Months', interval: 1, text: '1M' },\n { intervalType: 'Months', interval: 3, text: '3M' },\n { intervalType: 'Months', interval: 6, text: '6M' },\n { text: 'YTD' },\n { intervalType: 'Years', interval: 1, text: '1Y' },\n { text: 'All' }\n ];\n\n return (\n \u003cdiv style={{ padding: '20px' }}>\n \u003cStockChartComponent\n id='comprehensiveChart'\n title='Stock Price - Complete Navigation'\n primaryXAxis={{ valueType: 'DateTime' }}\n periods={periods}\n enablePeriodSelector={true}\n enableSelector={true}\n tooltip={{ enable: true, shared: true }}\n crosshair={{ enable: true }}\n height='450px'\n >\n \u003cInject services={[\n DateTime, \n CandleSeries, \n LineSeries, \n RangeAreaSeries,\n Tooltip, \n RangeTooltip, \n Crosshair\n ]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n volume='volume'\n name='Stock Price'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n \u003c/div>\n );\n}\n\nexport default ComprehensiveNavigationChart;\n```\n\n### Use Case: Trading Dashboard\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n CandleSeries,\n Tooltip,\n RangeTooltip,\n Crosshair,\n} from '@syncfusion/ej2-react-charts';\nimport { type PeriodsModel } from '@syncfusion/ej2-react-charts';\nfunction TradingDashboard() {\n const liveStockData = [\n // Real-time or historical data...\n ];\n\n const tradingPeriods: PeriodsModel[] = [\n { intervalType: 'Minutes', interval: 5, text: '5Min' },\n { intervalType: 'Minutes', interval: 15, text: '15Min' },\n { intervalType: 'Hours', interval: 1, text: '1H' },\n { intervalType: 'Hours', interval: 4, text: '4H' },\n { intervalType: 'Days', interval: 1, text: '1D' },\n { intervalType: 'Days', interval: 5, text: '5D' }\n ];\n\n return (\n \u003cStockChartComponent\n id='tradingChart'\n title='Live Trading - AAPL'\n primaryXAxis={{ valueType: 'DateTime' }}\n periods={tradingPeriods}\n enablePeriodSelector={true}\n enableSelector={true}\n tooltip={{ \n enable: true, \n format: '${point.x}: Open: ${point.open}, High: ${point.high}, Low: ${point.low}, Close: ${point.close}'\n }}\n crosshair={{ enable: true }}\n >\n \u003cInject services={[DateTime, CandleSeries, Tooltip, RangeTooltip, Crosshair]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={liveStockData}\n type='Candle'\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n bearFillColor='#ff4444'\n bullFillColor='#44ff44'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\nexport default TradingDashboard;\n```\n\n## Best Practices\n\n### Period Selector Best Practices\n\n1. **Choose relevant periods** - Match periods to your data granularity and user needs\n2. **Limit button count** - 5-8 buttons is optimal, avoid overwhelming users\n3. **Use clear labels** - Standard labels like '1D', '1M', '1Y' are intuitive\n4. **Include \"All\" option** - Let users see the entire dataset\n5. **Order logically** - Arrange from shortest to longest duration\n\n### Range Selector Best Practices\n\n1. **Provide sufficient data** - Range selector works best with extensive datasets\n2. **Use for historical analysis** - Ideal for multi-month or multi-year data\n3. **Combine with period selector** - Offer both quick and precise navigation\n4. **Consider performance** - Very large datasets may need optimization\n\n### When to Disable Selectors\n\n**Disable Period Selector when:**\n- Data spans a short, fixed time range\n- Custom navigation UI is provided\n- Space is limited\n- Single time period is sufficient\n\n**Disable Range Selector when:**\n- Dataset is small (\u003c 30 days)\n- Fixed range is required\n- Screen space is constrained\n- Period selector alone is sufficient\n\n## Troubleshooting\n\n**Period buttons not working:**\n- Verify `periods` array is properly formatted\n- Check that `intervalType` values are valid\n- Ensure data spans the requested period range\n\n**Range selector thumbs not responding:**\n- Confirm `enableSelector={true}` is set\n- Verify dataset is large enough for range selection\n- Check that `RangeTooltip` module is injected\n\n**Navigation feels sluggish:**\n- Reduce data density for range selector preview\n- Consider data aggregation for large datasets\n- Optimize re-rendering in React component\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":17255,"content_sha256":"d82587bc1b5e0ebc4fc2e309fa83216d13b4993bb16f3bbae556c49891063100"},{"filename":"references/series-types.md","content":"# Series Types\n\nStock Chart supports 6 major series types for visualizing financial data. Each series type is designed for specific visualization needs and data patterns.\n\n> Reference API: [references/api.md](./api.md)\n\n## Table of Contents\n- [Overview](#overview)\n- [Line Series](#line-series)\n- [Spline Series](#spline-series)\n- [Hilo Series](#hilo-series)\n- [HiloOpenClose Series](#hiloopenclose-series)\n- [Hollow Candle Series](#hollow-candle-series)\n- [Candle Series](#candle-series)\n- [Series Dropdown Navigation](#series-dropdown-navigation)\n- [Choosing the Right Series Type](#choosing-the-right-series-type)\n\n## Overview\n\nThe Stock Chart provides a series dropdown button that allows users to switch between different visualization types. All six series types can be made available for users to navigate between them dynamically.\n\n**Available series types:**\n1. **Line** - Continuous line connecting close prices\n2. **Spline** - Smooth curved line for close prices\n3. **Hilo** - Vertical bars showing high-low range\n4. **HiloOpenClose** - OHLC bars with open/close ticks\n5. **Hollow Candle** - Traditional hollow/filled candles\n6. **Candle** - Solid candles showing OHLC data\n\n## Line Series\n\nLine series displays a continuous line connecting data points, typically used for close prices.\n\n### When to Use Line Series\n\n- Showing price trends over time\n- Emphasizing overall direction rather than intraday volatility\n- Comparing multiple stocks with clean visualization\n- Reducing visual complexity for long time periods\n\n### Implementation\n\nSet the series `type` to `'Line'` and inject `LineSeries` module:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n LineSeries,\n Tooltip,\n RangeTooltip,\n Crosshair\n} from '@syncfusion/ej2-react-charts';\n\nfunction LineSeriesChart() {\n const data = [\n { x: new Date('2012-04-02'), close: 323.78 },\n { x: new Date('2012-04-03'), close: 321.63 },\n { x: new Date('2012-04-04'), close: 317.89 },\n { x: new Date('2012-04-05'), close: 316.48 }\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n >\n \u003cInject services={[DateTime, LineSeries, Tooltip, RangeTooltip, Crosshair]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={data}\n type='Line'\n xName='x'\n yName='close'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n**Note:** Line series only requires `xName` and `yName` (typically 'close' for stock data).\n\n## Spline Series\n\nSpline series displays a smooth curved line through data points, providing an aesthetically pleasing visualization.\n\n### When to Use Spline Series\n\n- Creating smooth, professional-looking trend lines\n- Reducing visual noise from sharp price movements\n- Presentations and reports where smooth curves are preferred\n- Highlighting overall trends with elegant curves\n\n### Implementation\n\nSet the series `type` to `'Spline'` and inject `SplineSeries` module:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n SplineSeries,\n Tooltip,\n RangeTooltip,\n Crosshair\n} from '@syncfusion/ej2-react-charts';\n\nfunction SplineSeriesChart() {\n const data = [\n { x: new Date('2012-04-02'), close: 323.78 },\n { x: new Date('2012-04-03'), close: 321.63 },\n { x: new Date('2012-04-04'), close: 317.89 },\n { x: new Date('2012-04-05'), close: 316.48 }\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n >\n \u003cInject services={[DateTime, SplineSeries, Tooltip, RangeTooltip, Crosshair]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={data}\n type='Spline'\n xName='x'\n yName='close'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n## Hilo Series\n\nHilo series displays vertical bars showing the high-low range for each time period.\n\n### When to Use Hilo Series\n\n- Emphasizing price volatility and range\n- Showing intraday high-low spreads\n- Analyzing price ranges without open/close details\n- Simplifying OHLC data to just range information\n\n### Implementation\n\nSet the series `type` to `'Hilo'` and inject `HiloSeries` module:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n HiloSeries,\n Tooltip,\n RangeTooltip,\n Crosshair\n} from '@syncfusion/ej2-react-charts';\n\nfunction HiloSeriesChart() {\n const data = [\n { x: new Date('2012-04-02'), high: 324.07, low: 317.74 },\n { x: new Date('2012-04-03'), high: 324.30, low: 319.64 },\n { x: new Date('2012-04-04'), high: 319.82, low: 315.87 },\n { x: new Date('2012-04-05'), high: 318.53, low: 314.60 }\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n >\n \u003cInject services={[DateTime, HiloSeries, Tooltip, RangeTooltip, Crosshair]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={data}\n type='Hilo'\n xName='x'\n high='high'\n low='low'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n**Required fields:** `xName`, `high`, `low`\n\n## HiloOpenClose Series\n\nHiloOpenClose series displays OHLC (Open-High-Low-Close) bars with horizontal ticks for open and close values.\n\n### When to Use HiloOpenClose Series\n\n- Traditional OHLC bar charts\n- Showing all four price points clearly\n- Technical analysis requiring precise open/close levels\n- Preference for OHLC bars over candlesticks\n\n### Implementation\n\nSet the series `type` to `'HiloOpenClose'` and inject `HiloOpenCloseSeries` module:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n HiloOpenCloseSeries,\n Tooltip,\n RangeTooltip,\n Crosshair\n} from '@syncfusion/ej2-react-charts';\n\nfunction HiloOpenCloseChart() {\n const data = [\n { x: new Date('2012-04-02'), open: 320.71, high: 324.07, low: 317.74, close: 323.78 },\n { x: new Date('2012-04-03'), open: 323.03, high: 324.30, low: 319.64, close: 321.63 },\n { x: new Date('2012-04-04'), open: 319.54, high: 319.82, low: 315.87, close: 317.89 },\n { x: new Date('2012-04-05'), open: 316.44, high: 318.53, low: 314.60, close: 316.48 }\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n >\n \u003cInject services={[DateTime, HiloOpenCloseSeries, Tooltip, RangeTooltip, Crosshair]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={data}\n type='HiloOpenClose'\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n**Required fields:** `xName`, `high`, `low`, `open`, `close`\n\n## Hollow Candle Series\n\nHollow Candle series displays traditional candlesticks where hollow (empty) candles indicate price increase and filled candles indicate price decrease.\n\n### When to Use Hollow Candle Series\n\n- Traditional candlestick charting with hollow/filled distinction\n- Quickly identifying bullish (hollow) vs bearish (filled) periods\n- Technical analysis with classic candlestick patterns\n- Preference for hollow candles over solid candles\n\n### Implementation\n\nSet the series `type` to `'Candle'` and set `enableSolidCandle` to `false`:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n CandleSeries,\n Tooltip,\n RangeTooltip,\n Crosshair\n} from '@syncfusion/ej2-react-charts';\n\nfunction HollowCandleChart() {\n const data = [\n { x: new Date('2012-04-02'), open: 320.71, high: 324.07, low: 317.74, close: 323.78 },\n { x: new Date('2012-04-03'), open: 323.03, high: 324.30, low: 319.64, close: 321.63 },\n { x: new Date('2012-04-04'), open: 319.54, high: 319.82, low: 315.87, close: 317.89 },\n { x: new Date('2012-04-05'), open: 316.44, high: 318.53, low: 314.60, close: 316.48 }\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n >\n \u003cInject services={[DateTime, CandleSeries, Tooltip, RangeTooltip, Crosshair]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={data}\n type='Candle'\n enableSolidCandle={false} // Makes candles hollow\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n**Key difference:** `enableSolidCandle={false}` creates hollow candles instead of solid.\n\n## Candle Series\n\nCandle series displays solid candlesticks showing OHLC data. This is the most common and default series type for stock charts.\n\n### When to Use Candle Series\n\n- Standard stock price visualization (most common choice)\n- Showing all OHLC data with clear visual distinction\n- Technical analysis and candlestick pattern recognition\n- Default choice for most stock trading applications\n\n### Implementation\n\nSet the series `type` to `'Candle'` and inject `CandleSeries` module:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n CandleSeries,\n Tooltip,\n RangeTooltip,\n Crosshair\n} from '@syncfusion/ej2-react-charts';\n\nfunction CandleSeriesChart() {\n const data = [\n { x: new Date('2012-04-02'), open: 320.71, high: 324.07, low: 317.74, close: 323.78, volume: 45638000 },\n { x: new Date('2012-04-03'), open: 323.03, high: 324.30, low: 319.64, close: 321.63, volume: 40857000 },\n { x: new Date('2012-04-04'), open: 319.54, high: 319.82, low: 315.87, close: 317.89, volume: 32519000 },\n { x: new Date('2012-04-05'), open: 316.44, high: 318.53, low: 314.60, close: 316.48, volume: 46327000 }\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Price - Candle Chart'\n primaryXAxis={{ valueType: 'DateTime' }}\n >\n \u003cInject services={[DateTime, CandleSeries, Tooltip, RangeTooltip, Crosshair]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={data}\n type='Candle'\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n volume='volume'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n**Required fields:** `xName`, `high`, `low`, `open`, `close` \n**Optional field:** `volume` for volume-based features\n\n## Series Dropdown Navigation\n\nStock Chart includes a built-in series dropdown that allows users to switch between different series types dynamically.\n\n### Complete Example with All Series Types\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n LineSeries,\n SplineSeries,\n HiloSeries,\n HiloOpenCloseSeries,\n CandleSeries,\n Tooltip,\n RangeTooltip,\n Crosshair\n} from '@syncfusion/ej2-react-charts';\n\nfunction AllSeriesTypesChart() {\n const stockData = [\n { x: new Date('2012-04-02'), open: 85.97, high: 90.58, low: 85.97, close: 90.58, volume: 660187068 },\n { x: new Date('2012-04-09'), open: 89.02, high: 92.50, low: 88.50, close: 92.90, volume: 490033264 },\n { x: new Date('2012-04-16'), open: 92.52, high: 93.00, low: 88.50, close: 92.52, volume: 450167016 },\n { x: new Date('2012-04-23'), open: 92.26, high: 94.00, low: 90.50, close: 93.58, volume: 510440639 }\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='AAPL Stock Price - Multiple Series Types'\n primaryXAxis={{ valueType: 'DateTime' }}\n tooltip={{ enable: true }}\n crosshair={{ enable: true }}\n >\n \u003cInject services={[\n DateTime, \n LineSeries, \n SplineSeries, \n HiloSeries, \n HiloOpenCloseSeries, \n CandleSeries, \n Tooltip, \n RangeTooltip, \n Crosshair\n ]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle' // Default type\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n volume='volume'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\nWhen all series modules are injected, users can switch between them using the series dropdown button in the chart toolbar.\n\n## Choosing the Right Series Type\n\n| Series Type | Best For | Data Requirements |\n|-------------|----------|-------------------|\n| **Line** | Simple trends, comparisons | x, close |\n| **Spline** | Smooth trends, presentations | x, close |\n| **Hilo** | Price ranges, volatility | x, high, low |\n| **HiloOpenClose** | OHLC bars, technical analysis | x, open, high, low, close |\n| **Hollow Candle** | Traditional candlesticks | x, open, high, low, close |\n| **Candle** | Most common, standard visualization | x, open, high, low, close |\n\n**General recommendations:**\n- **For beginners:** Start with Line or Candle series\n- **For traders:** Use Candle or HiloOpenClose\n- **For presentations:** Use Spline for smooth appearance\n- **For volatility analysis:** Use Hilo or Candle\n- **For comparisons:** Use Line series for multiple stocks\n\n## Series Customization\n\nYou can customize series appearance:\n\n```typescript\n\u003cStockChartSeriesDirective\n dataSource={data}\n type='Candle'\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n bearFillColor='#ff0000' // Color for bearish candles\n bullFillColor='#00ff00' // Color for bullish candles\n name='Stock Price' // Name for legend\n/>\n```\n\nAll series types support color, opacity, and styling customization to match your application's design.\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":14330,"content_sha256":"71279cf02fa28997916b83cfdd59ff113be1f655b520e0d479766d6f30ee2b7d"},{"filename":"references/technical-analysis.md","content":"# Technical Analysis: Stock Events, Technical Indicators, and Trend Lines\n\nStock Chart provides comprehensive technical analysis tools including stock event markers, 10+ technical indicators, and 6 types of trend lines for in-depth financial data analysis.\n\n> Reference API: [references/api.md](./api.md)\n\n**Additional features from API:** `stockEvents`, `stockEventRender`, `StockChartIndicatorsDirective`, `StockChartTrendlinesDirective`, `indicatorType`\n\n## Table of Contents\n- [Stock Events](#stock-events)\n - [Overview](#stock-events-overview)\n - [Configuration](#stock-event-configuration)\n - [Events for Specific Series](#events-for-individual-series)\n - [Complete Examples](#stock-events-complete-examples)\n- [Technical Indicators](#technical-indicators)\n - [Overview](#technical-indicators-overview)\n - [Available Indicators](#available-indicator-types)\n - [Configuration](#indicator-configuration)\n - [Multiple Indicators](#using-multiple-indicators)\n- [Trend Lines](#trend-lines)\n - [Overview](#trend-lines-overview)\n - [Trend Line Types](#trend-line-types)\n - [Configuration](#trend-line-configuration)\n - [Complete Examples](#trend-lines-complete-examples)\n\n## Stock Events\n\n### Stock Events Overview\n\nStock Events visualize significant market events (earnings, dividends, splits, acquisitions) directly on the stock chart. Events are displayed as markers with customizable shapes, colors, and descriptions.\n\n**Key features:**\n- Multiple event types (Flag, Circle, Square, Triangle, etc.)\n- Customizable colors and text\n- Event descriptions on hover\n- Support for specific series targeting\n- Visual timeline of market events\n\n### Stock Event Configuration\n\nStock events are configured using the `stockEvents` property:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n SplineSeries,\n Tooltip\n} from '@syncfusion/ej2-react-charts';\n\nfunction StockEventsChart() {\n const stockData = [\n { x: new Date('2012-01-01'), close: 125.50 },\n { x: new Date('2012-02-01'), close: 128.30 },\n { x: new Date('2012-03-01'), close: 132.00 },\n { x: new Date('2012-04-01'), close: 135.75 },\n { x: new Date('2012-05-01'), close: 130.25 },\n // More data...\n ];\n\n const events: StockEventsSettingsModel[] = [\n {\n date: new Date('2012-02-01'),\n text: 'Q1 Earnings',\n description: 'Quarterly earnings release',\n type: 'Flag',\n background: '#6c757d',\n border: { color: '#6c757d', width: 2 }\n },\n {\n date: new Date('2012-04-01'),\n text: 'Dividend',\n description: 'Dividend payout announcement',\n type: 'Circle',\n background: '#28a745',\n border: { color: '#28a745', width: 2 }\n }\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Price with Events'\n primaryXAxis={{ valueType: 'DateTime' }}\n stockEvents={events}\n >\n \u003cInject services={[DateTime, SplineSeries, Tooltip]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Spline'\n xName='x'\n yName='close'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n**Stock Event Properties:**\n- `date` - Date when event occurred (Date object)\n- `text` - Short label for the event\n- `description` - Detailed description (shown on hover)\n- `type` - Event marker shape ('Flag', 'Circle', 'Square', 'Triangle', 'InvertedTriangle', 'ArrowUp', 'ArrowDown')\n- `background` - Background color\n- `border` - Border configuration (color, width)\n\n### Event Marker Types\n\n```typescript\nconst eventMarkerTypes = [\n { type: 'Flag', description: 'General events, announcements' },\n { type: 'Circle', description: 'Positive events, dividends' },\n { type: 'Square', description: 'Milestones, achievements' },\n { type: 'Triangle', description: 'Warnings, important dates' },\n { type: 'InvertedTriangle', description: 'Negative events, losses' },\n { type: 'ArrowUp', description: 'Price increases, upgrades' },\n { type: 'ArrowDown', description: 'Price decreases, downgrades' }\n];\n```\n\n### Events for Individual Series\n\nBy default, stock events appear for all series. Target specific series using `seriesIndexes`:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n LineSeries,\n Tooltip\n} from '@syncfusion/ej2-react-charts';\n\nfunction MultiSeriesEventsChart() {\n const applData = [ /* AAPL data */ ];\n const googData = [ /* GOOG data */ ];\n\n const events = [\n {\n date: new Date('2012-02-01'),\n text: 'AAPL Event',\n description: 'Apple product launch',\n type: 'Flag',\n background: '#0080ff',\n seriesIndexes: [0] // Only for first series (AAPL)\n },\n {\n date: new Date('2012-03-01'),\n text: 'GOOG Event',\n description: 'Google acquisition',\n type: 'Circle',\n background: '#ff8000',\n seriesIndexes: [1] // Only for second series (GOOG)\n }\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Multiple Series with Events'\n primaryXAxis={{ valueType: 'DateTime' }}\n stockEvents={events}\n >\n \u003cInject services={[DateTime, LineSeries, Tooltip]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={applData}\n type='Line'\n xName='x'\n yName='close'\n name='AAPL'\n />\n \u003cStockChartSeriesDirective\n dataSource={googData}\n type='Line'\n xName='x'\n yName='close'\n name='GOOG'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n### Stock Events Complete Examples\n\n**Financial calendar events:**\n```typescript\nfunction FinancialCalendarChart() {\n const stockData = [ /* yearly data */ ];\n\n const financialEvents = [\n {\n date: new Date('2012-02-15'),\n text: 'Q1',\n description: 'Q1 Earnings: $2.5B revenue, EPS $1.20',\n type: 'Flag',\n background: '#6c757d'\n },\n {\n date: new Date('2012-03-10'),\n text: 'DIV',\n description: 'Dividend: $0.50 per share',\n type: 'Circle',\n background: '#28a745'\n },\n {\n date: new Date('2012-05-15'),\n text: 'Q2',\n description: 'Q2 Earnings: $2.8B revenue, EPS $1.35',\n type: 'Flag',\n background: '#6c757d'\n },\n {\n date: new Date('2012-07-20'),\n text: 'SPLIT',\n description: '2-for-1 stock split',\n type: 'Square',\n background: '#007bff'\n },\n {\n date: new Date('2012-08-15'),\n text: 'Q3',\n description: 'Q3 Earnings: $3.1B revenue, EPS $1.55',\n type: 'Flag',\n background: '#6c757d'\n }\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Price with Financial Calendar'\n primaryXAxis={{ valueType: 'DateTime' }}\n stockEvents={financialEvents}\n tooltip={{ enable: true }}\n >\n \u003cInject services={[DateTime, SplineSeries, Tooltip]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Spline'\n xName='x'\n yName='close'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n## Technical Indicators\n\n### Technical Indicators Overview\n\nTechnical indicators are mathematical calculations based on historical price, volume, or open interest data that help forecast market direction and identify trading opportunities.\n\n**Supported indicators (10 types):**\n1. **Accumulation Distribution** - Money flow indicator\n2. **ATR (Average True Range)** - Volatility measure\n3. **EMA (Exponential Moving Average)** - Trend direction\n4. **SMA (Simple Moving Average)** - Trend direction\n5. **TMA (Triangular Moving Average)** - Smoothed trend\n6. **Momentum** - Rate of price change\n7. **MACD** - Trend and momentum\n8. **RSI (Relative Strength Index)** - Overbought/oversold\n9. **Stochastic** - Momentum oscillator\n10. **Bollinger Bands** - Volatility bands\n\n### Available Indicator Types\n\n#### 1. Accumulation Distribution\n\nCombines price and volume to show money flow:\n\n```typescript\nconst accumulationDistribution = {\n type: 'AccumulationDistribution',\n field: 'Close',\n seriesName: 'Stock',\n fill: '#6063ff',\n period: 14,\n volume: 'volume' // Required: volume field\n};\n```\n\n**Module:** `AccumulationDistributionIndicator`\n\n#### 2. Average True Range (ATR)\n\nMeasures volatility:\n\n```typescript\nconst atr = {\n type: 'Atr',\n field: 'Close',\n seriesName: 'Stock',\n fill: '#ff6347',\n period: 14\n};\n```\n\n**Module:** `AtrIndicator`\n\n#### 3. Exponential Moving Average (EMA)\n\nWeighted moving average giving more weight to recent data:\n\n```typescript\nconst ema = {\n type: 'Ema',\n field: 'Close',\n seriesName: 'Stock',\n fill: '#ff0000',\n period: 14\n};\n```\n\n**Module:** `EmaIndicator`\n\n#### 4. Simple Moving Average (SMA)\n\nAverage price over a specified period:\n\n```typescript\nconst sma = {\n type: 'Sma',\n field: 'Close',\n seriesName: 'Stock',\n fill: '#0000ff',\n period: 14\n};\n```\n\n**Module:** `SmaIndicator`\n\n#### 5. Triangular Moving Average (TMA)\n\nDoubly smoothed moving average:\n\n```typescript\nconst tma = {\n type: 'Tma',\n field: 'Close',\n seriesName: 'Stock',\n fill: '#00ff00',\n period: 14\n};\n```\n\n**Module:** `TmaIndicator`\n\n#### 6. Momentum\n\nShows rate of price change:\n\n```typescript\nconst momentum = {\n type: 'Momentum',\n field: 'Close',\n seriesName: 'Stock',\n fill: '#ff00ff',\n period: 14,\n upperLine: { color: '#ff0000' },\n lowerLine: { color: '#00ff00' }\n};\n```\n\n**Module:** `MomentumIndicator`\n\n#### 7. MACD (Moving Average Convergence Divergence)\n\nTrend and momentum indicator:\n\n```typescript\nconst macd = {\n type: 'Macd',\n field: 'Close',\n seriesName: 'Stock',\n fill: '#ff6347',\n fastPeriod: 12,\n slowPeriod: 26,\n period: 9,\n macdLine: { color: '#ff0000', width: 2 },\n macdPositiveColor: '#00ff00',\n macdNegativeColor: '#ff0000'\n};\n```\n\n**Module:** `MacdIndicator`\n\n#### 8. RSI (Relative Strength Index)\n\nMeasures momentum and overbought/oversold conditions:\n\n```typescript\nconst rsi = {\n type: 'Rsi',\n field: 'Close',\n seriesName: 'Stock',\n fill: '#6063ff',\n period: 14,\n overBought: 70, // Overbought threshold\n overSold: 30, // Oversold threshold\n upperLine: { color: '#ff0000' },\n lowerLine: { color: '#00ff00' }\n};\n```\n\n**Module:** `RsiIndicator`\n\n#### 9. Stochastic\n\nCompares closing price to price range:\n\n```typescript\nconst stochastic = {\n type: 'Stochastic',\n field: 'Close',\n seriesName: 'Stock',\n fill: '#ff00ff',\n kPeriod: 14,\n dPeriod: 3,\n overBought: 80,\n overSold: 20,\n upperLine: { color: '#ff0000' },\n lowerLine: { color: '#00ff00' },\n periodLine: { color: '#0000ff' }\n};\n```\n\n**Module:** `StochasticIndicator`\n\n#### 10. Bollinger Bands\n\nShows volatility bands around price:\n\n```typescript\nconst bollingerBands = {\n type: 'BollingerBands',\n field: 'Close',\n seriesName: 'Stock',\n fill: 'rgba(0, 128, 255, 0.2)',\n period: 14,\n standardDeviation: 2,\n upperLine: { color: '#ff0000', width: 1 },\n lowerLine: { color: '#00ff00', width: 1 }\n};\n```\n\n**Module:** `BollingerBands`\n\n### Indicator Configuration\n\nComplete example with indicator:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n StockChartIndicatorDirective,\n StockChartIndicatorsDirective,\n Inject,\n DateTime,\n CandleSeries,\n LineSeries,\n EmaIndicator,\n SmaIndicator,\n Tooltip\n} from '@syncfusion/ej2-react-charts';\n\nfunction IndicatorChart() {\n const stockData = [ /* OHLC data */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Price with Indicators'\n primaryXAxis={{ valueType: 'DateTime' }}\n tooltip={{ enable: true }}\n >\n \u003cInject services={[DateTime, CandleSeries, LineSeries, EmaIndicator, SmaIndicator, Tooltip]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n name='Stock'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003cStockChartIndicatorsDirective>\n \u003cStockChartIndicatorDirective\n type='Ema'\n field='Close'\n seriesName='Stock'\n fill='#ff0000'\n period={14}\n />\n \u003cStockChartIndicatorDirective\n type='Sma'\n field='Close'\n seriesName='Stock'\n fill='#0000ff'\n period={50}\n />\n \u003c/StockChartIndicatorsDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n### Indicator Events\n\nThe Stock Chart provides indicator events to track and manage indicators added or removed through the toolbar.\n\n- `beforeIndicatorChange`: Triggered before an indicator is added or removed. Set `args.cancel` to `true` to prevent the update.\n- `indicatorChanged`: Triggered after an indicator has been successfully added or removed.\n\n```typescript\nfunction IndicatorEventsChart() {\n const stockData = [ /* OHLC data */ ];\n\n const onBef*reIndicatorChange = (args: any): v*id => {\n console.log('Indica*or change requested:', args);\n\n *// Cancel the indicator update whe* required.\n if (args.indicatorT*pe === 'Macd') {\n args.cancel*= true;\n }\n };\n\n const onIndi*atorChanged = (args: any): void =&*t; {\n console.log('Indicator up*ated successfully:', args);\n };\n\n* return (\n \u003cStockChartCompon*nt\n id='stockchart'\n tit*e='Stock Price with Indicator Even*s'\n primaryXAxis={{ valueType* 'DateTime' }}\n indicatorType*{[\n 'Sma',\n 'Ema',\n 'Tma',\n 'Momentum',\n 'Atr',\n 'AccumulationDistribution',\n 'BollingerBands',\n 'Macd',\n 'Rsi',\n 'Stochastic'\n ]}\n * beforeIndicatorChange={onBeforeI*dicatorChange}\n indicatorChan*ed={onIndicatorChanged}\n >\n * \u003cInject\n services={[\n DateTime,\n LineSeries,\n AreaSeries,\n SplineSeries,\n CandleSeries,\n HiloOpenCloseSeries,\n HiloSeries,\n RangeAreaSeries,\n Trendlines,\n EmaIndicator,\n RsiIndicator,\n BollingerBands,\n TmaIndicator,\n MomentumIndicator,\n SmaIndicator,\n AtrIndicator,\n AccumulationDistributionIndicator,\n MacdIndicator,\n StochasticIndicator,\n Tooltip,\n RangeTooltip,\n StockLegend\n ]}\n />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n xName='date'\n high='high'\n low='low'\n open='open'\n close='close'\n volume='volume'\n name='Stock'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n#### Canceling an Indicator Update\n\nUse the `beforeIndicatorChange` event to validate the selected indicator before it is applied. Set `cancel` to `true` to prevent the toolbar action.\n\n```typescript\nconst onBeforeIndicatorChange = (args: any): void => {\n if (args.indicatorType === 'Macd') {\n args.cancel = true;\n console.log('MACD indicator update was canceled.');\n }\n};\n```\n\n#### Tracking Successful Indicator Updates\n\nUse the `indicatorChanged` event to perform an action after an indicator has been successfully added or removed.\n\n```typescript\nconst onIndicatorChanged = (args: any): void => {\n console.log('Indicator update completed:', args);\n};\n```\n\n**Note:** These events apply to indicator changes performed using the Stock Chart toolbar. The `beforeIndicatorChange` event supports canceling the update, whereas the `indicatorChanged` event is raised only after the update is completed successfully.\n\n### Using Multiple Indicators\n\nCombine multiple indicators for comprehensive analysis:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n StockChartIndicatorDirective,\n StockChartIndicatorsDirective,\n Inject,\n DateTime,\n CandleSeries,\n LineSeries,\n EmaIndicator,\n SmaIndicator,\n Tooltip, RsiIndicator,MacdIndicator, BollingerBands\n } from '@syncfusion/ej2-react-charts'\nexport function MultipleIndicatorsChart() {\n const stockData = [ /* data with volume */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Comprehensive Technical Analysis'\n primaryXAxis={{ valueType: 'DateTime' }}\n tooltip={{ enable: true, shared: true }}\n >\n \u003cInject services={[\n DateTime, CandleSeries, LineSeries,\n SmaIndicator, EmaIndicator, RsiIndicator, MacdIndicator,\n BollingerBands, Tooltip\n ]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n name='Stock'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003cStockChartIndicatorsDirective>\n {/* Bollinger Bands */}\n \u003cStockChartIndicatorDirective\n type='BollingerBands'\n field='Close'\n seriesName='Stock'\n fill='rgba(0, 128, 255, 0.1)'\n period={20}\n standardDeviation={2}\n />\n {/* SMA 50 */}\n \u003cStockChartIndicatorDirective\n type='Sma'\n field='Close'\n seriesName='Stock'\n fill='#0080ff'\n period={50}\n />\n {/* EMA 20 */}\n \u003cStockChartIndicatorDirective\n type='Ema'\n field='Close'\n seriesName='Stock'\n fill='#ff8000'\n period={20}\n />\n {/* RSI */}\n \u003cStockChartIndicatorDirective\n type='Rsi'\n field='Close'\n seriesName='Stock'\n fill='#6063ff'\n period={14}\n overBought={70}\n overSold={30}\n />\n \u003c/StockChartIndicatorsDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n## Trend Lines\n\n### Trend Lines Overview\n\nTrend lines show the direction and speed of price movement. They help identify support/resistance levels and potential breakouts.\n\n**Supported trend line types (6 types):**\n1. **Linear** - Best fit straight line\n2. **Exponential** - Curved line for exponential growth\n3. **Logarithmic** - Curved line for logarithmic growth\n4. **Polynomial** - Polynomial curve for fluctuating data\n5. **Power** - Power curve for specific rate measurements\n6. **Moving Average** - Smoothed average trend\n\n### Trend Line Types\n\n#### 1. Linear Trend Line\n\nBest fit straight line for simpler datasets:\n\n```typescript\nconst linearTrend = {\n type: 'Linear',\n name: 'Linear Trend',\n fill: '#ff0000',\n width: 2\n};\n```\n\n#### 2. Exponential Trend Line\n\nFor data rising/falling at increasing rates:\n\n```typescript\nconst exponentialTrend = {\n type: 'Exponential',\n name: 'Exponential Trend',\n fill: '#00ff00',\n width: 2\n};\n```\n\n**Note:** Cannot use with zero or negative values.\n\n#### 3. Logarithmic Trend Line\n\nFor data that increases/decreases quickly then levels out:\n\n```typescript\nconst logarithmicTrend = {\n type: 'Logarithmic',\n name: 'Logarithmic Trend',\n fill: '#0000ff',\n width: 2\n};\n```\n\n#### 4. Polynomial Trend Line\n\nFor fluctuating data:\n\n```typescript\nconst polynomialTrend = {\n type: 'Polynomial',\n name: 'Polynomial Trend',\n fill: '#ff00ff',\n width: 2,\n polynomialOrder: 3 // Polynomial degree (2-6)\n};\n```\n\n#### 5. Power Trend Line\n\nFor measurements increasing at specific rates:\n\n```typescript\nconst powerTrend = {\n type: 'Power',\n name: 'Power Trend',\n fill: '#ffff00',\n width: 2\n};\n```\n\n#### 6. Moving Average Trend Line\n\nSmooths fluctuations to show clearer trends:\n\n```typescript\nconst movingAverageTrend = {\n type: 'MovingAverage',\n name: 'Moving Average',\n fill: '#00ffff',\n width: 2,\n period: 14 // Period for averaging\n};\n```\n\n### Trend Line Configuration\n\nComplete example with trend lines:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n StockChartTrendlineDirective,\n StockChartTrendlinesDirective,\n Inject,\n DateTime,\n LineSeries,\n Trendlines,\n Tooltip\n} from '@syncfusion/ej2-react-charts';\n\nfunction TrendLineChart() {\n const stockData = [ /* price data */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Price with Trend Lines'\n primaryXAxis={{ valueType: 'DateTime' }}\n tooltip={{ enable: true }}\n >\n \u003cInject services={[DateTime, LineSeries, Trendlines, Tooltip]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Line'\n xName='x'\n yName='close'\n name='Stock Price'\n >\n \u003cStockChartTrendlinesDirective>\n \u003cStockChartTrendlineDirective\n type='Linear'\n name='Linear Trend'\n fill='#ff0000'\n width={2}\n />\n \u003cStockChartTrendlineDirective\n type='MovingAverage'\n name='MA(20)'\n fill='#0000ff'\n width={2}\n period={20}\n />\n \u003c/StockChartTrendlinesDirective>\n \u003c/StockChartSeriesDirective>\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n### Trend Lines Complete Examples\n\n**Multiple trend lines for analysis:**\n```typescript\nfunction ComprehensiveTrendAnalysis() {\n const stockData = [ /* extensive dataset */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Comprehensive Trend Analysis'\n primaryXAxis={{ valueType: 'DateTime' }}\n >\n \u003cInject services={[DateTime, LineSeries, Trendlines, Tooltip]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Line'\n xName='x'\n yName='close'\n name='Price'\n fill='#666666'\n width={1}\n >\n \u003cStockChartTrendlinesDirective>\n {/* Linear trend */}\n \u003cStockChartTrendlineDirective\n type='Linear'\n name='Linear'\n fill='#ff0000'\n width={2}\n />\n {/* Short-term MA */}\n \u003cStockChartTrendlineDirective\n type='MovingAverage'\n name='MA(10)'\n fill='#0080ff'\n width={2}\n period={10}\n />\n {/* Long-term MA */}\n \u003cStockChartTrendlineDirective\n type='MovingAverage'\n name='MA(50)'\n fill='#ff8000'\n width={2}\n period={50}\n />\n {/* Polynomial for pattern */}\n \u003cStockChartTrendlineDirective\n type='Polynomial'\n name='Polynomial'\n fill='#00ff00'\n width={2}\n polynomialOrder={3}\n dashArray='3,3'\n />\n \u003c/StockChartTrendlinesDirective>\n \u003c/StockChartSeriesDirective>\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n## Combining All Analysis Tools\n\nComplete example with events, indicators, and trend lines:\n\n```typescript\nimport {\n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n StockChartIndicatorsDirective,\n StockChartIndicatorDirective,\n StockChartTrendlinesDirective,\n StockChartTrendlineDirective,\n Inject,\n DateTime,\n CandleSeries,\n LineSeries,\n SplineSeries,\n SmaIndicator,\n EmaIndicator,\n RsiIndicator,\n MacdIndicator,\n BollingerBands,\n Trendlines,\n Tooltip,\n Crosshair\n} from '@syncfusion/ej2-react-charts';\n\nfunction CompleteTechnicalAnalysis() {\n\n const stockData = [\n { x: new Date('2012-04-02'), open: 320.71, high: 324.07, low: 317.74, close: 323.78 },\n { x: new Date('2012-04-03'), open: 323.03, high: 324.30, low: 319.64, close: 321.63 }\n ];\n\n const marketEvents = [\n { date: new Date('2012-02-15'), text: 'Q1', description: 'Q1 Earnings', type: 'Flag', background: '#6c757d' },\n { date: new Date('2012-05-15'), text: 'Q2', description: 'Q2 Earnings', type: 'Flag', background: '#6c757d' },\n { date: new Date('2012-03-10'), text: 'DIV', description: 'Dividend', type: 'Circle', background: '#28a745' }\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Complete Technical Analysis Dashboard'\n primaryXAxis={{ valueType: 'DateTime' }}\n tooltip={{ enable: true, shared: true }}\n crosshair={{ enable: true }}\n stockEvents={marketEvents}\n >\n \u003cInject services={[\n DateTime,\n CandleSeries,\n LineSeries,\n SplineSeries,\n SmaIndicator,\n EmaIndicator,\n RsiIndicator,\n MacdIndicator,\n BollingerBands,\n Trendlines,\n Tooltip,\n Crosshair\n ]} />\n\n {/* MAIN SERIES */}\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n name='Price' \n xName='x'\n open='open'\n high='high'\n low='low'\n close='close'\n >\n \u003cStockChartTrendlinesDirective>\n \u003cStockChartTrendlineDirective\n type='Linear'\n fill='#ff0000'\n width={2}\n />\n \u003c/StockChartTrendlinesDirective>\n \u003c/StockChartSeriesDirective>\n \u003c/StockChartSeriesCollectionDirective>\n\n {/* INDICATORS */}\n \u003cStockChartIndicatorsDirective>\n \u003cStockChartIndicatorDirective\n type='Sma'\n field='close' \n seriesName='Price'\n fill='#0080ff'\n period={20}\n />\n \u003cStockChartIndicatorDirective\n type='BollingerBands'\n field='close'\n seriesName='Price'\n fill='rgba(0,128,255,0.1)'\n period={20}\n />\n \u003cStockChartIndicatorDirective\n type='Rsi'\n field='close'\n seriesName='Price'\n period={14}\n />\n \u003c/StockChartIndicatorsDirective>\n\n \u003c/StockChartComponent>\n );\n}\n\n```\n\n## Best Practices\n\n**Stock Events:**\n- Use consistent color coding (green for positive, red for negative)\n- Limit events to significant milestones\n- Provide descriptive text and details\n- Use appropriate marker types for event categories\n\n**Technical Indicators:**\n- Don't overload with too many indicators (3-5 maximum)\n- Choose complementary indicators (trend + momentum + volatility)\n- Adjust periods based on trading timeframe\n- Use consistent color schemes\n\n**Trend Lines:**\n- Combine short and long-term moving averages\n- Use linear trends for overall direction\n- Apply polynomial for complex patterns\n- Limit to 2-3 trend lines for clarity\n\n**Performance:**\n- Indicators add minimal overhead\n- Trend lines calculate client-side\n- Events are lightweight visual markers\n- Consider data aggregation for very large datasets\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":27221,"content_sha256":"fe0f4574db34a4b28d0edf22ea290bf37b14a303483a8d633255a69789919a7d"},{"filename":"references/utilities.md","content":"# Utilities: Export, Print, and Accessibility\n\nComprehensive guide for exporting stock charts to various formats, printing functionality, and implementing accessibility features for WCAG compliance.\n\n> Reference API: [references/api.md](./api.md)\n\n**Note:** Export/Print require injecting `Export` modules; the method signatures and available export types are listed in the API reference.\n\n## Table of Contents\n- [Export](#export-functionality)\n - [Export Formats](#export-formats)\n - [Export Methods](#export-methods)\n - [Export Configuration](#export-configuration)\n - [Disabling Export](#disabling-export)\n- [Print](#print-functionality)\n - [Print Methods](#print-methods)\n - [Print Configuration](#print-configuration)\n - [Disabling Print](#disabling-print)\n- [Accessibility](#accessibility)\n - [WCAG Compliance](#wcag-compliance)\n - [Keyboard Navigation](#keyboard-navigation)\n - [Screen Reader Support](#screen-reader-support)\n - [Color Contrast](#color-contrast)\n - [Implementation Guide](#accessibility-implementation-guide)\n\n## Export Functionality\n\nStock Chart provides built-in export functionality to save charts as image files (JPEG, PNG, SVG) or PDF documents.\n\n### Export Formats\n\nThe chart can be exported in four formats:\n\n1. **JPEG** - Compressed raster image format\n2. **PNG** - Lossless raster image format (recommended for quality)\n3. **SVG** - Scalable vector graphics (best for scaling)\n4. **PDF** - Portable document format (for documents/reports)\n\n### Export Methods\n\n#### Using Export Dropdown (Default)\n\nThe chart includes a built-in export dropdown in the period selector toolbar:\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n CandleSeries,\n Export\n} from '@syncfusion/ej2-react-charts';\n\nfunction ExportableChart() {\n const stockData = [ /* data */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Price'\n primaryXAxis={{ valueType: 'DateTime' }}\n exportType={['PNG', 'JPEG', 'SVG', 'PDF']} // Available export types\n >\n \u003cInject services={[DateTime, CandleSeries, Export]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n```\n\n**Important:** Inject `Export` module to enable export functionality.\n\n### Disabling Export\n\nTo disable the export button, set `exportType` to an empty array:\n\n```typescript\n\u003cStockChartComponent\n exportType={[]} // Disables export dropdown\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\nOr remove specific export types:\n\n```typescript\n\u003cStockChartComponent\n exportType={['PNG', 'PDF']} // Only PNG and PDF available\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n## Print Functionality\n\nThe StockChart component provides built-in print functionality through the toolbar.\n- No modules are required for stock chart printing.\n\nPrint Usage\n\n### Print Methods\n\n#### Using Print Button (Default)\n\nThe chart includes a built-in print button in the period selector toolbar:\n\n```typescript\nimport { \n StockChartComponent,\n Inject,\n DateTime,\n CandleSeries\n} from '@syncfusion/ej2-react-charts';\n\nfunction PrintableChart() {\n const stockData = [ /* data */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Price'\n primaryXAxis={{ valueType: 'DateTime' }}\n >\n \u003cInject services={[DateTime, CandleSeries]} />\n {/* Print button automatically available */}\n \u003c/StockChartComponent>\n );\n}\n```\n\n**Important:** No modules are required for stock chart printing. Printing works directly on the stock chart when using the print method. There is no print module for the stock chart. Printing is handled internally via the toolbar.\n\n#### Keyboard Shortcut\n\nUsers can also print using `Ctrl + P` keyboard shortcut when the chart has focus.\n\n### Print Configuration\n\nThe print functionality uses the browser's native print dialog, which allows users to:\n- Select printer\n- Choose page orientation (portrait/landscape)\n- Set page margins\n- Preview before printing\n- Save as PDF (browser-dependent)\n\n### Disabling Print\n\nTo disable the print functionality, clear the toolbar or remove the Print option:\n\n```typescript\n// Disable all toolbar options\n\u003cStockChartComponent toolbar={[]} />\n\n// Or disable just print while keeping other toolbar items\n\u003cStockChartComponent toolbar={['Export']} /> // Only export, no print\n```\n\n## Accessibility\n\nStock Chart follows accessibility guidelines and standards including ADA, Section 508, and WCAG 2.2 for users with disabilities.\n\n### WCAG Compliance\n\nThe Stock Chart component meets the following accessibility standards:\n\n| Standard | Compliance |\n|----------|-----------|\n| WCAG 2.2 | ✅ Full Support |\n| Section 508 | ✅ Full Support |\n| Screen Reader | ✅ Full Support |\n| Right-to-Left (RTL) | ✅ Full Support |\n| Color Contrast | ✅ Full Support |\n| Mobile Device | ✅ Full Support |\n| Keyboard Navigation | ✅ Full Support |\n| Accessibility Checker | ✅ Validated |\n| Axe-core Validation | ✅ Validated |\n\n### WAI-ARIA Attributes\n\nThe Stock Chart implements WAI-ARIA attributes for assistive technologies:\n\n**ARIA Roles:**\n- `img` - Chart area identified as image\n- `button` - Interactive buttons (export, print, period selectors)\n- `region` - Chart regions for navigation\n\n**ARIA Attributes:**\n- `aria-label` - Descriptive labels for chart elements\n- `aria-hidden` - Hides decorative elements from screen readers\n- `aria-pressed` - Button state for toggles\n\n### Keyboard Navigation\n\nComplete keyboard support for accessibility:\n\n| Key Combination | Action |\n|----------------|--------|\n| `Alt + J` | Move focus to Stock Chart element |\n| `Tab` | Move to next element in chart |\n| `Shift + Tab` | Move to previous element in chart |\n| `Down Arrow` | Move focus to data point on left |\n| `Up Arrow` | Move focus to data point on right |\n| `ESC` | Cancel tooltip for data point |\n| `Ctrl + P` | Print the Stock Chart |\n| `Enter` | Activate focused element (button/control) |\n| `Space` | Toggle focused element |\n\n### Screen Reader Support\n\nStock Chart provides comprehensive screen reader support:\n\n**Accessible features:**\n- Chart title announced\n- Axis labels and values read\n- Series names and data points described\n- Interactive elements clearly labeled\n- State changes announced\n- Error messages communicated\n\n**Implementation:**\n```typescript\n\u003cStockChartComponent\n title='AAPL Stock Price Analysis' // Announced by screen readers\n primaryXAxis={{\n title: 'Trading Date', // Axis title announced\n valueType: 'DateTime'\n }}\n primaryYAxis={{\n title: 'Price in US Dollars' // Descriptive title\n }}\n>\n \u003cStockChartSeriesDirective\n name='Apple Inc Stock Price' // Series name for screen readers\n dataSource={stockData}\n />\n\u003c/StockChartComponent>\n```\n\n### Color Contrast\n\nStock Chart themes meet WCAG color contrast requirements:\n\n**Contrast ratios:**\n- Normal text: Minimum 4.5:1\n- Large text: Minimum 3:1\n- Interactive elements: Minimum 3:1\n\n**High contrast theme:**\n```typescript\n\u003cStockChartComponent\n theme='HighContrast' // Maximum contrast for visibility\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n**Custom accessible colors:**\n```typescript\n\u003cStockChartSeriesDirective\n bearFillColor='#c62828' // Dark red (good contrast)\n bullFillColor='#2e7d32' // Dark green (good contrast)\n/>\n```\n\n### Accessibility Implementation Guide\n\n#### 1. Provide Descriptive Titles\n\n```typescript\n\u003cStockChartComponent\n title='Apple Inc (AAPL) Stock Price Performance - Last 12 Months'\n primaryXAxis={{ title: 'Trading Date (Month/Year)' }}\n primaryYAxis={{ title: 'Stock Price (US Dollars)' }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n#### 2. Use Semantic Series Names\n\n```typescript\n\u003cStockChartSeriesDirective\n name='AAPL Daily Stock Price' // Clear, descriptive name\n dataSource={stockData}\n/>\n```\n\n#### 3. Enable Keyboard Navigation\n\nKeyboard navigation is enabled by default. Ensure focus management:\n\n```typescript\nimport { useEffect, useRef } from 'react';\n\nfunction AccessibleChart() {\n const chartRef = useRef(null);\n\n useEffect(() => {\n // Set focus to chart when component mounts\n if (chartRef.current) {\n const chartElement = document.getElementById('stockchart');\n if (chartElement) {\n chartElement.setAttribute('tabindex', '0');\n }\n }\n }, []);\n\n return (\n \u003cStockChartComponent\n ref={chartRef}\n id='stockchart'\n title='Accessible Stock Chart'\n >\n {/* ... */}\n \u003c/StockChartComponent>\n );\n}\n```\n\n#### 4. Use High Contrast Themes\n\n```typescript\n\u003cStockChartComponent\n theme='HighContrast'\n tooltip={{\n enable: true,\n fill: '#000000',\n textStyle: { color: '#ffffff' }\n }}\n>\n {/* ... */}\n\u003c/StockChartComponent>\n```\n\n#### 5. Provide Text Alternatives\n\n```typescript\nfunction AccessibleStockChart() {\n const stockData = [ /* data */ ];\n \n return (\n \u003cdiv>\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Price Chart'\n >\n {/* ... */}\n \u003c/StockChartComponent>\n \n {/* Text alternative for screen readers */}\n \u003cdiv className=\"sr-only\" aria-live=\"polite\">\n Stock price chart showing AAPL trading data from January to December 2023.\n Opening price: $125.50, Closing price: $152.25, representing a 21% increase.\n \u003c/div>\n \u003c/div>\n );\n}\n\nexport default AccessibleStockChart;\n```\n\n#### 6. Complete Accessible Example\n\n```typescript\nimport { \n StockChartComponent,\n StockChartSeriesCollectionDirective,\n StockChartSeriesDirective,\n Inject,\n DateTime,\n CandleSeries,\n Tooltip,\n Crosshair,\n Export\n} from '@syncfusion/ej2-react-charts';\n\nfunction FullyAccessibleChart() {\n const stockData = [ /* data */ ];\n\n return (\n \u003cdiv role=\"region\" aria-label=\"Stock Price Analysis Dashboard\">\n \u003ch2 id=\"chart-heading\">Apple Inc (AAPL) Stock Performance\u003c/h2>\n \n \u003cStockChartComponent\n id='accessibleChart'\n title='AAPL Stock Price - Last Year'\n titleStyle={{\n fontSize: '16px',\n fontWeight: 'bold'\n }}\n theme='HighContrast'\n primaryXAxis={{\n valueType: 'DateTime',\n title: 'Trading Date',\n labelFormat: 'MMM dd, yyyy'\n }}\n primaryYAxis={{\n title: 'Stock Price (USD)',\n labelFormat: '${value}'\n }}\n tooltip={{\n enable: true,\n format: 'Date: ${point.x}\u003cbr/>Open: ${point.open}\u003cbr/>High: ${point.high}\u003cbr/>Low: ${point.low}\u003cbr/>Close: ${point.close}'\n }}\n crosshair={{\n enable: true,\n lineType: 'Both'\n }}\n aria-labelledby=\"chart-heading\"\n >\n \u003cInject services={[DateTime, CandleSeries, Tooltip, Crosshair, Export]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective\n dataSource={stockData}\n type='Candle'\n name='AAPL Stock Price'\n xName='x'\n high='high'\n low='low'\n open='open'\n close='close'\n bearFillColor='#c62828'\n bullFillColor='#2e7d32'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n\n {/* Screen reader announcement */}\n \u003cdiv \n className=\"sr-only\" \n role=\"status\" \n aria-live=\"polite\"\n aria-atomic=\"true\"\n >\n Stock chart loaded. Use Alt+J to focus on chart, then use arrow keys to navigate data points.\n Press Ctrl+P to print, or use export dropdown for saving.\n \u003c/div>\n \u003c/div>\n );\n}\n\nexport default FullyAccessibleChart;\n```\n\n### Accessibility Testing\n\n**Recommended tools:**\n1. **Accessibility Checker** - `npm install accessibility-checker`\n2. **Axe DevTools** - Browser extension\n3. **NVDA/JAWS** - Screen reader testing\n4. **Wave** - Web accessibility evaluation tool\n5. **Lighthouse** - Chrome DevTools audit\n\n**Testing checklist:**\n- ✅ Test keyboard navigation (Tab, Arrow keys)\n- ✅ Verify screen reader announcements\n- ✅ Check color contrast ratios\n- ✅ Test with high contrast themes\n- ✅ Verify ARIA attributes\n- ✅ Test focus indicators\n- ✅ Validate with automated tools\n- ✅ Test with real assistive technologies\n\n## Best Practices\n\n**Export:**\n- Provide multiple format options (PNG, PDF, SVG)\n- Use descriptive file names with dates\n- Include export instructions for users\n- Test exported files for quality\n\n**Print:**\n- Ensure chart renders well in print preview\n- Consider page orientation (landscape for wide charts)\n- Test print output on different browsers\n- Provide print-friendly styling\n\n**Accessibility:**\n- Always use high contrast themes option\n- Provide descriptive titles and labels\n- Test with keyboard navigation\n- Verify screen reader compatibility\n- Include text alternatives\n- Use semantic HTML structure\n- Test with real assistive technologies\n- Follow WCAG 2.2 Level AA guidelines\n\n**Performance:**\n- Export/print operations are client-side\n- No performance impact on chart rendering\n- Large charts may take longer to export/print\n- Consider reducing data density for exports\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":13256,"content_sha256":"78f839d20d8a42bf3130e7f1d3d3530cd41aaa1b8cb9cb66e1f41251b55421d8"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Implementing Syncfusion React Stock Charts","type":"text"}]},{"type":"paragraph","content":[{"text":"The Stock Chart component is a specialized financial chart for visualizing stock price movements over time. It provides essential features for financial data analysis including candlestick/OHLC visualization, period selectors for quick date range navigation, range selectors for precise data filtering, technical indicators, and interactive tools like tooltips and crosshair.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"When to Use This Skill","type":"text"}]},{"type":"paragraph","content":[{"text":"Use this skill when you need to:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Visualize financial/stock data","type":"text","marks":[{"type":"strong"}]},{"text":" - Display stock prices, trading volumes, market movements","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Display OHLC data","type":"text","marks":[{"type":"strong"}]},{"text":" - Show Open, High, Low, Close values with candlestick or Hilo charts","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implement period navigation","type":"text","marks":[{"type":"strong"}]},{"text":" - Add quick time range buttons (1D, 5D, 1M, 6M, YTD, 1Y, ALL)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Enable range selection","type":"text","marks":[{"type":"strong"}]},{"text":" - Allow users to select specific date ranges with thumb navigation","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Add technical analysis","type":"text","marks":[{"type":"strong"}]},{"text":" - Include technical indicators (SMA, EMA, RSI, MACD, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Show stock events","type":"text","marks":[{"type":"strong"}]},{"text":" - Visualize earnings, dividends, splits, or other market events","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Create financial dashboards","type":"text","marks":[{"type":"strong"}]},{"text":" - Build comprehensive stock analysis interfaces","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Display time-series data","type":"text","marks":[{"type":"strong"}]},{"text":" - Any datetime-based financial or trading data","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Component Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"Package:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"@syncfusion/ej2-react-charts","type":"text","marks":[{"type":"code_inline"}]},{"type":"br"},{"text":"Component:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"StockChartComponent","type":"text","marks":[{"type":"code_inline"}]},{"type":"br"},{"text":"Key Features:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"6 series types (Line, Spline, Hilo, HiloOpenClose, Candle, Hollow Candle)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Built-in period selector for quick date range navigation","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Range navigator with thumb controls for precise selection","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Technical indicators (20+ types) and ","type":"text"},{"text":"indicatorType","type":"text","marks":[{"type":"code_inline"}]},{"text":" support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Stock event annotations (","type":"text"},{"text":"stockEvents","type":"text","marks":[{"type":"code_inline"}]},{"text":") and ","type":"text"},{"text":"stockEventRender","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interactive tooltip, crosshair (trackball), and legend","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Selection and interaction: ","type":"text"},{"text":"selectionMode","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"isMultiSelect","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"selectedDataIndexes","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Zooming and panning (","type":"text"},{"text":"zoomSettings","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"onZooming","type":"text","marks":[{"type":"code_inline"}]},{"text":")","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Export to image/PDF and print capabilities (","type":"text"},{"text":"exportType","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"Export","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"Print","type":"text","marks":[{"type":"code_inline"}]},{"text":")","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Persistence and RTL support (","type":"text"},{"text":"enablePersistence","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"enableRtl","type":"text","marks":[{"type":"code_inline"}]},{"text":")","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Responsive and accessible (WCAG, ARIA, keyboard navigation)","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Documentation and Navigation Guide","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Getting Started","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":"paragraph","content":[{"text":"Read this first for initial setup:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Installing @syncfusion/ej2-react-charts package","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Project setup with Vite or create-react-app","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Basic StockChartComponent implementation","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Module injection pattern (Inject services)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Creating first chart with sample data","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Understanding data structure (x, open, high, low, close, volume)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Adding chart title and basic configuration","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Axis Types and Configuration","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/configuration.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/configuration.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"For configuring and customizing axes:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"DateTime Axis","type":"text","marks":[{"type":"strong"}]},{"text":" - Date/time based x-axis (most common for stock charts)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"DateTimeCategory Axis","type":"text","marks":[{"type":"strong"}]},{"text":" - Business days only (excludes weekends/holidays)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Logarithmic Axis","type":"text","marks":[{"type":"strong"}]},{"text":" - Logarithmic scale for wide value ranges","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Numeric Axis","type":"text","marks":[{"type":"strong"}]},{"text":" - Standard numeric axis for y-values","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Axis title, labels, and formatting","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Grid lines and tick customization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Multiple Y-axes for different data scales","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Axis ranges and padding settings","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Series Types and Visualization","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":"paragraph","content":[{"text":"For choosing and configuring chart series:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Line series","type":"text","marks":[{"type":"strong"}]},{"text":" - Continuous price lines","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Spline series","type":"text","marks":[{"type":"strong"}]},{"text":" - Smooth curves","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Hilo series","type":"text","marks":[{"type":"strong"}]},{"text":" - High-low range bars","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"HiloOpenClose series","type":"text","marks":[{"type":"strong"}]},{"text":" - OHLC bars","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Candle series","type":"text","marks":[{"type":"strong"}]},{"text":" - Traditional candlesticks (default for stock charts)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Hollow Candle series","type":"text","marks":[{"type":"strong"}]},{"text":" - Filled/hollow based on price movement","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Bear/Bull fill colors for candlesticks","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Series dropdown navigation and type switching","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Module injection for each series type","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"When to use each type","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Period and Range Selectors","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/selectors.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/selectors.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"For implementing time range navigation:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Period Selector:","type":"text","marks":[{"type":"strong"}]},{"text":" Quick navigation buttons (1D, 5D, 1M, etc.)","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Periods array configuration (interval, text, intervalType)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"IntervalType options (Years, Months, Weeks, Days, Hours, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Enabling/disabling period selector","type":"text"}]}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Range Selector:","type":"text","marks":[{"type":"strong"}]},{"text":" Precise range selection with thumbs","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Thumb navigation and dragging","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Label tapping for range selection","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Date range button integration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Enabling/disabling range selector","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Interactive Features and Events","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":"paragraph","content":[{"text":"For adding user interaction and visual feedback:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Legend:","type":"text","marks":[{"type":"strong"}]},{"text":" Display series information","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Position and alignment options (Top, Bottom, Left, Right, Custom)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Customization (size, shape, colors, icons)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Legend title and template","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Legend click/render events","type":"text"}]}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Tooltip:","type":"text","marks":[{"type":"strong"}]},{"text":" Show point data on hover","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Format customization with tokens (${point.x}, ${point.open}, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Position control (Auto, Nearest)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Appearance styling (fill, border, textStyle)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Shared tooltips for multi-series","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Header and custom formatting","type":"text"}]}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Crosshair:","type":"text","marks":[{"type":"strong"}]},{"text":" Vertical/horizontal lines for precise value reading","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Crosshair tooltip for axis values on both axes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Line customization (width, color, dashArray)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Snap to data for cleaner interactions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Trackball mode for shared tooltip across series","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Line type (Both, Vertical, Horizontal)","type":"text"}]}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Mouse Events:","type":"text","marks":[{"type":"strong"}]},{"text":" Comprehensive interaction tracking","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"pointClick, pointMove for data point interactions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"stockChartMouseMove, stockChartMouseClick, etc.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"stockChartMouseLeave for UI cleanup","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Range change events for selector updates","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Technical Analysis Tools","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/technical-analysis.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/technical-analysis.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"For financial analysis features:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Stock Events:","type":"text","marks":[{"type":"strong"}]},{"text":" Annotate significant market events","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Event types (Flag, Circle, Square, Triangle, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Event markers with customizable colors and shapes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Event descriptions and tooltips","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Events for specific series targeting","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"stockEventRender event for custom styling","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Event visibility control","type":"text"}]}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Technical Indicators:","type":"text","marks":[{"type":"strong"}]},{"text":" Add analysis overlays","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"10+ indicator types:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Moving averages: SMA, EMA, TMA","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Momentum: RSI, MACD, Stochastic, Momentum","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Volume: Accumulation Distribution, ATR","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Advanced: Bollinger Bands","type":"text"}]}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Indicator configuration and styling","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Multiple indicators on one chart","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Field selection (Open, High, Low, Close)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Period and standard deviation customization","type":"text"}]}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Trend Lines:","type":"text","marks":[{"type":"strong"}]},{"text":" Draw trend analysis lines","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"6 trendline types: Linear, Exponential, Logarithmic, Polynomial, Power, MovingAverage","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Line configuration (start/end points, series binding)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Styling and customization (color, width, dashArray)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Multiple trend lines per series","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Polynomial order customization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Moving average period configuration","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Tooltip, Crosshair, and Axis Configuration","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}}]},{"text":" and ","type":"text"},{"text":"references/configuration.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/configuration.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"For tooltip and crosshair setup:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Tooltip Configuration:","type":"text","marks":[{"type":"strong"}]},{"text":" Point hover information","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Enable/disable with ","type":"text"},{"text":"enable","type":"text","marks":[{"type":"code_inline"}]},{"text":" property","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Format strings for OHLC data display","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Background color and border styling","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Text style customization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Position modes (Auto, Nearest)","type":"text"}]}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Crosshair Lines:","type":"text","marks":[{"type":"strong"}]},{"text":" Precise value reading","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Enable crosshair with ","type":"text"},{"text":"enable: true","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Line type: Both, Vertical, or Horizontal","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Line customization (width, color, dashArray)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Snap to data point alignment","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Crosshair line styling","type":"text"}]}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Axis Tooltips:","type":"text","marks":[{"type":"strong"}]},{"text":" Display axis values","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Enable on primaryXAxis via ","type":"text"},{"text":"crosshairTooltip","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Enable on primaryYAxis via ","type":"text"},{"text":"crosshairTooltip","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Fill color and text style customization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Format axis value display","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Chart Configuration and Styling","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/configuration.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/configuration.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"For customizing chart appearance and behavior:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Axes Configuration:","type":"text","marks":[{"type":"strong"}]},{"text":" Setup X and Y axes","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Axis types: DateTime (default), DateTimeCategory, Logarithmic, Numeric","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Label formatting and intervals","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Multiple axes support with ","type":"text"},{"text":"axes","type":"text","marks":[{"type":"code_inline"}]},{"text":" array","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Axis ranges, padding, and grid lines","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Major/minor tick and grid customization","type":"text"}]}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Chart Dimensions:","type":"text","marks":[{"type":"strong"}]},{"text":" Control size","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Width and height properties (pixels or percentage)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Responsive sizing strategies","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Container-based sizing","type":"text"}]}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Appearance:","type":"text","marks":[{"type":"strong"}]},{"text":" Theme and styling","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Built-in themes (Material, Fabric, Bootstrap, HighContrast, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Background and border customization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Chart area styling","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Margin and padding configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Title and title styling","type":"text"}]}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Gradient Fills:","type":"text","marks":[{"type":"strong"}]},{"text":" Advanced styling","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Linear gradients (x1, y1, x2, y2 stops)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Radial gradients (cx, cy, r stops)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Gradient for series fill","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"SVG gradient definitions","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Export, Print, and Accessibility","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/utilities.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/utilities.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"For export functionality and accessibility:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Export:","type":"text","marks":[{"type":"strong"}]},{"text":" Save charts as files","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Export as PNG, JPEG, SVG","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Export as PDF","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Configuration options","type":"text"}]}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Print:","type":"text","marks":[{"type":"strong"}]},{"text":" Print chart directly","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Print method and options","type":"text"}]}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Accessibility:","type":"text","marks":[{"type":"strong"}]},{"text":" WCAG compliance","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Keyboard navigation","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"ARIA attributes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Screen reader support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Accessible color schemes","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Quick Start","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Basic Stock Chart","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { StockChartComponent, StockChartSeriesCollectionDirective, \n StockChartSeriesDirective, Inject, DateTime, Tooltip, \n RangeTooltip, Crosshair, LineSeries, SplineSeries, \n CandleSeries, HiloOpenCloseSeries, HiloSeries, \n RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';\nimport * as React from 'react';\n\nfunction App() {\n const data = [\n { x: new Date('2012-04-02'), open: 85.97, high: 90.58, low: 85.97, close: 90.58, volume: 660187068 },\n { x: new Date('2012-04-09'), open: 89.02, high: 92.50, low: 88.50, close: 92.90, volume: 490033264 },\n { x: new Date('2012-04-16'), open: 92.52, high: 93.00, low: 88.50, close: 92.52, volume: 450167016 },\n // ... more data\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='AAPL Stock Price'\n primaryXAxis={{ valueType: 'DateTime' }}\n >\n \u003cInject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, \n SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, \n RangeAreaSeries, Trendlines]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective \n dataSource={data} \n type='Candle'\n xName='x'\n high='high' \n low='low' \n open='open' \n close='close'\n volume='volume'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}\n\nexport default App;","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Stock Chart with Period Selector","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { StockChartComponent, StockChartSeriesCollectionDirective, \n StockChartSeriesDirective, Inject, DateTime, Tooltip, \n RangeTooltip, Crosshair, CandleSeries } from '@syncfusion/ej2-react-charts';\n\nfunction App() {\n const data = [ /* stock data */ ];\n \n const periods = [\n { intervalType: 'Days', interval: 1, text: '1D' },\n { intervalType: 'Days', interval: 5, text: '5D' },\n { intervalType: 'Months', interval: 1, text: '1M' },\n { intervalType: 'Months', interval: 3, text: '3M' },\n { intervalType: 'Months', interval: 6, text: '6M' },\n { intervalType: 'Years', interval: 1, text: '1Y' },\n { text: 'All' }\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Stock Analysis'\n primaryXAxis={{ valueType: 'DateTime' }}\n periods={periods}\n enablePeriodSelector={true}\n >\n \u003cInject services={[DateTime, Tooltip, RangeTooltip, Crosshair, CandleSeries]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective \n dataSource={data} \n type='Candle'\n xName='x'\n high='high' \n low='low' \n open='open' \n close='close'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"CSS Styling for Stock Chart","type":"text"}]},{"type":"paragraph","content":[{"text":"For the Stock Chart period selector UI to work properly, you need to include the required CSS stylesheets in your HTML file. Add the following ","type":"text"},{"text":"\u003clink>","type":"text","marks":[{"type":"code_inline"}]},{"text":" tags to the ","type":"text"},{"text":"\u003chead>","type":"text","marks":[{"type":"code_inline"}]},{"text":" section of your ","type":"text"},{"text":"index.html","type":"text","marks":[{"type":"code_inline"}]},{"text":":","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"html"},"content":[{"text":"\u003c!DOCTYPE html>\n\u003chtml lang=\"en\">\n \u003chead>\n \u003cmeta charset=\"UTF-8\" />\n \u003clink rel=\"icon\" type=\"image/svg+xml\" href=\"/vite.svg\" />\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n \n \u003c!-- Syncfusion Tailwind CSS for Stock Chart styling -->\n \u003clink href=\"https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css\" rel=\"stylesheet\" />\n \n \u003c!-- Bootstrap CSS for additional styling support -->\n \u003clink href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\n \n \u003ctitle>Stock Chart App\u003c/title>\n \u003c/head>\n \u003cbody>\n \u003cdiv id=\"root\">\u003c/div>\n \u003cscript type=\"module\" src=\"/src/main.tsx\">\u003c/script>\n \u003c/body>\n\u003c/html>","type":"text"}]},{"type":"paragraph","content":[{"text":"Key CSS Stylesheets:","type":"text","marks":[{"type":"strong"}]}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Syncfusion Tailwind CSS","type":"text","marks":[{"type":"strong"}]},{"text":" (","type":"text"},{"text":"tailwind3.css","type":"text","marks":[{"type":"code_inline"}]},{"text":") - Required for Stock Chart components","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Version: 33.1.44 (update to match your Syncfusion version)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Provides styling for period selector buttons, range navigator, tooltips, and other UI elements","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"CDN URL: ","type":"text"},{"text":"https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css","type":"text","marks":[{"type":"code_inline"}]}]}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Bootstrap CSS","type":"text","marks":[{"type":"strong"}]},{"text":" - Optional but recommended for additional styling support","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Version: 3.3.7","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Provides base styling and layout utilities","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"CDN URL: ","type":"text"},{"text":"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css","type":"text","marks":[{"type":"code_inline"}]}]}]}]}]}]},{"type":"paragraph","content":[{"text":"Important Notes:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Ensure the Syncfusion CSS version matches your ","type":"text"},{"text":"@syncfusion/ej2-react-charts","type":"text","marks":[{"type":"code_inline"}]},{"text":" package version","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"If you're using a different theme (Material, Bootstrap, Fabric, HighContrast), use the corresponding CSS file from Syncfusion CDN","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Place these stylesheets before other custom stylesheets to allow proper CSS cascade and overrides","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Without these stylesheets, the period selector buttons, tooltips, and other UI elements may not render correctly","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Alternative CSS URLs by Theme:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Material: ","type":"text"},{"text":"https://cdn.syncfusion.com/ej2/33.1.44/material.css","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Bootstrap: ","type":"text"},{"text":"https://cdn.syncfusion.com/ej2/33.1.44/bootstrap.css","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Fabric: ","type":"text"},{"text":"https://cdn.syncfusion.com/ej2/33.1.44/fabric.css","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Tailwind: ","type":"text"},{"text":"https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"HighContrast: ","type":"text"},{"text":"https://cdn.syncfusion.com/ej2/33.1.44/highcontrast.css","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Axis Types Reference","type":"text"}]},{"type":"paragraph","content":[{"text":"Stock Chart supports multiple axis types for different data scenarios:","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"DateTime Axis (Default)","type":"text"}]},{"type":"paragraph","content":[{"text":"Use for date-based stock data:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"primaryXAxis={{ \n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n majorTickLines: { color: 'transparent' }\n}}","type":"text"}]},{"type":"paragraph","content":[{"text":"Best for:","type":"text","marks":[{"type":"strong"}]},{"text":" Stock price data with dates ","type":"text"},{"text":"Inject:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"DateTime","type":"text","marks":[{"type":"code_inline"}]},{"text":" module","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"DateTimeCategory Axis","type":"text"}]},{"type":"paragraph","content":[{"text":"Displays only business days (excludes weekends/holidays):","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"primaryXAxis={{ \n valueType: 'DateTimeCategory',\n majorGridLines: { width: 0 }\n}}","type":"text"}]},{"type":"paragraph","content":[{"text":"Best for:","type":"text","marks":[{"type":"strong"}]},{"text":" Business day-only trading data ","type":"text"},{"text":"Inject:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"DateTimeCategory","type":"text","marks":[{"type":"code_inline"}]},{"text":" module ","type":"text"},{"text":"Note:","type":"text","marks":[{"type":"strong"}]},{"text":" Requires ","type":"text"},{"text":"DateTimeCategory","type":"text","marks":[{"type":"code_inline"}]},{"text":" module import and injection","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Logarithmic Axis","type":"text"}]},{"type":"paragraph","content":[{"text":"For Y-axis with logarithmic scale (useful for wide value ranges):","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"primaryYAxis={{\n valueType: 'Logarithmic',\n labelFormat: '${value}'\n}}","type":"text"}]},{"type":"paragraph","content":[{"text":"Best for:","type":"text","marks":[{"type":"strong"}]},{"text":" Data spanning multiple orders of magnitude ","type":"text"},{"text":"Inject:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"Logarithmic","type":"text","marks":[{"type":"code_inline"}]},{"text":" module ","type":"text"},{"text":"Note:","type":"text","marks":[{"type":"strong"}]},{"text":" Cannot contain zero or negative values","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Numeric Axis (Y-axis default)","type":"text"}]},{"type":"paragraph","content":[{"text":"Standard linear numeric scale:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"primaryYAxis={{\n valueType: 'Double',\n labelFormat: '${value}',\n minimum: 0,\n maximum: 500,\n interval: 50\n}}","type":"text"}]},{"type":"paragraph","content":[{"text":"Best for:","type":"text","marks":[{"type":"strong"}]},{"text":" Price values and general Y-axis ","type":"text"},{"text":"No module injection required","type":"text","marks":[{"type":"strong"}]},{"text":" - This is the default","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Multi-Axis Configuration","type":"text"}]},{"type":"paragraph","content":[{"text":"Use multiple Y-axes for different scales:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"\u003cStockChartComponent\n primaryXAxis={{ valueType: 'DateTime' }}\n primaryYAxis={{ title: 'Price', labelFormat: '${value}' }}\n>\n {/* Additional axes using StockChartAxesDirective */}\n \u003cStockChartAxesDirective>\n \u003cStockChartAxisDirective\n name='volumeAxis'\n opposedPosition={true}\n title='Volume'\n labelFormat='{value}M'\n />\n \u003c/StockChartAxesDirective>\n \n {/* Series bind to respective axes */}\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective type='Candle' yAxisName='primaryYAxis' />\n \u003cStockChartSeriesDirective type='Column' yAxisName='volumeAxis' />\n \u003c/StockChartSeriesCollectionDirective>\n\u003c/StockChartComponent>","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Common Patterns","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 1: Financial Dashboard with Multiple Features","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { StockChartComponent, StockChartSeriesCollectionDirective, \n StockChartSeriesDirective, Inject, DateTime, Tooltip, \n RangeTooltip, Crosshair, CandleSeries, StockLegend, \n Export, Print } from '@syncfusion/ej2-react-charts';\n\nfunction FinancialDashboard() {\n const handlePointClick = (args) => {\n console.log(`Point clicked: ${args.x}, Value: ${args.y}`);\n };\n\n const handleMouseMove = (args) => {\n console.log('Mouse moved over chart');\n };\n\n const handleRangeChange = (args) => {\n console.log(`Range changed: ${args.start} to ${args.end}`);\n };\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n title='Comprehensive Stock Analysis'\n primaryXAxis={{ valueType: 'DateTime' }}\n tooltip={{ enable: true, shared: true }}\n crosshair={{ enable: true }}\n legendSettings={{ visible: true }}\n enablePeriodSelector={true}\n enableSelector={true}\n pointClick={handlePointClick}\n stockChartMouseMove={handleMouseMove}\n rangeChange={handleRangeChange}\n >\n \u003cInject services={[DateTime, Tooltip, RangeTooltip, Crosshair, \n CandleSeries, StockLegend, Export, Print]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective \n dataSource={stockData} \n type='Candle'\n name='Apple Inc'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 2: Candlestick with Bear/Bull Colors and Animation","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"function StyledCandleChart() {\n const stockData = [ /* stock data with open, high, low, close */ ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n primaryYAxis={{ labelFormat: '${value}' }}\n >\n \u003cInject services={[DateTime, CandleSeries, Tooltip, RangeTooltip]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective \n dataSource={stockData} \n type='Candle'\n xName='x'\n open='open'\n high='high'\n low='low'\n close='close'\n bearFillColor='#ef5350' // Red for downtrend\n bullFillColor='#26a69a' // Green for uptrend\n animation={{ enable: true, duration: 500 }}\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 3: Technical Analysis Chart","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"function TechnicalAnalysisChart() {\n const indicators = [\n {\n type: 'Sma',\n field: 'Close',\n period: 14,\n fill: 'blue'\n },\n {\n type: 'BollingerBands',\n field: 'Close',\n period: 20,\n standardDeviation: 2,\n upperLine: { color: '#ff0000', width: 1 },\n lowerLine: { color: '#ff0000', width: 1 }\n }\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n indicators={indicators}\n >\n \u003cInject services={[DateTime, CandleSeries, Tooltip, \n LineSeries, RangeTooltip, SmaIndicator, BollingerBands]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective \n dataSource={stockData} \n type='Candle'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003cStockChartIndicatorsDirective>\n {/* Indicators can also be added here via directives */}\n \u003c/StockChartIndicatorsDirective>\n \u003c/StockChartComponent>\n );\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 4: Crosshair with Axis Tooltips","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"function CrosshairChart() {\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ \n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n majorTickLines: { color: 'transparent' },\n crosshairTooltip: { enable: true } // X-axis tooltip\n }}\n primaryYAxis={{\n labelFormat: 'n0',\n majorTickLines: { width: 0 },\n crosshairTooltip: { enable: true } // Y-axis tooltip\n }}\n crosshair={{ \n enable: true,\n lineType: 'Both',\n line: { width: 1, color: '#0080ff' }\n }}\n tooltip={{ enable: true }}\n >\n \u003cInject services={[DateTime, CandleSeries, Crosshair, Tooltip, RangeTooltip]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective \n dataSource={stockData} \n type='Candle'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 5: Stock Events Visualization","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"function StockEventsChart() {\n const stockEvents = [\n {\n date: new Date('2012-04-01'),\n text: 'Q1 Earnings',\n description: 'Quarterly earnings release',\n type: 'Flag',\n background: '#6c757d'\n },\n {\n date: new Date('2012-07-01'),\n text: 'Dividend',\n description: 'Dividend payout',\n type: 'Circle',\n background: '#28a745'\n }\n ];\n\n return (\n \u003cStockChartComponent\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n stockEvents={stockEvents}\n >\n \u003cInject services={[DateTime, SplineSeries, Tooltip]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective \n dataSource={stockData} \n type='Spline'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n );\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 6: Export and Print","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"function ExportableChart() {\n const chartRef = useRef\u003cStockChartComponent>(null);\n\n const handleExport = (type: string) => {\n if (chartRef.current) {\n chartRef.current.export(type, 'StockChart');\n }\n };\n\n const handlePrint = () => {\n if (chartRef.current) {\n chartRef.current.print();\n }\n };\n\n return (\n \u003cdiv>\n \u003cdiv>\n \u003cbutton onClick={() => handleExport('PNG')}>Export PNG\u003c/button>\n \u003cbutton onClick={() => handleExport('JPEG')}>Export JPEG\u003c/button>\n \u003cbutton onClick={() => handleExport('SVG')}>Export SVG\u003c/button>\n \u003cbutton onClick={() => handleExport('PDF')}>Export PDF\u003c/button>\n \u003cbutton onClick={handlePrint}>Print Chart\u003c/button>\n \u003c/div>\n \n \u003cStockChartComponent\n ref={chartRef}\n id='stockchart'\n primaryXAxis={{ valueType: 'DateTime' }}\n exportType={['PNG', 'JPEG', 'SVG', 'PDF']}\n >\n \u003cInject services={[DateTime, CandleSeries, Export]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective \n dataSource={stockData} \n type='Candle'\n />\n \u003c/StockChartSeriesCollectionDirective>\n \u003c/StockChartComponent>\n \u003c/div>\n );\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Key Props","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"StockChartComponent","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Prop","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Type","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"primaryXAxis","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"X-axis configuration (typically DateTime)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"primaryYAxis","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Y-axis configuration","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"axes","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Additional Y-axes for multi-axis scaling","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"title","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Chart title","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"titleStyle","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Title font styling","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"periods","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Period selector buttons configuration","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"enablePeriodSelector","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"boolean","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Show/hide period selector (default: true)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"enableSelector","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"boolean","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Show/hide range selector (default: true)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"enableCustomRange","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"boolean","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Enable custom date range selection","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"tooltip","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Tooltip configuration","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"crosshair","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Crosshair configuration","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"legendSettings","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Legend configuration","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"stockEvents","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Stock event markers","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"indicators","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Technical indicators","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"height","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Chart height","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"width","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Chart width","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"margin","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Chart margin configuration","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"chartArea","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Chart area styling","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"background","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Chart background color","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"border","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Chart border configuration","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"theme","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Chart theme","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"zoomSettings","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Zoom and pan configuration","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"rows","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Row definitions for multi-row layouts","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"selectedDataIndexes","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Programmatically select specific points","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"selectionMode","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Selection mode (None, Point, Series, Cluster, DragXY, DragX, DragY)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"isMultiSelect","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"boolean","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Allow multiple data point selection","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"exportType","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Export formats (PNG, JPEG, SVG, PDF)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"enablePersistence","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"boolean","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Persist chart state between page reloads","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"enableRtl","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"boolean","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Enable right-to-left rendering","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"locale","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Override global culture/localization","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"noDataTemplate","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string/Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Template shown when no data available","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"isTransposed","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"boolean","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Render chart in transposed manner","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"seriesType","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Available series types","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"indicatorType","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Available technical indicator types","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"trendlineType","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Available trendline types","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"bearFillColor","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Fill color for downtrend (bear) candles","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"bullFillColor","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Fill color for uptrend (bull) candles","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"animation","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Animation settings for series rendering","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"pointClick","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Event fired when a data point is clicked","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"stockChartMouseMove","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Event fired when mouse moves over chart","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"stockChartMouseClick","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Event fired when chart area is clicked","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"stockChartMouseDown","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Event fired on mouse down","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"stockChartMouseUp","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Event fired on mouse up","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"stockChartMouseLeave","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Event fired when cursor leaves chart","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"tooltipRender","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Event for customizing tooltip before display","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"axisLabelRender","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Event for customizing axis labels before rendering","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"seriesRender","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Event fired when series is rendered","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"legendClick","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Event fired when legend item is clicked","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"legendRender","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Event fired when legend items are rendered","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"crosshairLabelRender","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Event fired before crosshair tooltip is rendered","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"selectorRender","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Triggered when range selector renders","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"onZooming","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Event fired during zoom interactions","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"load","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Lifecycle event fired before chart is loaded","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"loaded","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Lifecycle event fired after chart is loaded","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"beforeExport","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Event fired before export operation","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"stockEventRender","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Function","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Customize stock event marker rendering","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"rows","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Row definitions for multi-row layouts","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"isTransposed","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"boolean","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Render chart in transposed manner","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"trendlines","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Trend line configurations (StockChartTrendlinesDirective)","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"StockChartSeriesDirective","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Prop","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Type","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"dataSource","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Stock data array","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"type","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Series type (Candle, Line, Spline, Hilo, HiloOpenClose)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"xName","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Data field for x-axis (date)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"high","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Data field for high values","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"low","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Data field for low values","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"open","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Data field for open values","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"close","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Data field for close values","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"volume","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Data field for volume values","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"name","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Series name for legend","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"yName","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Data field for y-axis values","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"yAxisName","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Name of Y-axis to bind this series to (for multi-axis)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"bearFillColor","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Fill color for downtrend candles/bars","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"bullFillColor","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Fill color for uptrend candles/bars","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"fill","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Series color or gradient fill (e.g., 'url(#gradient1)')","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"width","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"number","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Line width for series","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"opacity","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"number","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Opacity of series (0-1)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"border","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Border configuration for series (width, color, dashArray)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"marker","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Data point marker configuration (visible, size, shape, fill, border)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"animation","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Animation settings (enable, duration, delay)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"legendShape","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Legend icon shape (Circle, Rectangle, Triangle, Diamond, etc.)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"tooltip","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Series-specific tooltip configuration","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"trendlines","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Trend lines for this series","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"cornerRadius","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"number","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Corner radius for rectangular shapes","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Common Use Cases","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Stock Trading Platform","type":"text","marks":[{"type":"strong"}]},{"text":" - Display real-time or historical stock prices with candlestick charts","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Financial Analytics Dashboard","type":"text","marks":[{"type":"strong"}]},{"text":" - Multi-chart layout with technical indicators and events","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Portfolio Tracker","type":"text","marks":[{"type":"strong"}]},{"text":" - Visualize investment performance over time","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Market Research Tool","type":"text","marks":[{"type":"strong"}]},{"text":" - Compare multiple stocks with different series types","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Trading Algorithm Backtesting","type":"text","marks":[{"type":"strong"}]},{"text":" - Visualize strategy results with indicators and trend lines","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Economic Data Visualization","type":"text","marks":[{"type":"strong"}]},{"text":" - Display time-series financial or economic data","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Cryptocurrency Charts","type":"text","marks":[{"type":"strong"}]},{"text":" - Track crypto price movements with OHLC data","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Module Injection","type":"text"}]},{"type":"paragraph","content":[{"text":"Stock Chart requires explicit module injection for features:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { Inject, DateTime, DateTimeCategory, Logarithmic, \n Tooltip, RangeTooltip, Crosshair, \n LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, \n HiloSeries, RangeAreaSeries, StockLegend, Trendlines, Export } from '@syncfusion/ej2-react-charts';\nimport { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, \n MomentumIndicator, SmaIndicator, AtrIndicator, \n AccumulationDistributionIndicator, MacdIndicator, \n StochasticIndicator } from '@syncfusion/ej2-react-charts';\n\n\u003cStockChartComponent>\n \u003cInject services={[DateTime, Tooltip, RangeTooltip, Crosshair, \n CandleSeries, StockLegend, Trendlines, Export,\n EmaIndicator, SmaIndicator, BollingerBands]} />\n\u003c/StockChartComponent>","type":"text"}]},{"type":"paragraph","content":[{"text":"Common modules:","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Axes:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"DateTime","type":"text","marks":[{"type":"strong"}]},{"text":" - DateTime axis (required for stock charts)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"DateTimeCategory","type":"text","marks":[{"type":"strong"}]},{"text":" - DateTime category axis for business days only","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Logarithmic","type":"text","marks":[{"type":"strong"}]},{"text":" - Logarithmic scale axis","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"UI Features:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Tooltip","type":"text","marks":[{"type":"strong"}]},{"text":" - Hover tooltips for data points","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"RangeTooltip","type":"text","marks":[{"type":"strong"}]},{"text":" - Range selector tooltips","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Crosshair","type":"text","marks":[{"type":"strong"}]},{"text":" - Crosshair lines with axis tooltips","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"StockLegend","type":"text","marks":[{"type":"strong"}]},{"text":" - Legend display for series","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Series Types:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"LineSeries, SplineSeries","type":"text","marks":[{"type":"strong"}]},{"text":" - Line charts","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"CandleSeries","type":"text","marks":[{"type":"strong"}]},{"text":" - Traditional candlestick chart","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"HiloOpenCloseSeries","type":"text","marks":[{"type":"strong"}]},{"text":" - OHLC bars","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"HiloSeries","type":"text","marks":[{"type":"strong"}]},{"text":" - High-Low bars","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"RangeAreaSeries","type":"text","marks":[{"type":"strong"}]},{"text":" - Range area visualization","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Technical Analysis:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Trendlines","type":"text","marks":[{"type":"strong"}]},{"text":" - Trend line visualization (Linear, Exponential, Logarithmic, Polynomial, Power, Moving Average)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"EmaIndicator, SmaIndicator, TmaIndicator","type":"text","marks":[{"type":"strong"}]},{"text":" - Moving average indicators","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"RsiIndicator, BollingerBands, MacdIndicator","type":"text","marks":[{"type":"strong"}]},{"text":" - Advanced indicators","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"StochasticIndicator, MomentumIndicator, AtrIndicator","type":"text","marks":[{"type":"strong"}]},{"text":" - Momentum indicators","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"AccumulationDistributionIndicator","type":"text","marks":[{"type":"strong"}]},{"text":" - Volume-based indicator","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Export:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Export","type":"text","marks":[{"type":"strong"}]},{"text":" - Export to PNG, JPEG, SVG, PDF","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Event Handling","type":"text"}]},{"type":"paragraph","content":[{"text":"Stock Chart provides comprehensive event support for tracking user interactions and building custom behaviors:","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Data Point Events","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// Point click event\nconst handlePointClick = (args) => {\n console.log('Point clicked:', args.pointIndex, args.seriesIndex);\n console.log('X:', args.x, 'Y:', args.y);\n};\n\n// Point move event (hover)\nconst handlePointMove = (args) => {\n console.log('Hovering over point:', args.x);\n};\n\n\u003cStockChartComponent\n pointClick={handlePointClick}\n pointMove={handlePointMove}\n>\n {/* ... */}\n\u003c/StockChartComponent>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Mouse Events","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// Various mouse tracking events\nconst handleMouseMove = (args) => {\n console.log('Mouse position:', args.x, args.y);\n};\n\nconst handleMouseLeave = (args) => {\n console.log('Mouse left chart area');\n};\n\nconst handleMouseClick = (args) => {\n console.log('Chart clicked');\n};\n\n\u003cStockChartComponent\n stockChartMouseMove={handleMouseMove}\n stockChartMouseLeave={handleMouseLeave}\n stockChartMouseClick={handleMouseClick}\n stockChartMouseDown={(args) => console.log('Mouse down')}\n stockChartMouseUp={(args) => console.log('Mouse up')}\n>\n {/* ... */}\n\u003c/StockChartComponent>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Range and Selector Events","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// Range change event (period selector or range selector)\nconst handleRangeChange = (args) => {\n console.log('Range changed:', args.start, 'to', args.end);\n // Refresh data or update analysis\n};\n\n\u003cStockChartComponent\n rangeChange={handleRangeChange}\n>\n {/* ... */}\n\u003c/StockChartComponent>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Legend Events","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// Legend click event\nconst handleLegendClick = (args) => {\n console.log('Legend item clicked:', args.legendText);\n};\n\n// Legend render event (for customization)\nconst handleLegendRender = (args) => {\n if (args.legendText === 'AAPL') {\n args.fill = '#ff0000'; // Customize legend color\n }\n};\n\n\u003cStockChartComponent\n legendClick={handleLegendClick}\n legendRender={handleLegendRender}\n>\n {/* ... */}\n\u003c/StockChartComponent>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Tooltip Events","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// Customize tooltip before rendering\nconst handleTooltipRender = (args) => {\n args.text = `\u003cb>Stock Price: ${args.text}\u003c/b>`;\n};\n\n\u003cStockChartComponent\n tooltip={{ enable: true }}\n tooltipRender={handleTooltipRender}\n>\n {/* ... */}\n\u003c/StockChartComponent>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Stock Event Rendering","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// Customize stock event markers\nconst handleStockEventRender = (args) => {\n // Customize event styling, position, etc.\n if (args.text === 'Earnings') {\n args.background = '#ff0000'; // Custom color for earnings\n }\n};\n\n\u003cStockChartComponent\n stockEvents={stockEvents}\n stockEventRender={handleStockEventRender}\n>\n {/* ... */}\n\u003c/StockChartComponent>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Lifecycle Events","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// Load event (before rendering)\nconst handleLoad = (args) => {\n console.log('Chart loading');\n};\n\n// Loaded event (after rendering)\nconst handleLoaded = (args) => {\n console.log('Chart loaded');\n};\n\n\u003cStockChartComponent\n load={handleLoad}\n loaded={handleLoaded}\n>\n {/* ... */}\n\u003c/StockChartComponent>","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"API Reference","type":"text"}]},{"type":"paragraph","content":[{"text":"Below is a concise API reference derived from the official Syncfusion ","type":"text"},{"text":"StockChart","type":"text","marks":[{"type":"code_inline"}]},{"text":" API. Include or expand these entries in ","type":"text"},{"text":"references/*","type":"text","marks":[{"type":"code_inline"}]},{"text":" as needed.","type":"text"}]},{"type":"paragraph","content":[{"text":"Complete API Documentation:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Full Comprehensive API Reference:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/complete-api-reference.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/complete-api-reference.md","title":null}}]},{"text":" - Master reference with all props, methods, events, directives, and modules","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Concise API Summary:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/api.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/api.md","title":null}}]},{"text":" - Quick reference for commonly used APIs","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Official Syncfusion Docs:","type":"text","marks":[{"type":"strong"}]},{"text":" https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Selected Props (StockChartComponent)","type":"text"}]},{"type":"paragraph","content":[{"text":"All props with official API links: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel","type":"text"}]},{"type":"paragraph","content":[{"text":"Data & Series:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"dataSource","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Array | DataManager) — Source data for series (objects with ","type":"text"},{"text":"x, open, high, low, close, volume","type":"text","marks":[{"type":"code_inline"}]},{"text":"). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#datasource","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"series","type":"text","marks":[{"type":"code_inline"}]},{"text":" / ","type":"text"},{"text":"StockChartSeriesCollectionDirective","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Series definitions and types (Candle, Line, Spline, Hilo, HiloOpenClose). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Axes:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"primaryXAxis","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Object) — X axis configuration (typically ","type":"text"},{"text":"valueType: 'DateTime'","type":"text","marks":[{"type":"code_inline"}]},{"text":" | ","type":"text"},{"text":"'DateTimeCategory'","type":"text","marks":[{"type":"code_inline"}]},{"text":" | ","type":"text"},{"text":"'Numeric'","type":"text","marks":[{"type":"code_inline"}]},{"text":"). Supports ","type":"text"},{"text":"crosshairTooltip","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"majorGridLines","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"majorTickLines","type":"text","marks":[{"type":"code_inline"}]},{"text":". API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"primaryYAxis","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Object) — Y axis configuration (typically ","type":"text"},{"text":"valueType: 'Double'","type":"text","marks":[{"type":"code_inline"}]},{"text":" or ","type":"text"},{"text":"'Logarithmic'","type":"text","marks":[{"type":"code_inline"}]},{"text":"). Supports ","type":"text"},{"text":"labelFormat","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"rangePadding","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"minorGridLines","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"crosshairTooltip","type":"text","marks":[{"type":"code_inline"}]},{"text":". API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"axes","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Array) — Additional Y-axes for multi-series scaling (use ","type":"text"},{"text":"StockChartAxesDirective","type":"text","marks":[{"type":"code_inline"}]},{"text":" with ","type":"text"},{"text":"StockChartAxisDirective","type":"text","marks":[{"type":"code_inline"}]},{"text":"). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axes","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Navigation & Selectors:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"periods","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Array) — Period selector buttons (objects with ","type":"text"},{"text":"intervalType","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"interval","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"text","type":"text","marks":[{"type":"code_inline"}]},{"text":"). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#periods","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"enablePeriodSelector","type":"text","marks":[{"type":"code_inline"}]},{"text":" (boolean) — Toggle period selector visibility (default: true). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enableperiodselector","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"enableSelector","type":"text","marks":[{"type":"code_inline"}]},{"text":" (boolean) — Toggle range selector (thumbs) visibility (default: true). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enableselector","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"enableCustomRange","type":"text","marks":[{"type":"code_inline"}]},{"text":" (boolean) — Enable custom range selection mode. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablecustomrange","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Analysis & Events:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"indicators","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Array) — Technical indicators configuration (SMA, EMA, RSI, MACD, Bollinger, etc.). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"stockEvents","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Array) — Stock event markers (date, text, description, type, background). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockEventModel","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Interaction & UI:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"tooltip","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Object) — Tooltip settings (","type":"text"},{"text":"enable","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"format","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"shared","type":"text","marks":[{"type":"code_inline"}]},{"text":"). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTooltipSettingsModel","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"crosshair","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Object) — Crosshair settings (","type":"text"},{"text":"enable","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"lineType","type":"text","marks":[{"type":"code_inline"}]},{"text":"). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/crosshairSettingsModel","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"legendSettings","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Object) — Legend display and templates. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartLegendSettingsModel","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Selection & Appearance:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"selectedDataIndexes","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Array) — Programmatically set selected data points. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selecteddataindexes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"selectionMode","type":"text","marks":[{"type":"code_inline"}]},{"text":" (string) — Selection mode (None, Point, Series). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectionmode","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"isMultiSelect","type":"text","marks":[{"type":"code_inline"}]},{"text":" (boolean) — Allow multiple data point selection. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#ismultiselect","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Theming & Layout:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"theme","type":"text","marks":[{"type":"code_inline"}]},{"text":" (string) — Chart theme (Material, Bootstrap, Fabric, Tailwind, HighContrast, etc.). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#theme","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"background","type":"text","marks":[{"type":"code_inline"}]},{"text":" (string) — Chart background color. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#background","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"border","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Object) — Chart border configuration. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartBorderModel","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"chartArea","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Object) — Chart area styling. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAreaModel","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"margin","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Object) — Chart margin configuration. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockMarginModel","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"title","type":"text","marks":[{"type":"code_inline"}]},{"text":" (string) — Chart title. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#title","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"titleStyle","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Object) — Title font styling. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartFontModel","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"width","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"height","type":"text","marks":[{"type":"code_inline"}]},{"text":" (string) — Dimensions. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#width","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Export & Persistence:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"exportType","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Array) — Export formats available in toolbar ['PNG', 'JPEG', 'SVG', 'PDF']. Set empty array ","type":"text"},{"text":"[]","type":"text","marks":[{"type":"code_inline"}]},{"text":" to disable export. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#exporttype","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"enablePersistence","type":"text","marks":[{"type":"code_inline"}]},{"text":" (boolean) — Persist chart state between page loads. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablepersistence","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Series & Analysis:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"series","type":"text","marks":[{"type":"code_inline"}]},{"text":" / ","type":"text"},{"text":"StockChartSeriesCollectionDirective","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Series collection with StockChartSeriesDirective items. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"indicators","type":"text","marks":[{"type":"code_inline"}]},{"text":" / ","type":"text"},{"text":"StockChartIndicatorsDirective","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Technical indicators collection with StockChartIndicatorDirective items. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"trendlines","type":"text","marks":[{"type":"code_inline"}]},{"text":" / ","type":"text"},{"text":"StockChartTrendlinesDirective","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Trend lines collection with StockChartTrendlineDirective items. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTrendlineModel","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Accessibility & RTL:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"enableRtl","type":"text","marks":[{"type":"code_inline"}]},{"text":" (boolean) — Enable right-to-left rendering. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablertl","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Zoom & Pan:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"zoomSettings","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Object) — Zoom and pan configuration. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/zoomSettingsModel","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Methods","type":"text"}]},{"type":"paragraph","content":[{"text":"All methods with official API links: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#methods","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"export(type: string, fileName: string)","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Export chart as PNG, JPEG, SVG, or PDF. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#export","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"print()","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Print the chart to a printer or PDF. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#print","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"destroy()","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Clean up and remove the chart instance. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#destroy","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"getModuleName()","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Returns the component module name. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#getmodulename","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"renderPeriodSelector()","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Programmatically render the period selector. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#renderperiodselector","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"rangeChanged(start: Date | number, end: Date | number)","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Programmatically change the visible range. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechanged","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Events","type":"text"}]},{"type":"paragraph","content":[{"text":"All events with official API links: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#events","type":"text"}]},{"type":"paragraph","content":[{"text":"Lifecycle Events:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"load","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Fired before chart is loaded. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#load","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"loaded","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Fired after chart is loaded. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#loaded","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Data & Rendering Events:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"axisLabelRender","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Customize each axis label before rendering. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axislabelrender","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"seriesRender","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Fired when a series is rendered. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#seriesrender","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"beforeExport","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Fired before export operation. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#beforeexport","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"User Interaction Events:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"pointClick","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Fired when a data point is clicked. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointclick","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"pointMove","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Fired when mouse moves over a data point. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointmove","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"legendClick","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Fired when a legend item is clicked. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendclick","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"legendRender","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Fired when legend items are rendered. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendrender","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Tooltip & Crosshair Events:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"tooltipRender","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Modify tooltip content before display. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#tooltiprender","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Range & Selector Events:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"rangeChange","type":"text","marks":[{"type":"code_inline"}]},{"text":" / ","type":"text"},{"text":"onRangeChange","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Emitted when the selected range changes. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechange","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"selectorRender","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Triggered when range selector renders. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectorrender","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Technical Analysis Events:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"stockEventRender","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Customize stock event marker rendering. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockeventrender","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"onZooming","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Fired during zoom interactions. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#onzooming","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Suggested reference files and sections","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/api.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Full API surface summary (props, methods, events) with links to official docs.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/configuration.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Move/expand prop-specific docs (axes, theme, sizing).","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/interactive-features.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Add event hooks and examples for ","type":"text"},{"text":"tooltipRender","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"pointClick","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"axisLabelRender","type":"text","marks":[{"type":"code_inline"}]},{"text":".","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/technical-analysis.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Expand ","type":"text"},{"text":"indicators","type":"text","marks":[{"type":"code_inline"}]},{"text":" and ","type":"text"},{"text":"stockEvents","type":"text","marks":[{"type":"code_inline"}]},{"text":" API samples.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Minimal API example (props + events)","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"\u003cStockChartComponent\n id=\"stockchart\"\n dataSource={data}\n primaryXAxis={{ valueType: 'DateTime' }}\n enablePeriodSelector={true}\n indicators={[{ type: 'Sma', period: 14 }]}\n stockEvents={[{ date: new Date(2023,0,1), text: 'Earnings' }]}\n tooltip={{ enable: true }}\n crosshair={{ enable: true }}\n load={(args) => console.log('loading', args)}\n loaded={(args) => console.log('loaded', args)}\n axisLabelRender={(args) => {/* modify labels */}}\n pointClick={(args) => {/* handle point click */}}\n>\n \u003cInject services={[DateTime, CandleSeries, Tooltip, Crosshair]} />\n \u003cStockChartSeriesCollectionDirective>\n \u003cStockChartSeriesDirective type=\"Candle\" xName=\"x\" open=\"open\" high=\"high\" low=\"low\" close=\"close\" />\n \u003c/StockChartSeriesCollectionDirective>\n\u003c/StockChartComponent>","type":"text"}]}]},"metadata":{"date":"2026-11-02","name":"syncfusion-react-stock-chart","author":"@skillopedia","source":{"stars":3,"repo_name":"react-ui-components-skills","origin_url":"https://github.com/syncfusion/react-ui-components-skills/blob/HEAD/skills/syncfusion-react-stock-chart/SKILL.md","repo_owner":"syncfusion","body_sha256":"7d2f4782df8c53f5b51a2e0edf7223448bb778b49b9276c9536369027aad4747","cluster_key":"57364c16598d7ae7fea52a275953884b34cf164d39b365bd34a0fb326e97043b","clean_bundle":{"format":"clean-skill-bundle-v1","source":"syncfusion/react-ui-components-skills/skills/syncfusion-react-stock-chart/SKILL.md","text_bytes":238611,"source_commit":"4baa652dcd2a01ebb3cf9ca66051cc18ffa40f81","skills_sh_rank":16670,"attachment_count":9,"text_attachments":9,"attachment_storage":"skill_attachments","binary_attachments":0},"cluster_size":1,"skill_md_path":"skills/syncfusion-react-stock-chart/SKILL.md","import_metadata":{"date":"2026-11-02","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":"34.1.29","category":"Data Visualization"},"import_tag":"skills-sh-top20k-2026-11","description":"Implements the Syncfusion React Stock Chart component for visualizing financial and market data. Use this when users need stock price visualization, OHLC charts, candlestick charts, or trading chart interfaces. Supports multiple series types, period selectors, range navigators, technical indicators (e.g., SMA, MACD, Bollinger Bands), and interactive analysis tools for financial data in React applications."}},"renderedAt":1793666004953}

Implementing Syncfusion React Stock Charts The Stock Chart component is a specialized financial chart for visualizing stock price movements over time. It provides essential features for financial data analysis including candlestick/OHLC visualization, period selectors for quick date range navigation, range selectors for precise data filtering, technical indicators, and interactive tools like tooltips and crosshair. When to Use This Skill Use this skill when you need to: - Visualize financial/stock data - Display stock prices, trading volumes, market movements - Display OHLC data - Show Open,…