Implementing Stock Charts

When to Use This Skill

• 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

SfStockChart

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

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

• 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

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

<SfStockChart Title="AAPL Stock Price" Height="450px">
    <StockChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
    </StockChartPrimaryXAxis>
    
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Candle" 
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
    
    <StockChartPeriods>
        <StockChartPeriod Text="1M" Interval="1" IntervalType="RangeIntervalType.Months"></StockChartPeriod>
        <StockChartPeriod Text="3M" Interval="3" IntervalType="RangeIntervalType.Months"></StockChartPeriod>
        <StockChartPeriod Text="6M" Interval="6" IntervalType="RangeIntervalType.Months"></StockChartPeriod>
        <StockChartPeriod Text="1Y" Interval="1" IntervalType="RangeIntervalType.Years"></StockChartPeriod>
        <StockChartPeriod Text="All"></StockChartPeriod>
    </StockChartPeriods>
</SfStockChart>

@code {
    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Open { get; set; }
        public double High { get; set; }
        public double Low { get; set; }
        public double Close { get; set; }
        public double Volume { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Open = 175.5, High = 180.2, Low = 174.8, Close = 179.5, Volume = 12000000 },
        new StockInfo { Date = new DateTime(2024, 02, 01), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7, Volume = 15000000 },
        new StockInfo { Date = new DateTime(2024, 03, 01), Open = 183.7, High = 190.5, Low = 182.5, Close = 188.2, Volume = 18000000 },
        // Add more data points...
    };
}

Common Use Cases

1. Stock Price Dashboard with Technical Indicators

<SfStockChart Title="Stock Analysis with SMA and RSI">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Candle"
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
    
    <StockChartIndicators>
        <StockChartIndicator Type="TechnicalIndicators.Sma" Period="14" Field="FinancialDataFields.Close">
        </StockChartIndicator>
        <StockChartIndicator Type="TechnicalIndicators.Rsi" Period="14" ShowZones="true">
        </StockChartIndicator>
    </StockChartIndicators>
</SfStockChart>

2. Multiple Series Comparison (e.g., Compare Multiple Stocks)

<SfStockChart Title="Tech Stocks Comparison">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@AppleData" Type="ChartSeriesType.Line" Name="AAPL"
                          XName="Date" YName="Close">
        </StockChartSeries>
        <StockChartSeries DataSource="@MicrosoftData" Type="ChartSeriesType.Line" Name="MSFT"
                          XName="Date" YName="Close">
        </StockChartSeries>
        <StockChartSeries DataSource="@GoogleData" Type="ChartSeriesType.Line" Name="GOOGL"
                          XName="Date" YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

3. Stock Events with Earnings and Dividends

<SfStockChart Title="AAPL with Corporate Events">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Candle"
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
    
    <StockChartEvents>
        <StockChartEvent Date="new DateTime(2024, 02, 01)" Text="Q1 Earnings" Type="@SplineType.Circle">
        </StockChartEvent>
        <StockChartEvent Date="new DateTime(2024, 03, 15)" Text="Dividend $0.24" Type="@SplineType.Square">
        </StockChartEvent>
    </StockChartEvents>
</SfStockChart>

4. Cryptocurrency Price Chart with Volume

<SfStockChart Title="Bitcoin Price and Volume">
    <StockChartRows>
        <StockChartRow Height="70%"></StockChartRow>
        <StockChartRow Height="30%"></StockChartRow>
    </StockChartRows>
    
    <StockChartAxes>
        <StockChartAxis Name="VolumeAxis" OpposedPosition="true" RowIndex="1">
        </StockChartAxis>
    </StockChartAxes>
    
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@BitcoinData" Type="ChartSeriesType.Candle"
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
        <StockChartSeries DataSource="@BitcoinData" Type="ChartSeriesType.Column" Name="Volume"
                          XName="Date" YName="Volume" YAxisName="VolumeAxis">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

5. Export Stock Chart to PDF Report

@using Syncfusion.Blazor.Charts

<button class="btn btn-primary" @onclick="ExportChart">Export to PDF</button>

<SfStockChart @ref="StockChartRef" Title="Annual Stock Performance">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Candle"
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

@code {
    SfStockChart StockChartRef;
    
    private async Task ExportChart()
    {
        await StockChartRef.ExportAsync(ExportType.PDF, "StockReport");
    }
}

Key Configuration Properties

Essential Props for Stock Charts

Title

Height

Width

Theme

EnablePeriodSelector

EnableSelector

EnableCustomRange

Official API Reference

SfStockChart

• Core properties such as

  Background

  ,

  DataSource

  ,

  SeriesType

  ,

  IndicatorType

  ,

  TrendlineType

  ,

  Theme

  ,

  Title

  ,

  Height

  , and

  Width

• Methods such as

  ExportAsync()

  ,

  PrintAsync()

  ,

  Refresh()

  , and

  UpdateStockChart()

• Child components such as

  StockChartSeriesCollection

  ,

  StockChartIndicators

  ,

  StockChartTrendlines

  ,

  StockChartPeriods

  ,

  StockChartEvents

  , and

  StockChartAxes

Series Configuration

Type

DataSource

XName

High

Low

Open

Close

YName

Fill

Period Selector Props

Text

Interval

IntervalType

Selected

Next Steps

1. Start with Getting Started for installation and basic setup
2. Choose your series type from Series Types
3. Add technical indicators from Technical Indicators
4. Implement time navigation with Period and Range Selectors
5. Customize appearance using Appearance Customization