OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-stock-chart
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.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-stock-chart
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.
Use this skill when you need to:
Package: @syncfusion/ej2-react-charts
Component: StockChartComponent
Key Features:
indicatorType supportstockEvents) and stockEventRenderselectionMode, isMultiSelect, selectedDataIndexeszoomSettings, onZooming)exportType, Export, Print)enablePersistence, enableRtl)📄 Read: references/getting-started.md
Read this first for initial setup:
📄 Read: references/configuration.md
For configuring and customizing axes:
📄 Read: references/series-types.md
For choosing and configuring chart series:
📄 Read: references/selectors.md
For implementing time range navigation:
📄 Read: references/interactive-features.md
For adding user interaction and visual feedback:
📄 Read: references/technical-analysis.md
For financial analysis features:
📄 Read: references/interactive-features.md and references/configuration.md
For tooltip and crosshair setup:
enable propertyenable: truecrosshairTooltipcrosshairTooltip📄 Read: references/configuration.md
For customizing chart appearance and behavior:
axes array📄 Read: references/utilities.md
For export functionality and accessibility:
For the Stock Chart period selector UI to work properly, you need to include the required CSS stylesheets in your HTML file. Add the following <link> tags to the <head> section of your index.html:
Key CSS Stylesheets:
Syncfusion Tailwind CSS (tailwind3.css) - Required for Stock Chart components
https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.cssBootstrap CSS - Optional but recommended for additional styling support
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssImportant Notes:
@syncfusion/ej2-react-charts package versionAlternative CSS URLs by Theme:
https://cdn.syncfusion.com/ej2/33.1.44/material.csshttps://cdn.syncfusion.com/ej2/33.1.44/bootstrap.csshttps://cdn.syncfusion.com/ej2/33.1.44/fabric.csshttps://cdn.syncfusion.com/ej2/33.1.44/tailwind3.csshttps://cdn.syncfusion.com/ej2/33.1.44/highcontrast.cssStock Chart supports multiple axis types for different data scenarios:
Use for date-based stock data:
Best for: Stock price data with dates
Inject: DateTime module
Displays only business days (excludes weekends/holidays):
Best for: Business day-only trading data
Inject: DateTimeCategory module
Note: Requires DateTimeCategory module import and injection
For Y-axis with logarithmic scale (useful for wide value ranges):
Best for: Data spanning multiple orders of magnitude
Inject: Logarithmic module
Note: Cannot contain zero or negative values
Standard linear numeric scale:
Best for: Price values and general Y-axis No module injection required - This is the default
Use multiple Y-axes for different scales:
| Prop | Type | Description |
|---|---|---|
primaryXAxis | Object | X-axis configuration (typically DateTime) |
primaryYAxis | Object | Y-axis configuration |
axes | Array | Additional Y-axes for multi-axis scaling |
title | string | Chart title |
titleStyle | Object | Title font styling |
periods | Array | Period selector buttons configuration |
enablePeriodSelector | boolean | Show/hide period selector (default: true) |
enableSelector | boolean | Show/hide range selector (default: true) |
enableCustomRange | boolean | Enable custom date range selection |
tooltip | Object | Tooltip configuration |
crosshair | Object | Crosshair configuration |
legendSettings | Object | Legend configuration |
stockEvents | Array | Stock event markers |
indicators | Array | Technical indicators |
height | string | Chart height |
width | string | Chart width |
margin | Object | Chart margin configuration |
chartArea | Object | Chart area styling |
background | string | Chart background color |
border | Object | Chart border configuration |
theme | string | Chart theme |
zoomSettings | Object | Zoom and pan configuration |
rows | Array | Row definitions for multi-row layouts |
selectedDataIndexes | Array | Programmatically select specific points |
selectionMode | string | Selection mode (None, Point, Series, Cluster, DragXY, DragX, DragY) |
isMultiSelect | boolean | Allow multiple data point selection |
exportType | Array | Export formats (PNG, JPEG, SVG, PDF) |
enablePersistence | boolean | Persist chart state between page reloads |
enableRtl | boolean | Enable right-to-left rendering |
locale | string | Override global culture/localization |
noDataTemplate | string/Function | Template shown when no data available |
isTransposed | boolean | Render chart in transposed manner |
seriesType | Array | Available series types |
indicatorType | Array | Available technical indicator types |
trendlineType | Array | Available trendline types |
bearFillColor | string | Fill color for downtrend (bear) candles |
bullFillColor | string | Fill color for uptrend (bull) candles |
animation | Object | Animation settings for series rendering |
pointClick | Function | Event fired when a data point is clicked |
stockChartMouseMove | Function | Event fired when mouse moves over chart |
stockChartMouseClick | Function | Event fired when chart area is clicked |
stockChartMouseDown | Function | Event fired on mouse down |
stockChartMouseUp | Function | Event fired on mouse up |
stockChartMouseLeave | Function | Event fired when cursor leaves chart |
tooltipRender | Function | Event for customizing tooltip before display |
axisLabelRender | Function | Event for customizing axis labels before rendering |
seriesRender | Function | Event fired when series is rendered |
legendClick | Function | Event fired when legend item is clicked |
legendRender | Function | Event fired when legend items are rendered |
crosshairLabelRender | Function | Event fired before crosshair tooltip is rendered |
selectorRender | Function | Triggered when range selector renders |
onZooming | Function | Event fired during zoom interactions |
load | Function | Lifecycle event fired before chart is loaded |
loaded | Function | Lifecycle event fired after chart is loaded |
beforeExport | Function | Event fired before export operation |
stockEventRender | Function | Customize stock event marker rendering |
rows | Array | Row definitions for multi-row layouts |
isTransposed | boolean | Render chart in transposed manner |
trendlines | Array | Trend line configurations (StockChartTrendlinesDirective) |
| Prop | Type | Description |
|---|---|---|
dataSource | Array | Stock data array |
type | string | Series type (Candle, Line, Spline, Hilo, HiloOpenClose) |
xName | string | Data field for x-axis (date) |
high | string | Data field for high values |
low | string | Data field for low values |
open | string | Data field for open values |
close | string | Data field for close values |
volume | string | Data field for volume values |
name | string | Series name for legend |
yName | string | Data field for y-axis values |
yAxisName | string | Name of Y-axis to bind this series to (for multi-axis) |
bearFillColor | string | Fill color for downtrend candles/bars |
bullFillColor | string | Fill color for uptrend candles/bars |
fill | string | Series color or gradient fill (e.g., 'url(#gradient1)') |
width | number | Line width for series |
opacity | number | Opacity of series (0-1) |
border | Object | Border configuration for series (width, color, dashArray) |
marker | Object | Data point marker configuration (visible, size, shape, fill, border) |
animation | Object | Animation settings (enable, duration, delay) |
legendShape | string | Legend icon shape (Circle, Rectangle, Triangle, Diamond, etc.) |
tooltip | Object | Series-specific tooltip configuration |
trendlines | Array | Trend lines for this series |
cornerRadius | number | Corner radius for rectangular shapes |
Stock Chart requires explicit module injection for features:
Common modules:
Axes:
UI Features:
Series Types:
Technical Analysis:
Export:
Stock Chart provides comprehensive event support for tracking user interactions and building custom behaviors:
Below is a concise API reference derived from the official Syncfusion StockChart API. Include or expand these entries in references/* as needed.
Complete API Documentation:
All props with official API links: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel
Data & Series:
dataSource (Array | DataManager) — Source data for series (objects with x, open, high, low, close, volume). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#datasourceseries / StockChartSeriesCollectionDirective — Series definitions and types (Candle, Line, Spline, Hilo, HiloOpenClose). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-modelAxes:
primaryXAxis (Object) — X axis configuration (typically valueType: 'DateTime' | 'DateTimeCategory' | 'Numeric'). Supports crosshairTooltip, majorGridLines, majorTickLines. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-modelprimaryYAxis (Object) — Y axis configuration (typically valueType: 'Double' or 'Logarithmic'). Supports labelFormat, rangePadding, minorGridLines, crosshairTooltip. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-modelaxes (Array) — Additional Y-axes for multi-series scaling (use StockChartAxesDirective with StockChartAxisDirective). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axesNavigation & Selectors:
periods (Array) — Period selector buttons (objects with intervalType, interval, text). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#periodsenablePeriodSelector (boolean) — Toggle period selector visibility (default: true). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enableperiodselectorenableSelector (boolean) — Toggle range selector (thumbs) visibility (default: true). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enableselectorenableCustomRange (boolean) — Enable custom range selection mode. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablecustomrangeAnalysis & Events:
indicators (Array) — Technical indicators configuration (SMA, EMA, RSI, MACD, Bollinger, etc.). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModelstockEvents (Array) — Stock event markers (date, text, description, type, background). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockEventModelInteraction & UI:
tooltip (Object) — Tooltip settings (enable, format, shared). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTooltipSettingsModelcrosshair (Object) — Crosshair settings (enable, lineType). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/crosshairSettingsModellegendSettings (Object) — Legend display and templates. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartLegendSettingsModelSelection & Appearance:
selectedDataIndexes (Array) — Programmatically set selected data points. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selecteddataindexesselectionMode (string) — Selection mode (None, Point, Series). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectionmodeisMultiSelect (boolean) — Allow multiple data point selection. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#ismultiselectTheming & Layout:
theme (string) — Chart theme (Material, Bootstrap, Fabric, Tailwind, HighContrast, etc.). API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#themebackground (string) — Chart background color. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#backgroundborder (Object) — Chart border configuration. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartBorderModelchartArea (Object) — Chart area styling. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAreaModelmargin (Object) — Chart margin configuration. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockMarginModeltitle (string) — Chart title. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#titletitleStyle (Object) — Title font styling. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartFontModelwidth, height (string) — Dimensions. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#widthExport & Persistence:
exportType (Array) — Export formats available in toolbar ['PNG', 'JPEG', 'SVG', 'PDF']. Set empty array [] to disable export. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#exporttypeenablePersistence (boolean) — Persist chart state between page loads. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablepersistenceSeries & Analysis:
series / StockChartSeriesCollectionDirective — Series collection with StockChartSeriesDirective items. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-modelindicators / StockChartIndicatorsDirective — Technical indicators collection with StockChartIndicatorDirective items. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModeltrendlines / StockChartTrendlinesDirective — Trend lines collection with StockChartTrendlineDirective items. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTrendlineModelAccessibility & RTL:
enableRtl (boolean) — Enable right-to-left rendering. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablertlZoom & Pan:
zoomSettings (Object) — Zoom and pan configuration. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/zoomSettingsModelAll methods with official API links: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#methods
export(type: string, fileName: string) — Export chart as PNG, JPEG, SVG, or PDF. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#exportprint() — Print the chart to a printer or PDF. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#printdestroy() — Clean up and remove the chart instance. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#destroygetModuleName() — Returns the component module name. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#getmodulenamerenderPeriodSelector() — Programmatically render the period selector. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#renderperiodselectorrangeChanged(start: Date | number, end: Date | number) — Programmatically change the visible range. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechangedAll events with official API links: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#events
Lifecycle Events:
load — Fired before chart is loaded. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#loadloaded — Fired after chart is loaded. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#loadedData & Rendering Events:
axisLabelRender — Customize each axis label before rendering. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axislabelrenderseriesRender — Fired when a series is rendered. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#seriesrenderbeforeExport — Fired before export operation. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#beforeexportUser Interaction Events:
pointClick — Fired when a data point is clicked. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointclickpointMove — Fired when mouse moves over a data point. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointmovelegendClick — Fired when a legend item is clicked. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendclicklegendRender — Fired when legend items are rendered. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendrenderTooltip & Crosshair Events:
tooltipRender — Modify tooltip content before display. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#tooltiprenderRange & Selector Events:
rangeChange / onRangeChange — Emitted when the selected range changes. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechangeselectorRender — Triggered when range selector renders. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectorrenderTechnical Analysis Events:
stockEventRender — Customize stock event marker rendering. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockeventrenderonZooming — Fired during zoom interactions. API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#onzoomingreferences/api.md — Full API surface summary (props, methods, events) with links to official docs.references/configuration.md — Move/expand prop-specific docs (axes, theme, sizing).references/interactive-features.md — Add event hooks and examples for tooltipRender, pointClick, axisLabelRender.references/technical-analysis.md — Expand indicators and stockEvents API samples.import { StockChartComponent, StockChartSeriesCollectionDirective,
StockChartSeriesDirective, Inject, DateTime, Tooltip,
RangeTooltip, Crosshair, CandleSeries } from '@syncfusion/ej2-react-charts';
function App() {
const data = [ /* stock data */ ];
const periods = [
{ intervalType: 'Days', interval: 1, text: '1D' },
{ intervalType: 'Days', interval: 5, text: '5D' },
{ intervalType: 'Months', interval: 1, text: '1M' },
{ intervalType: 'Months', interval: 3, text: '3M' },
{ intervalType: 'Months', interval: 6, text: '6M' },
{ intervalType: 'Years', interval: 1, text: '1Y' },
{ text: 'All' }
];
return (
<StockChartComponent
id='stockchart'
title='Stock Analysis'
primaryXAxis={{ valueType: 'DateTime' }}
periods={periods}
enablePeriodSelector={true}
>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, CandleSeries]} />
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective
dataSource={data}
type='Candle'
xName='x'
high='high'
low='low'
open='open'
close='close'
/>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Syncfusion Tailwind CSS for Stock Chart styling -->
<link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" />
<!-- Bootstrap CSS for additional styling support -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<title>Stock Chart App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>primaryXAxis={{
valueType: 'DateTime',
majorGridLines: { width: 0 },
majorTickLines: { color: 'transparent' }
}}primaryXAxis={{
valueType: 'DateTimeCategory',
majorGridLines: { width: 0 }
}}primaryYAxis={{
valueType: 'Logarithmic',
labelFormat: '${value}'
}}primaryYAxis={{
valueType: 'Double',
labelFormat: '${value}',
minimum: 0,
maximum: 500,
interval: 50
}}<StockChartComponent
primaryXAxis={{ valueType: 'DateTime' }}
primaryYAxis={{ title: 'Price', labelFormat: '${value}' }}
>
{/* Additional axes using StockChartAxesDirective */}
<StockChartAxesDirective>
<StockChartAxisDirective
name='volumeAxis'
opposedPosition={true}
title='Volume'
labelFormat='{value}M'
/>
</StockChartAxesDirective>
{/* Series bind to respective axes */}
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective type='Candle' yAxisName='primaryYAxis' />
<StockChartSeriesDirective type='Column' yAxisName='volumeAxis' />
</StockChartSeriesCollectionDirective>
</StockChartComponent>import { StockChartComponent, StockChartSeriesCollectionDirective,
StockChartSeriesDirective, Inject, DateTime, Tooltip,
RangeTooltip, Crosshair, CandleSeries, StockLegend,
Export, Print } from '@syncfusion/ej2-react-charts';
function FinancialDashboard() {
const handlePointClick = (args) => {
console.log(`Point clicked: ${args.x}, Value: ${args.y}`);
};
const handleMouseMove = (args) => {
console.log('Mouse moved over chart');
};
const handleRangeChange = (args) => {
console.log(`Range changed: ${args.start} to ${args.end}`);
};
return (
<StockChartComponent
id='stockchart'
title='Comprehensive Stock Analysis'
primaryXAxis={{ valueType: 'DateTime' }}
tooltip={{ enable: true, shared: true }}
crosshair={{ enable: true }}
legendSettings={{ visible: true }}
enablePeriodSelector={true}
enableSelector={true}
pointClick={handlePointClick}
stockChartMouseMove={handleMouseMove}
rangeChange={handleRangeChange}
>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair,
CandleSeries, StockLegend, Export, Print]} />
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective
dataSource={stockData}
type='Candle'
name='Apple Inc'
/>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
);
}function StyledCandleChart() {
const stockData = [ /* stock data with open, high, low, close */ ];
return (
<StockChartComponent
id='stockchart'
primaryXAxis={{ valueType: 'DateTime' }}
primaryYAxis={{ labelFormat: '${value}' }}
>
<Inject services={[DateTime, CandleSeries, Tooltip, RangeTooltip]} />
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective
dataSource={stockData}
type='Candle'
xName='x'
open='open'
high='high'
low='low'
close='close'
bearFillColor='#ef5350' // Red for downtrend
bullFillColor='#26a69a' // Green for uptrend
animation={{ enable: true, duration: 500 }}
/>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
);
}function TechnicalAnalysisChart() {
const indicators = [
{
type: 'Sma',
field: 'Close',
period: 14,
fill: 'blue'
},
{
type: 'BollingerBands',
field: 'Close',
period: 20,
standardDeviation: 2,
upperLine: { color: '#ff0000', width: 1 },
lowerLine: { color: '#ff0000', width: 1 }
}
];
return (
<StockChartComponent
id='stockchart'
primaryXAxis={{ valueType: 'DateTime' }}
indicators={indicators}
>
<Inject services={[DateTime, CandleSeries, Tooltip,
LineSeries, RangeTooltip, SmaIndicator, BollingerBands]} />
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective
dataSource={stockData}
type='Candle'
/>
</StockChartSeriesCollectionDirective>
<StockChartIndicatorsDirective>
{/* Indicators can also be added here via directives */}
</StockChartIndicatorsDirective>
</StockChartComponent>
);
}function CrosshairChart() {
return (
<StockChartComponent
id='stockchart'
primaryXAxis={{
valueType: 'DateTime',
majorGridLines: { width: 0 },
majorTickLines: { color: 'transparent' },
crosshairTooltip: { enable: true } // X-axis tooltip
}}
primaryYAxis={{
labelFormat: 'n0',
majorTickLines: { width: 0 },
crosshairTooltip: { enable: true } // Y-axis tooltip
}}
crosshair={{
enable: true,
lineType: 'Both',
line: { width: 1, color: '#0080ff' }
}}
tooltip={{ enable: true }}
>
<Inject services={[DateTime, CandleSeries, Crosshair, Tooltip, RangeTooltip]} />
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective
dataSource={stockData}
type='Candle'
/>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
);
}function StockEventsChart() {
const stockEvents = [
{
date: new Date('2012-04-01'),
text: 'Q1 Earnings',
description: 'Quarterly earnings release',
type: 'Flag',
background: '#6c757d'
},
{
date: new Date('2012-07-01'),
text: 'Dividend',
description: 'Dividend payout',
type: 'Circle',
background: '#28a745'
}
];
return (
<StockChartComponent
id='stockchart'
primaryXAxis={{ valueType: 'DateTime' }}
stockEvents={stockEvents}
>
<Inject services={[DateTime, SplineSeries, Tooltip]} />
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective
dataSource={stockData}
type='Spline'
/>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
);
}function ExportableChart() {
const chartRef = useRef<StockChartComponent>(null);
const handleExport = (type: string) => {
if (chartRef.current) {
chartRef.current.export(type, 'StockChart');
}
};
const handlePrint = () => {
if (chartRef.current) {
chartRef.current.print();
}
};
return (
<div>
<div>
<button onClick={() => handleExport('PNG')}>Export PNG</button>
<button onClick={() => handleExport('JPEG')}>Export JPEG</button>
<button onClick={() => handleExport('SVG')}>Export SVG</button>
<button onClick={() => handleExport('PDF')}>Export PDF</button>
<button onClick={handlePrint}>Print Chart</button>
</div>
<StockChartComponent
ref={chartRef}
id='stockchart'
primaryXAxis={{ valueType: 'DateTime' }}
exportType={['PNG', 'JPEG', 'SVG', 'PDF']}
>
<Inject services={[DateTime, CandleSeries, Export]} />
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective
dataSource={stockData}
type='Candle'
/>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
</div>
);
}import { Inject, DateTime, DateTimeCategory, Logarithmic,
Tooltip, RangeTooltip, Crosshair,
LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries,
HiloSeries, RangeAreaSeries, StockLegend, Trendlines, Export } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator,
MomentumIndicator, SmaIndicator, AtrIndicator,
AccumulationDistributionIndicator, MacdIndicator,
StochasticIndicator } from '@syncfusion/ej2-react-charts';
<StockChartComponent>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair,
CandleSeries, StockLegend, Trendlines, Export,
EmaIndicator, SmaIndicator, BollingerBands]} />
</StockChartComponent>// Point click event
const handlePointClick = (args) => {
console.log('Point clicked:', args.pointIndex, args.seriesIndex);
console.log('X:', args.x, 'Y:', args.y);
};
// Point move event (hover)
const handlePointMove = (args) => {
console.log('Hovering over point:', args.x);
};
<StockChartComponent
pointClick={handlePointClick}
pointMove={handlePointMove}
>
{/* ... */}
</StockChartComponent>// Various mouse tracking events
const handleMouseMove = (args) => {
console.log('Mouse position:', args.x, args.y);
};
const handleMouseLeave = (args) => {
console.log('Mouse left chart area');
};
const handleMouseClick = (args) => {
console.log('Chart clicked');
};
<StockChartComponent
stockChartMouseMove={handleMouseMove}
stockChartMouseLeave={handleMouseLeave}
stockChartMouseClick={handleMouseClick}
stockChartMouseDown={(args) => console.log('Mouse down')}
stockChartMouseUp={(args) => console.log('Mouse up')}
>
{/* ... */}
</StockChartComponent>// Range change event (period selector or range selector)
const handleRangeChange = (args) => {
console.log('Range changed:', args.start, 'to', args.end);
// Refresh data or update analysis
};
<StockChartComponent
rangeChange={handleRangeChange}
>
{/* ... */}
</StockChartComponent>// Legend click event
const handleLegendClick = (args) => {
console.log('Legend item clicked:', args.legendText);
};
// Legend render event (for customization)
const handleLegendRender = (args) => {
if (args.legendText === 'AAPL') {
args.fill = '#ff0000'; // Customize legend color
}
};
<StockChartComponent
legendClick={handleLegendClick}
legendRender={handleLegendRender}
>
{/* ... */}
</StockChartComponent>// Customize tooltip before rendering
const handleTooltipRender = (args) => {
args.text = `<b>Stock Price: ${args.text}</b>`;
};
<StockChartComponent
tooltip={{ enable: true }}
tooltipRender={handleTooltipRender}
>
{/* ... */}
</StockChartComponent>// Customize stock event markers
const handleStockEventRender = (args) => {
// Customize event styling, position, etc.
if (args.text === 'Earnings') {
args.background = '#ff0000'; // Custom color for earnings
}
};
<StockChartComponent
stockEvents={stockEvents}
stockEventRender={handleStockEventRender}
>
{/* ... */}
</StockChartComponent>// Load event (before rendering)
const handleLoad = (args) => {
console.log('Chart loading');
};
// Loaded event (after rendering)
const handleLoaded = (args) => {
console.log('Chart loaded');
};
<StockChartComponent
load={handleLoad}
loaded={handleLoaded}
>
{/* ... */}
</StockChartComponent><StockChartComponent
id="stockchart"
dataSource={data}
primaryXAxis={{ valueType: 'DateTime' }}
enablePeriodSelector={true}
indicators={[{ type: 'Sma', period: 14 }]}
stockEvents={[{ date: new Date(2023,0,1), text: 'Earnings' }]}
tooltip={{ enable: true }}
crosshair={{ enable: true }}
load={(args) => console.log('loading', args)}
loaded={(args) => console.log('loaded', args)}
axisLabelRender={(args) => {/* modify labels */}}
pointClick={(args) => {/* handle point click */}}
>
<Inject services={[DateTime, CandleSeries, Tooltip, Crosshair]} />
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective type="Candle" xName="x" open="open" high="high" low="low" close="close" />
</StockChartSeriesCollectionDirective>
</StockChartComponent>