syncfusion-blazor-stock-charts

What this skill does

# Implementing Stock Charts

**NuGet:** `Syncfusion.Blazor.Charts` + `Syncfusion.Blazor.Themes` (or `Syncfusion.Blazor.StockChart` for individual package)
**Namespace:** `Syncfusion.Blazor.Charts`

A comprehensive skill for implementing Syncfusion Blazor Stock Chart components for financial data visualization. The Stock Chart is specifically designed for visualizing stock market data with built-in features for technical analysis, time-based navigation, and financial indicators.

## When to Use This Skill

Use this skill immediately when you need to:
- Display stock market price data with OHLC (Open, High, Low, Close) values
- Create candlestick, line, or OHLC charts for financial data
- Add technical indicators (SMA, EMA, MACD, RSI, Bollinger Bands, ATR, Stochastic)
- Implement period selectors (1M, 3M, 6M, YTD, 1Y, All) for time-based navigation
- Add range selectors for custom date range selection
- Display stock events (earnings, dividends, stock splits)
- Add trend lines (linear, exponential, polynomial) to financial data
- Enable zooming, panning, and crosshair for data exploration
- Export stock charts to PNG, JPEG, SVG, or PDF formats
- Build investment portfolio dashboards or trading applications
- Visualize cryptocurrency price data or any time-series financial data
- Create responsive financial data visualizations for Blazor Server, WebAssembly, or Web App

## Component Overview

The **Syncfusion Blazor Stock Chart** (`SfStockChart`) is a feature-rich financial charting component that extends standard charting capabilities with:

- **5 Core Series Types**: Line, Spline, Candle, HiloOpenClose, Hilo
- **Hollow Candle Mode**: Enable solid or hollow candle rendering through candle configuration
- **9+ Technical Indicators**: SMA, EMA, MACD, RSI, Bollinger Bands, ATR, and more
- **Time Navigation**: Period selector with preset ranges, Range selector for custom dates
- **Stock Events**: Mark important dates (earnings, dividends, splits)
- **Trend Analysis**: Multiple trend line types with forecasting
- **Interactive Features**: Zooming, panning, crosshair, trackball tooltips
- **Export Options**: PNG, JPEG, SVG, PDF export and print
- **Accessibility**: WCAG compliant with keyboard navigation

## Documentation and Navigation Guide

### Getting Started

📄 **Read:** [references/getting-started.md](references/getting-started.md)

Start here for installation, setup, and your first stock chart. Covers:
- Installing Syncfusion.Blazor.Charts NuGet package
- Blazor Server, WebAssembly, and Web App setup
- Service registration and theme configuration
- Basic SfStockChart implementation with sample data
- Project structure and script references

### Core Chart Features

#### Series Types and Rendering

📄 **Read:** [references/series-types.md](references/series-types.md)

Learn about the 5 core series types for stock data visualization:
- Line and Spline series for trend visualization
- Candle series for traditional stock charts, with hollow candle rendering available through candle configuration
- HiloOpenClose and Hilo for price range display
- Series selector for runtime switching between types
- Choosing the right series type for your data

#### Data Binding and Structure

📄 **Read:** [references/working-with-data.md](references/working-with-data.md)

Configure data sources for stock charts:
- OHLC data structure (Open, High, Low, Close, Volume)
- DateTime-based data binding
- Remote data binding with APIs
- Data adapters for different sources
- Handling large datasets efficiently

#### Axis Configuration

📄 **Read:** [references/axes.md](references/axes.md)

Customize X and Y axes for financial data:
- DateTime, DateTimeCategory, and Logarithmic axis types
- Axis titles, labels, and formatting
- Tick lines and grid line customization
- Multiple axes for volume or indicator overlays
- Inversed axis and opposed positioning

### Financial Analysis Features

#### Period and Range Selectors

📄 **Read:** [references/period-range-selectors.md](references/period-range-selectors.md)

Implement time-based navigation:
- Period selector with preset buttons (1M, 3M, 6M, YTD, 1Y, All)
- Custom period button configuration
- Range selector for dragging date ranges
- Styling and positioning selectors
- Handling period change events

#### Technical Indicators

📄 **Read:** [references/technical-indicators.md](references/technical-indicators.md)

Add financial analysis indicators:
- Simple Moving Average (SMA) and Exponential Moving Average (EMA)
- MACD (Moving Average Convergence Divergence)
- RSI (Relative Strength Index) for momentum
- Bollinger Bands for volatility analysis
- ATR, Accumulation Distribution, Stochastic
- Overlaying multiple indicators
- Customizing indicator appearance

#### Stock Events

📄 **Read:** [references/stock-events.md](references/stock-events.md)

Mark important dates on the chart:
- Adding earnings announcements, dividends, stock splits
- Custom event shapes and icons
- Event positioning and styling
- Tooltip content for events
- Multiple events on the same chart

#### Trend Lines

📄 **Read:** [references/trend-lines.md](references/trend-lines.md)

Add trend analysis to series:
- Linear, Exponential, Logarithmic, Polynomial trends
- Moving average trend lines
- Forecasting with forward/backward periods
- Customizing trend line appearance
- Multiple trend lines per series

### Interactive Features

#### Zooming, Panning, and Crosshair

📄 **Read:** [references/zooming-panning-crosshair.md](references/zooming-panning-crosshair.md)

Enable user interaction for data exploration:
- Selection zoom, pinch zoom, mouse wheel zoom
- Zoom toolbar with reset functionality
- Pan mode for navigating zoomed data
- Crosshair for precise value reading
- Trackball mode for comparing multiple points
- Customizing zoom and crosshair appearance

#### Tooltips and Legend

📄 **Read:** [references/tooltip-legend.md](references/tooltip-legend.md)

Display data details on hover:
- Tooltip configuration and formatting
- Custom tooltip templates
- Shared tooltips for multiple series
- Legend positioning and customization
- Toggle series visibility from legend
- Legend click events

### Customization and Styling

#### Appearance Customization

📄 **Read:** [references/appearance-customization.md](references/appearance-customization.md)

Customize the visual design:
- Stock chart title and subtitle
- Built-in themes (Material, Bootstrap, Fluent, Tailwind, etc.)
- Chart dimensions (width, height, responsive)
- Gradient fills for series
- Last data label display
- Border, background, and margin settings
- Custom CSS styling

#### Export and Print

📄 **Read:** [references/export-print.md](references/export-print.md)

Export charts for reports and sharing:
- Export to PNG, JPEG, SVG, PDF formats
- Export configuration and customization
- Print functionality with print-specific styling
- Exporting programmatically or via UI button

### Advanced Topics

#### Events

📄 **Read:** [references/events.md](references/events.md)

Handle stock chart events exposed by `StockChartEvents`:
- `OnLoaded` for post-render initialization
- `OnPointClick` for point selection scenarios
- `AxisLabelRendering` for axis label customization
- `PeriodChanged` and `RangeChange` for time navigation updates
- `OnZooming` for zoom interaction handling
- `TooltipRendering` and `SharedTooltipRendering` for tooltip customization
- `Exporting`, `ExportCompleted`, and `OnPrintComplete` for output workflows

#### Accessibility

📄 **Read:** [references/accessibility.md](references/accessibility.md)

Ensure accessible financial charts:
- WCAG 2.0 compliance features
- WAI-ARIA attributes
- Keyboard navigation support
- Screen reader compatibility
- High contrast theme support
- Focus management best practices

## Quick Start Example

Here's a minimal stock chart with candlestick series and period selector:

```cshtml
@page "/stock-chart"
@using Syncfusion.Blazor.Charts

<SfStockChart Title="AAPL