syncfusion Implementing Syncfusion Stock Chart
Syncfusion Stock Chart is a specialized data visualization control designed for displaying financial market data with support for multiple series types, technical indicators, and interactive features.
When to Use This Skill
Use this skill when you need to:
- Display stock price data with candlestick, line, or OHLC charts
- Add technical analysis indicators (moving averages, RSI, Bollinger Bands, etc.)
- Create interactive trading dashboards with zoom, selection, and tooltips
- Implement range and period selectors for time-based filtering
- Visualize trend lines and stock events on financial charts
- Customize chart appearance with themes and gradients
Component Overview
The Stock Chart component provides:
- 6 series types for different data visualization needs
- 10 technical indicators for financial analysis
- Interactive features like crosshairs, tooltips, and zoom
- Legend and axis customization for flexible layouts
- Stock events and trend lines for annotations
- Export and print capabilities for reporting
- Period and range selectors for time-based navigation
- Annotations for custom markings and labels
- Multiple axes support for complex layouts
Documentation and Navigation Guide
API Reference
📄 Read: references/api-reference.md
- Complete API documentation for Stock Chart component
- Constructor and property definitions
- Event properties and callbacks
- Configuration options and usage patterns
- Related settings classes and data structures
Getting Started
📄 Read: references/getting-started.md
- NuGet package installation and setup
- Creating ASP.NET Core applications
- Tag helper configuration
- Basic control rendering
- Script manager registration
Series Types & Data Visualization
📄 Read: references/series-types.md
- 6 major series types (Line, Candle, HollowCandle, Spline, Hilo, HiloOpenClose)
- Choosing the right series for your data
- Series configuration and customization
- Data requirements for each series type
Data Binding & Configuration
📄 Read: references/data-binding.md
- DataSource configuration and binding
- DateTime vs Numeric axes
- OHLC data structure
- Financial data formatting
- Date-based axis configuration
Legend Customization
📄 Read: references/legend-customization.md
- Enabling and disabling legends
- Legend positioning (Left, Right, Top, Bottom, Custom)
- Legend alignment (Center, Near, Far)
- Custom positioning with coordinates
- Legend visibility toggling
Technical Indicators
📄 Read: references/technical-indicators.md
- 10 indicator types (AccumulationDistribution, ATR, EMA, SMA, TMA, Momentum, MACD, RSI, Stochastic, BollingerBand)
- Adding and removing indicators
- Indicator configuration and customization
- Overbought/oversold thresholds
- Volume-based indicators
User Interactions
📄 Read: references/user-interactions.md
- Crosshairs and trackballs
- Selection modes for data points
- Tooltip configuration
- Zoom and scroll interactions
- Interactive feature customization
Advanced Features
📄 Read: references/advanced-features.md
- Trend lines (linear, exponential, polynomial, etc.)
- Stock events and annotations
- Range selectors for filtering
- Period selectors for time navigation
- Accessibility features
Customization & Appearance
📄 Read: references/customization-appearance.md
- Chart dimensions and sizing
- Themes and color schemes
- Axis customization
- Gradient fills for visual enhancement
- Export and print options
Quick Start
@{
var stockData = new[]
{
new { x = new DateTime(2023, 1, 1), open = 150, high = 155, low = 145, close = 152, volume = 1000000 },
new { x = new DateTime(2023, 1, 2), open = 152, high = 158, low = 151, close = 156, volume = 1200000 }
};
}
<ejs-stockchart id="container">
<e-stockchart-series-collection>
<e-stockchart-series dataSource="stockData"
xName="x"
yName="close"
type="Candle">
</e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>
Common Patterns
Pattern 1: Candlestick Chart with DateTime Axis
Create a financial chart showing OHLC (Open, High, Low, Close) data:
<ejs-stockchart id="stockChart">
<e-stockchart-primaryxaxis
valueType="DateTime">
</e-stockchart-primaryxaxis>
<e-stockchart-series-collection>
<e-stockchart-series
dataSource="financialData"
xName="date"
yName="close"
type="Candle">
</e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>
Pattern 2: Adding Technical Indicators
Enhance analysis with moving averages:
<ejs-stockchart id="stockChart">
<e-stockchart-indicators>
<e-stockchart-indicator
type="Ema"
field="Close"
period="14">
</e-stockchart-indicator>
</e-stockchart-indicators>
</ejs-stockchart>
Pattern 3: Interactive Features
Enable crosshairs and tooltips for user interaction:
<ejs-stockchart id="stockChart">
<e-stockchart-tooltipsettings enable="true"></e-stockchart-tooltipsettings>
<e-stockchart-crosshairsettings lineType="Vertical">
<e-crosshairsettings-line color="red"></e-crosshairsettings-line>
</e-stockchart-crosshairsettings>
</ejs-stockchart>
Pattern 4: Legend Configuration
Position and customize the legend:
<ejs-stockchart id="stockChart">
<e-stockchart-legendsettings
visible="true"
position="Bottom"
alignment="Center">
</e-stockchart-legendsettings>
</ejs-stockchart>
Key Properties
Core Properties
- dataSource: Data collection for the chart (array or DataManager)
- xName: Property name for X-axis values
- yName: Property name for Y-axis values (typically Close price)
- type: Series type (Line, Candle, HollowCandle, Spline, Hilo, HiloOpenClose)
Appearance Properties
- background: Chart background color (hex or rgba)
- theme: Visual theme (Material, Fabric, Bootstrap, MaterialDark, etc.)
- width: Chart width (string with px or %)
- height: Chart height (string with px or %)
- title: Chart title text
- isTransposed: Render chart in transposed manner
Feature Control Properties
- enablePeriodSelector: Show/hide period selector (default: true)
- enableSelector: Show/hide range selector (default: true)
- enableCustomRange: Allow custom range selection (default: true)
- enablePersistence: Persist component state between page reloads
- enableRtl: Render in right-to-left direction
- isMultiSelect: Enable multiple point selection
- isSelect: Enable selection feature
Export Properties
- exportType: Export format types (PNG, SVG, PDF)
- indicatorType: Technical indicator types
- seriesType: Series type options
- trendlineType: Trend line type options
Configuration Objects
- annotations: Annotation settings collection
- axes: Secondary axis collection
- border: Border color and width settings
- chartArea: Chart area border and background
- crosshair: Crosshair customization settings
- legendSettings: Legend appearance and behavior
- margin: Chart margins (left, right, top, bottom)
- periods: Period selector options
- primaryXAxis: Primary X-axis configuration
- primaryYAxis: Primary Y-axis configuration
- rows: Multiple plotting area settings
- selectedDataIndexes: Pre-selected data points
- selectionMode: Selection mode (Point, Series, Cluster, DragXY, DragX, DragY, None)
- series: Series collection
- stockEvents: Stock event annotations
- tooltip: Tooltip settings
- zoomSettings: Zoom and pan configuration
Template Properties
- locale: Culture and localization value
- noDataTemplate: Template for empty chart display
Key Events
Chart Lifecycle Events
- load: Triggers before the chart rendering begins
- loaded: Triggers after the chart rendering completes
- beforeExport: Triggers before export process begins (allows export customization)
User Interaction Events
- axisLabelRender: Triggers before each axis label is rendered
- pointClick: Triggers when clicking on a data point
- pointMove: Triggers when moving over data points
- stockChartMouseClick: Triggers on clicking the chart
- stockChartMouseDown: Triggers on mouse down
- stockChartMouseUp: Triggers on mouse up
- stockChartMouseMove: Triggers on hovering the chart
- stockChartMouseLeave: Triggers when cursor leaves the chart
- onZooming: Triggers after zoom selection is completed
- rangeChange: Triggers when the range is changed
Rendering Events
- seriesRender: Triggers before each series is rendered
- legendRender: Triggers before the legend is rendered
- legendClick: Triggers after clicking on legend items
- tooltipRender: Triggers before the tooltip is rendered
- crosshairLabelRender: Triggers before crosshair tooltip is rendered
- selectorRender: Triggers before rendering the selector
- stockEventRender: Triggers before stock events are rendered
Common Use Cases
- Stock Price Monitoring: Display real-time stock prices with candlestick charts
- Technical Analysis Dashboard: Combine multiple indicators for trading analysis
- Portfolio Overview: Visualize multiple stocks side-by-side
- Historical Price Trends: Show long-term price movements with smooth line charts
- Trading Signals: Annotate charts with trend lines and stock events
- Period-Based Filtering: Allow users to select time ranges with period selectors
Next Steps
Select the reference file that matches your current task from the Navigation Guide above. Each reference provides complete, self-contained documentation for its specific feature area.