Syncfusion Blazor Stock Charts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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:

@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>

When to use: Investment analysis dashboards, trading platforms, portfolio monitoring

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>

When to use: Portfolio comparison, sector analysis, benchmarking against indices

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>

When to use: Fundamental analysis, event-driven trading, corporate calendar visualization

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>

When to use: Cryptocurrency tracking, 24/7 market visualization, digital asset portfolios

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");
    }
}

When to use: Financial reports, investor presentations, automated reporting systems

Key Configuration Properties

Essential Props for Stock Charts

Official API Reference

📄 Read: references/api-reference.md

This page summarizes the validated SfStockChart API surface, including:

• 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

Period Selector Props

Next Steps

1. Start with [Getting Started](references/getting-started.md) 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

For questions or issues, refer to Accessibility for compliance requirements or Events for handling user interactions.

Accessibility

This guide explains how to implement accessible Stock Charts that comply with WCAG 2.2 standards and support keyboard navigation, screen readers, and assistive technologies.

Table of Contents

• Overview
• WCAG 2.2 Compliance
• WAI-ARIA Attributes
• Keyboard Navigation
• Keyboard Shortcuts Reference
• Screen Reader Support
• High Contrast Themes
• Focus Management
• Best Practices
• Testing and Validation

Overview

The Syncfusion Blazor Stock Chart component is built with accessibility in mind, providing comprehensive support for users with disabilities through keyboard navigation, screen reader compatibility, and WCAG 2.2 compliance.

Key Accessibility Features:

• Full keyboard navigation support
• WAI-ARIA attributes for screen readers
• High contrast themes for visual impairments
• Focus indicators for keyboard users
• Semantic HTML structure
• WCAG 2.2 Level AA compliance

WCAG 2.2 Compliance

The Stock Chart component adheres to WCAG 2.2 Level AA standards:

Perceivable

Text Alternatives: All chart elements have text equivalents accessible to assistive technologies.

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Apple Inc. Stock Price - Accessible Chart">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Candle" 
                          XName="Date" 
                          High="High" 
                          Low="Low" 
                          Open="Open" 
                          Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</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 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 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7 }
    };
}

Color Contrast: High contrast themes ensure minimum contrast ratios of 4.5:1 for text and 3:1 for UI components.

Adaptable: Charts are responsive and adapt to different viewport sizes and orientations.

Operable

Keyboard Accessible: All functionality is available via keyboard without requiring specific timings.

Focus Visible: Clear focus indicators show which element has keyboard focus.

Understandable

Readable: Text content is understandable with proper labels and descriptions.

Predictable: Navigation and functionality operate in predictable ways.

Robust

Compatible: Works with current and future assistive technologies including screen readers.

WAI-ARIA Attributes

The Stock Chart automatically includes appropriate ARIA attributes:

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Stock Chart with ARIA Support">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Name="AAPL Stock Price"
                          Type="ChartSeriesType.Line" 
                          XName="Date" 
                          YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

@code {
    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 179.5 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Close = 183.7 }
    };
}

ARIA Attributes Applied:

• role="img" - Identifies chart as an image
• aria-label - Provides accessible name derived from title
• aria-describedby - Links to detailed description
• aria-hidden="false" - Ensures visibility to assistive tech
• tabindex="0" - Makes chart keyboard focusable

Keyboard Navigation

The Stock Chart is fully navigable using keyboard shortcuts, allowing users to interact without a mouse.

Enable Keyboard Navigation

Keyboard navigation is enabled by default.:

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Keyboard Navigable Chart">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Candle" 
                          XName="Date" 
                          High="High" 
                          Low="Low" 
                          Open="Open" 
                          Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</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 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 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7 },
        new StockInfo { Date = new DateTime(2024, 01, 15), Open = 183.7, High = 190.5, Low = 182.5, Close = 188.2 }
    };
}

Navigation Instructions

Provide instructions for keyboard users:

@using Syncfusion.Blazor.Charts

<div class="keyboard-help">
    <h4>Keyboard Navigation</h4>
    <p>Press <kbd>Tab</kbd> to focus on the chart. Use arrow keys to navigate between data points.</p>
    <ul>
        <li><kbd>Tab</kbd> - Move focus to chart</li>
        <li><kbd>Arrow Keys</kbd> - Navigate data points</li>
        <li><kbd>Enter</kbd> - Select data point</li>
        <li><kbd>Ctrl + P</kbd> - Print chart</li>
    </ul>
</div>

<SfStockChart Title="AAPL Stock Price">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Line" 
                          XName="Date" 
                          YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

<style>
    .keyboard-help {
        background-color: #f0f0f0;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 20px;
    }
    .keyboard-help kbd {
        background-color: #333;
        color: white;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: monospace;
    }
</style>

@code {
    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 179.5 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Close = 183.7 }
    };
}

Keyboard Shortcuts Reference

Complete list of keyboard shortcuts for Stock Chart navigation:

Custom Keyboard Instructions Component

@using Syncfusion.Blazor.Charts

<div class="accessibility-panel">
    <button @onclick="ToggleInstructions" class="help-button">
        Keyboard Help
    </button>

    @if (ShowInstructions)
    {
        <div class="instructions-modal" role="dialog" aria-labelledby="instructions-title">
            <div class="instructions-content">
                <h3 id="instructions-title">Keyboard Navigation Guide</h3>
                <table class="shortcuts-table">
                    <thead>
                        <tr>
                            <th>Key</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td><kbd>Tab</kbd></td><td>Focus chart</td></tr>
                        <tr><td><kbd>Arrow Keys</kbd></td><td>Navigate data points</td></tr>
                        <tr><td><kbd>Enter</kbd></td><td>Select point</td></tr>
                        <tr><td><kbd>Ctrl + P</kbd></td><td>Print chart</td></tr>
                        <tr><td><kbd>Escape</kbd></td><td>Close dialogs</td></tr>
                    </tbody>
                </table>
                <button @onclick="ToggleInstructions" class="close-button">Close</button>
            </div>
        </div>
    }
</div>

<SfStockChart Title="Accessible Stock Chart">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Candle" 
                          XName="Date" 
                          High="High" 
                          Low="Low" 
                          Open="Open" 
                          Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

<style>
    .instructions-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
    .instructions-content {
        background: white;
        padding: 30px;
        border-radius: 8px;
        max-width: 600px;
        max-height: 80vh;
        overflow-y: auto;
    }
    .shortcuts-table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
    }
    .shortcuts-table th,
    .shortcuts-table td {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    kbd {
        background-color: #333;
        color: white;
        padding: 3px 8px;
        border-radius: 3px;
        font-family: monospace;
        font-size: 0.9em;
    }
</style>

@code {
    private bool ShowInstructions = false;

    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 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 }
    };

    private void ToggleInstructions()
    {
        ShowInstructions = !ShowInstructions;
    }
}

Screen Reader Support

The Stock Chart provides comprehensive screen reader support:

Screen Reader Announcements

@using Syncfusion.Blazor.Charts

<SfStockChart Title="AAPL Stock Analysis">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Name="Apple Inc. Stock"
                          Type="ChartSeriesType.Candle" 
                          XName="Date" 
                          High="High" 
                          Low="Low" 
                          Open="Open" 
                          Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</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 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 },
        new StockInfo { Date = new DateTime(2024, 02, 01), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7 },
        new StockInfo { Date = new DateTime(2024, 03, 01), Open = 183.7, High = 190.5, Low = 182.5, Close = 188.2 }
    };
}

Screen readers announce:

• Chart title
• Series names
• Data point values when focused
• Range changes and zoom levels
• Button labels and states

Accessible Data Table Alternative

Provide a data table as an accessible alternative:

@using Syncfusion.Blazor.Charts

<div class="chart-section">
    <SfStockChart Title="Stock Price Chart">
        <StockChartSeriesCollection>
            <StockChartSeries DataSource="@StockData" 
                              Type="ChartSeriesType.Candle" 
                              XName="Date" 
                              High="High" 
                              Low="Low" 
                              Open="Open" 
                              Close="Close">
            </StockChartSeries>
        </StockChartSeriesCollection>
    </SfStockChart>
</div>

<details class="data-table-section">
    <summary>View Data as Table</summary>
    <table class="accessible-data-table">
        <caption>Stock Price Data</caption>
        <thead>
            <tr>
                <th scope="col">Date</th>
                <th scope="col">Open</th>
                <th scope="col">High</th>
                <th scope="col">Low</th>
                <th scope="col">Close</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in StockData)
            {
                <tr>
                    <td>@item.Date.ToString("MMM dd, yyyy")</td>
                    <td>$@item.Open.ToString("F2")</td>
                    <td>$@item.High.ToString("F2")</td>
                    <td>$@item.Low.ToString("F2")</td>
                    <td>$@item.Close.ToString("F2")</td>
                </tr>
            }
        </tbody>
    </table>
</details>

<style>
    .accessible-data-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
    }
    .accessible-data-table th,
    .accessible-data-table td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ddd;
    }
    .accessible-data-table th {
        background-color: #f0f0f0;
        font-weight: bold;
    }
</style>

@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 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 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7 }
    };
}

High Contrast Themes

Enable high contrast themes for users with visual impairments:

<!-- In index.html, _Host.cshtml, or App.razor -->
<head>
    <link href="_content/Syncfusion.Blazor.Themes/highcontrast.css" rel="stylesheet" />
</head>

Implement Theme Switcher

@using Syncfusion.Blazor.Charts

<div class="theme-selector">
    <label for="theme-select">Select Theme:</label>
    <select id="theme-select" @onchange="ChangeTheme">
        <option value="bootstrap5">Bootstrap 5</option>
        <option value="material">Material</option>
        <option value="highcontrast">High Contrast</option>
    </select>
</div>

<SfStockChart Title="Theme-Aware Stock Chart">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Line" 
                          XName="Date" 
                          YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

@code {
    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 179.5 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Close = 183.7 }
    };

    private void ChangeTheme(ChangeEventArgs e)
    {
        string theme = e.Value.ToString();
        // Implement theme switching logic
        Console.WriteLine($"Switching to theme: {theme}");
    }
}

Focus Management

Manage keyboard focus for optimal user experience:

@using Syncfusion.Blazor.Charts
@using Microsoft.JSInterop

<button @onclick="FocusChart">Focus on Chart</button>

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

@code {
    private SfStockChart StockChartRef;

    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 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 }
    };

    private async Task FocusChart()
    {
        // Focus management implementation
        await Task.CompletedTask;
    }
}

Best Practices

1. Always Provide Meaningful Titles

<SfStockChart Title="Apple Inc. Stock Price Performance - January 2024">

2. Use Descriptive Series Names

<StockChartSeries Name="Apple Inc. (AAPL) Closing Price" ...>

3. Provide Alternative Text Content

Include data table or textual summary for screen reader users.

4. Ensure Sufficient Color Contrast

Use themes with minimum contrast ratios of 4.5:1.

5. Test with Multiple Screen Readers

• JAWS (Windows)
• NVDA (Windows)
• VoiceOver (macOS/iOS)
• TalkBack (Android)

6. Support Keyboard-Only Navigation

Ensure all interactive elements are reachable via keyboard.

7. Provide Skip Links

<a href="#main-content" class="skip-link">Skip to main content</a>
<div id="main-content">
    <SfStockChart ...>
    </SfStockChart>
</div>

Testing and Validation

Automated Testing Tools

• axe DevTools - Browser extension for accessibility testing
• WAVE - Web accessibility evaluation tool
• Lighthouse - Chrome DevTools accessibility audit

Manual Testing Checklist

• [ ] Navigate entire chart using only keyboard
• [ ] Test with screen reader (NVDA, JAWS, VoiceOver)
• [ ] Verify high contrast theme readability
• [ ] Check color contrast ratios
• [ ] Test focus indicators visibility
• [ ] Validate ARIA attributes
• [ ] Test with browser zoom at 200%
• [ ] Verify responsive behavior
• [ ] Test with Windows High Contrast mode
• [ ] Validate with keyboard shortcuts

Example Test Scenario

@page "/accessibility-test"
@using Syncfusion.Blazor.Charts

<h1>Accessibility Test Page</h1>

<div class="test-instructions">
    <h2>Test Instructions:</h2>
    <ol>
        <li>Press Tab to focus on the chart</li>
        <li>Use Arrow keys to navigate data points</li>
        <li>Press Enter to select a point</li>
        <li>Verify screen reader announces values</li>
        <li>Test with high contrast theme</li>
    </ol>
</div>

<SfStockChart Title="Accessibility Test Chart">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Name="Test Stock Data"
                          Type="ChartSeriesType.Candle" 
                          XName="Date" 
                          High="High" 
                          Low="Low" 
                          Open="Open" 
                          Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</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 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 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7 }
    };
}

API Reference

Table of Contents

• Overview
• SfStockChart
• Key Properties
• Methods
• Child Components
• Events
• Common Enums

Overview

This reference summarizes the validated public API for Syncfusion Blazor Stock Chart based on the official Syncfusion.Blazor.Charts documentation.

SfStockChart

SfStockChart is the root component used to render financial charts for stock and market data.

Main capabilities

• Financial series visualization with ChartSeriesType
• Period selector and range selector support
• Technical indicators and trend lines
• Stock events and annotations
• Zooming, panning, crosshair, tooltip, and export features

Key Properties

Methods

Child Components

Events

The StockChartEvents component exposes these validated event callbacks:

Common Enums

Appearance Customization

This guide covers appearance customization options for Stock Charts and references relevant properties/components such as Title/StockChartTitleStyle, Width/Height, Background/StockChartChartBorder, StockChartSeriesBorder, Fill/BullFillColor/BearFillColor, SVG gradient Fill via url(#id), and Syncfusion theme stylesheet links.

Table of Contents

• Overview
• Chart Title
• Title Customization
• Themes
• Available Themes
• Chart Dimensions
• Responsive Charts
• Gradient Fills
• Last Data Label
• Borders and Backgrounds
• Custom CSS Styling
• Color Customization
• Troubleshooting

Overview

The Stock Chart component provides extensive appearance customization. Key configurable properties and components include Title, StockChartTitleStyle, Width, Height, Background, StockChartChartBorder, StockChartSeriesBorder, Fill, BullFillColor, BearFillColor, and theme styles applied via the Syncfusion theme stylesheet.

Key Customization Areas:

• Title and subtitle styling
• 15+ built-in themes with dark mode variants
• Flexible dimensions and responsive layouts
• Gradient fills for series
• Border and background customization
• CSS-based styling

Chart Title

Add a title to provide context for your chart using the Title property and StockChartTitleStyle for styling:

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Apple Inc. Stock Price - 2024">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Candle" 
                          XName="Date" 
                          High="High" 
                          Low="Low" 
                          Open="Open" 
                          Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</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 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 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7 }
    };
}

Title Customization

Customize title appearance using StockChartTitleStyle and its properties (FontFamily, Size, FontWeight, Color, TextAlignment, FontStyle, TextOverflow):

@using Syncfusion.Blazor.Charts

<SfStockChart Title="NASDAQ Technology Stocks">
    <StockChartTitleStyle FontFamily="Arial" 
                          Size="24px" 
                          FontWeight="Bold" 
                          Color="#0066cc" 
                          TextAlignment="Alignment.Center">
    </StockChartTitleStyle>
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Line" 
                          XName="Date" 
                          YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

@code {
    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 179.5 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Close = 183.7 }
    };
}

Title Style Properties:

• FontFamily - Font family name (e.g., "Arial", "Segoe UI")
• Size - Font size (e.g., "16px", "1.2em")
• FontWeight - Font weight ("Normal", "Bold", "600")
• Color - Title color (hex, rgb, or color name)
• TextAlignment - Alignment (Alignment.Near, Center, Far)
• FontStyle - Style ("Normal", "Italic", "Oblique")
• TextOverflow - Overflow behavior ("Wrap", "Trim", "None")

Themes

Apply a theme by referencing the Syncfusion theme stylesheet (themes are applied via CSS links rather than a chart property):

<!-- In index.html, _Host.cshtml, or App.razor -->
<head>
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

Themes provide consistent styling across all chart elements including colors, fonts, and spacing.

Available Themes

Light Themes

Bootstrap 5 (Default)

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

Clean, modern design following Bootstrap 5 guidelines.

Material Design

<link href="_content/Syncfusion.Blazor.Themes/material.css" rel="stylesheet" />

Google's Material Design with vibrant colors and shadows.

Material 3

<link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />

Latest Material Design iteration with enhanced typography.

Fluent

<link href="_content/Syncfusion.Blazor.Themes/fluent.css" rel="stylesheet" />

Microsoft Fluent Design System for modern Windows apps.

Tailwind CSS

<link href="_content/Syncfusion.Blazor.Themes/tailwind.css" rel="stylesheet" />

Utility-first design matching Tailwind CSS framework.

Bootstrap 4

<link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />

Classic Bootstrap 4 styling.

Office Fabric

<link href="_content/Syncfusion.Blazor.Themes/fabric.css" rel="stylesheet" />

Microsoft Office design language.

High Contrast

<link href="_content/Syncfusion.Blazor.Themes/highcontrast.css" rel="stylesheet" />

Maximum contrast for accessibility compliance.

Dark Themes

Add -dark suffix to any theme name:

Bootstrap 5 Dark

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5-dark.css" rel="stylesheet" />

Material Dark

<link href="_content/Syncfusion.Blazor.Themes/material-dark.css" rel="stylesheet" />

Material 3 Dark

<link href="_content/Syncfusion.Blazor.Themes/material3-dark.css" rel="stylesheet" />

Fluent Dark

<link href="_content/Syncfusion.Blazor.Themes/fluent-dark.css" rel="stylesheet" />

Tailwind Dark

<link href="_content/Syncfusion.Blazor.Themes/tailwind-dark.css" rel="stylesheet" />

Fabric Dark

<link href="_content/Syncfusion.Blazor.Themes/fabric-dark.css" rel="stylesheet" />

Theme Example

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

<!-- Material Dark theme applied -->
<SfStockChart Title="Stock Price - Dark Theme">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Candle" 
                          XName="Date" 
                          High="High" 
                          Low="Low" 
                          Open="Open" 
                          Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</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 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 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7 }
    };
}

Chart Dimensions

Fixed Dimensions

Set explicit Width and Height on the SfStockChart component:

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Fixed Size Chart" Width="800px" Height="450px">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Line" 
                          XName="Date" 
                          YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</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 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 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7 }
    };
}

Percentage-Based Dimensions

Use Width='100%' and Height='100%' on SfStockChart and container CSS for responsive layouts:

@using Syncfusion.Blazor.Charts

<div style="width: 100%; height: 600px;">
    <SfStockChart Title="Responsive Chart" Width="100%" Height="100%">
        <StockChartSeriesCollection>
            <StockChartSeries DataSource="@StockData" 
                              Type="ChartSeriesType.Candle" 
                              XName="Date" 
                              High="High" 
                              Low="Low" 
                              Open="Open" 
                              Close="Close">
            </StockChartSeries>
        </StockChartSeriesCollection>
    </SfStockChart>
</div>

@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 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 }
    };
}

Responsive Charts

Create responsive charts that adapt to container size:

@using Syncfusion.Blazor.Charts

<div class="chart-container">
    <SfStockChart Title="Responsive Stock Chart" Width="100%" Height="100%">
        <StockChartSeriesCollection>
            <StockChartSeries DataSource="@StockData" 
                              Type="ChartSeriesType.Line" 
                              XName="Date" 
                              YName="Close">
            </StockChartSeries>
        </StockChartSeriesCollection>
    </SfStockChart>
</div>

<style>
    .chart-container {
        width: 100%;
        height: 500px;
        padding: 20px;
    }

    @@media (max-width: 768px) {
        .chart-container {
            height: 350px;
            padding: 10px;
        }
    }
</style>

@code {
    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 179.5 },
        new StockInfo { Date = new DateTime(2024, 02, 01), Close = 183.7 }
    };
}

Gradient Fills

Apply gradient fills to series via the Fill property using an SVG gradient reference (e.g., Fill="url(#gradient1)"):

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Stock Chart with Gradient">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Area" 
                          XName="Date" 
                          YName="Close"
                          Fill="url(#gradient1)">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

<svg style="height: 0">
    <defs>
        <linearGradient id="gradient1" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" style="stop-color:#4CAF50;stop-opacity:0.8" />
            <stop offset="100%" style="stop-color:#4CAF50;stop-opacity:0.1" />
        </linearGradient>
    </defs>
</svg>

@code {
    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 175.5 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Close = 179.5 },
        new StockInfo { Date = new DateTime(2024, 01, 15), Close = 183.7 },
        new StockInfo { Date = new DateTime(2024, 01, 22), Close = 188.2 }
    };
}

Multiple Gradient Series

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Multi-Series Gradient Chart">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@AAPLData" 
                          Name="AAPL"
                          Type="ChartSeriesType.Area" 
                          XName="Date" 
                          YName="Close"
                          Fill="url(#gradient-aapl)">
        </StockChartSeries>
        <StockChartSeries DataSource="@MSFTData" 
                          Name="MSFT"
                          Type="ChartSeriesType.Area" 
                          XName="Date" 
                          YName="Close"
                          Fill="url(#gradient-msft)">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

<svg style="height: 0">
    <defs>
        <linearGradient id="gradient-aapl" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" style="stop-color:#2196F3;stop-opacity:0.7" />
            <stop offset="100%" style="stop-color:#2196F3;stop-opacity:0" />
        </linearGradient>
        <linearGradient id="gradient-msft" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" style="stop-color:#FF5722;stop-opacity:0.7" />
            <stop offset="100%" style="stop-color:#FF5722;stop-opacity:0" />
        </linearGradient>
    </defs>
</svg>

@code {
    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockInfo> AAPLData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 179.5 },
        new StockInfo { Date = new DateTime(2024, 02, 01), Close = 183.7 }
    };

    public List<StockInfo> MSFTData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 370.2 },
        new StockInfo { Date = new DateTime(2024, 02, 01), Close = 375.8 }
    };
}

Last Data Label

Use StockChartLastDataLabel and its properties (ShowLabel, Background, LineColor, LineWidth, DashArray, Rx, Ry) along with StockChartLastDataLabelBorder and StockChartLastDataLabelFont to display the most recent data point value:

@using Syncfusion.Blazor.Charts

<SfStockChart Title="AAPL Stock Price">
    <StockChartPrimaryYAxis Interval="10"></StockChartPrimaryYAxis>
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Hilo" Width="3" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume">
            <StockChartLastDataLabel ShowLabel="true" Background="#748574" LineColor="blue" LineWidth="2" DashArray="5" Rx="10" Ry="10">
                <StockChartLastDataLabelBorder Color="red" Width="2"></StockChartLastDataLabelBorder>
                <StockChartLastDataLabelFont Color="#F0E68C" FontFamily="Arial" FontStyle="Italic" FontWeight="bold" Size="12px"></StockChartLastDataLabelFont>
            </StockChartLastDataLabel>
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

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

    public List<ChartData> StockDetails = new List<ChartData>
    {
        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High =  85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 88.0714, Low = 83.0743, Close = 80.1414, Volume = 480059584 }
    };
}

Borders and Backgrounds

Use Background, StockChartChartBorder, StockChartMargin, and StockChartSeriesBorder to customize chart borders, backgrounds, and spacing:

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Styled Stock Chart" 
              Background="#f8f9fa">
    <StockChartChartBorder Width="2" Color="#0066cc" />
    <StockChartMargin Left="40" Right="40" Top="40" Bottom="40"></StockChartMargin>
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Candle" 
                          XName="Date" 
                          High="High" 
                          Low="Low" 
                          Open="Open" 
                          Close="Close">
            <StockChartSeriesBorder Width="1"></StockChartSeriesBorder>
        </StockChartSeries>
    </StockChartSeriesCollection>
</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 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 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7 }
    };
}

Custom CSS Styling

Apply custom CSS by wrapping the chart in a container, using CssClass (when available), or targeting Syncfusion classes; chart properties such as Width, Height, and Fill remain applicable.

@using Syncfusion.Blazor.Charts

<div class="custom-stock-chart">
    <SfStockChart Title="Custom Styled Chart" Width="100%" Height="600px">
        <StockChartSeriesCollection>
            <StockChartSeries DataSource="@StockData" 
                              Type="ChartSeriesType.Line" 
                              XName="Date" 
                              YName="Close"
                              Width="3"
                              Fill="#0066cc">
            </StockChartSeries>
        </StockChartSeriesCollection>
    </SfStockChart>
</div>

<style>
    .custom-stock-chart {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .custom-stock-chart .e-stockchart {
        border-radius: 8px;
        overflow: hidden;
    }

    .custom-stock-chart .e-chart-title {
        color: white !important;
        font-size: 24px !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
</style>

@code {
    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 175.5 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Close = 179.5 },
        new StockInfo { Date = new DateTime(2024, 01, 15), Close = 183.7 }
    };
}

Color Customization

Customize series colors using BearFillColor and BullFillColor for Candle series or Fill for other series types:

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Custom Color Scheme">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Candle" 
                          XName="Date" 
                          High="High" 
                          Low="Low" 
                          Open="Open" 
                          Close="Close"
                          BearFillColor="#FF6B6B"
                          BullFillColor="#4ECDC4">
        </StockChartSeries>
    </StockChartSeriesCollection>
</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 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 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7 },
        new StockInfo { Date = new DateTime(2024, 01, 15), Open = 183.7, High = 190.5, Low = 182.5, Close = 188.2 }
    };
}

Troubleshooting

Theme Not Applied

Problem: Chart doesn't reflect the selected theme.

Solution: Ensure the theme stylesheet is properly referenced and loaded before the Syncfusion script:

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>

Chart Not Responsive

Problem: Chart doesn't resize with window or container.

Solution:

<!-- Use percentage-based dimensions -->
<div style="width: 100%; height: 500px;">
    <SfStockChart Width="100%" Height="100%">
        <!-- ... -->
    </SfStockChart>
</div>

Gradient Not Visible

Problem: Gradient fill doesn't appear on series.

Solution: Ensure the SVG gradient definition is in the same component and the ID matches:

<StockChartSeries Fill="url(#gradient1)">
<!-- ... -->
<svg style="height: 0">
    <defs>
        <linearGradient id="gradient1" x1="0" x2="0" y1="0" y2="1">
            <!-- stops -->
        </linearGradient>
    </defs>
</svg>

Custom Colors Not Working for Candles

Problem: BearFillColor and BullFillColor don't apply.

Solution: Ensure you're using Candle series type (not HollowCandle):

<StockChartSeries Type="ChartSeriesType.Candle" 
                  BearFillColor="#FF0000"
                  BullFillColor="#00FF00">

Title Overlaps Chart

Problem: Title overlaps with chart content.

Solution: Adjust margins:

<SfStockChart Title="My Chart">
    <StockChartMargin Top="60"></StockChartMargin>
    <!-- ... -->
</SfStockChart>

CSS Styles Not Applying

Problem: Custom CSS classes don't affect chart elements.

Solution: Use !important or more specific selectors:

.custom-stock-chart .e-chart-title {
    color: red !important;
}

Axes Configuration

Table of Contents

• Overview
• Axis Types
• DateTime Axis
• DateTimeCategory Axis
• Logarithmic Axis
• Axis Customization
• Axis Titles
• Tick Lines
• Grid Lines
• Multiple Axes
• Inversed Axis
• Opposed Position
• Common Scenarios

Overview

Stock Charts support multiple axis types and extensive customization options. Proper axis configuration is critical for accurate financial data visualization. The X-axis typically represents time, while the Y-axis shows price or volume.

Key Concepts:

• Primary Axes: Default X and Y axes configured via StockChartPrimaryXAxis and StockChartPrimaryYAxis
• Secondary Axes: Additional axes for overlaying different metrics (e.g., volume with price)
• Axis Types: DateTime (default), DateTimeCategory (business days), Logarithmic
• Customization: Titles, labels, tick lines, grid lines, ranges, formatting

Axis Types

DateTime Axis

The standard time-based axis for continuous date/time data. This is the default and most common axis type for stock charts. Set the ValueType property to Syncfusion.Blazor.Charts.ValueType.DateTime on the StockChartPrimaryXAxis component to use DateTime axis. Use LabelFormat property to customize the date/time display format.

When to Use:

• Continuous time series data
• Intraday, daily, weekly, monthly, yearly charts
• When weekends/holidays should appear in the timeline

Implementation:

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Stock Price - Continuous Timeline">
    <StockChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
    </StockChartPrimaryXAxis>
    
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Line" 
                          XName="Date" 
                          YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

@code {
    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 175.5 },
        new StockInfo { Date = new DateTime(2024, 01, 02), Close = 176.8 },
        new StockInfo { Date = new DateTime(2024, 01, 03), Close = 178.2 },
        new StockInfo { Date = new DateTime(2024, 01, 04), Close = 177.5 },
        new StockInfo { Date = new DateTime(2024, 01, 05), Close = 179.1 }
    };
}

Date Formatting:

<StockChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"
                        LabelFormat="MMM dd, yyyy">
</StockChartPrimaryXAxis>

Common formats:

• "MMM dd" → Jan 15
• "MM/dd/yyyy" → 01/15/2024
• "yyyy-MM-dd" → 2024-01-15
• "MMM yyyy" → Jan 2024

DateTimeCategory Axis

Displays only business days, automatically skipping weekends and gaps in data. Perfect for stock market data where trading doesn't occur on weekends/holidays. Set the ValueType property to Syncfusion.Blazor.Charts.ValueType.DateTimeCategory on the StockChartPrimaryXAxis component to enable business day axis. The axis automatically handles weekend and holiday gaps without displaying empty spaces.

When to Use:

• Stock market data (trading days only)
• Business day analysis
• When gaps in data should not appear as empty space
• Comparing daily trading patterns

Implementation:

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Trading Days Only">
    <StockChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory">
        <StockChartAxisCrosshairTooltip Enable="true"></StockChartAxisCrosshairTooltip>
    </StockChartPrimaryXAxis>
    
    <StockChartCrosshairSettings Enable="true"></StockChartCrosshairSettings>
    
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@TradingDayData" 
                          Type="ChartSeriesType.Line" 
                          XName="Date" 
                          YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

@code {
    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }
    public List<StockInfo> TradingDayData = new List<StockInfo>
    {
        // Note: Weekends automatically skipped
        new StockInfo { Date = new DateTime(2024, 01, 08), Close = 175.5 }, // Monday
        new StockInfo { Date = new DateTime(2024, 01, 09), Close = 176.8 }, // Tuesday
        new StockInfo { Date = new DateTime(2024, 01, 10), Close = 178.2 }, // Wednesday
        // Thursday/Friday data...
        new StockInfo { Date = new DateTime(2024, 01, 15), Close = 181.3 }, // Next Monday - no weekend gap shown
    };
}

Benefits:

• Cleaner visualization without non-trading day gaps
• Equal spacing between trading days
• Better for pattern recognition
• More accurate for business day calculations

Logarithmic Axis

Uses logarithmic scale for Y-axis, useful when data spans multiple orders of magnitude or when showing percentage changes. Set the ValueType property to Syncfusion.Blazor.Charts.ValueType.Logarithmic on the StockChartPrimaryYAxis component. Use the LogBase property to specify the logarithm base (default is 10). All data values must be positive since logarithms of zero or negative numbers are undefined.

When to Use:

• Long-term charts with significant price changes
• Comparing stocks with vastly different prices
• Highlighting percentage changes over absolute changes
• Volatility analysis

Implementation:

@using Syncfusion.Blazor.Charts

<SfStockChart>
    <StockChartPrimaryXAxis ValueType="@Syncfusion.Blazor.Charts.ValueType.DateTime">
    </StockChartPrimaryXAxis>
    <StockChartPrimaryYAxis ValueType="@Syncfusion.Blazor.Charts.ValueType.Logarithmic">
    </StockChartPrimaryYAxis>
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Area" XName="Date" YName="Y">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

@code {
    public class ChartData
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }
    public List<ChartData> StockDetails = new List<ChartData>
    {
        new ChartData { Date = new DateTime(2012, 04, 02), Close = 100 },
        new ChartData { Date = new DateTime(2012, 04, 09), Close = 10 },
        new ChartData { Date = new DateTime(2012, 04, 16), Close = 500 },
        new ChartData { Date = new DateTime(2012, 04, 23), Close = 80 },
        new ChartData { Date = new DateTime(2012, 04, 30), Close = 200 },
        new ChartData { Date = new DateTime(2012, 05, 07), Close = 600 },
        new ChartData { Date = new DateTime(2012, 05, 14), Close = 50 },
        new ChartData { Date = new DateTime(2012, 05, 21), Close = 700 },
        new ChartData { Date = new DateTime(2012, 05, 28), Close = 90 }
   };
}

Log Base Options:

• LogBase="10" - Base-10 logarithm (default, most common)
• LogBase="2" - Base-2 logarithm
• LogBase="Math.E" - Natural logarithm (ln)

Axis Customization

Tick Lines

Customize the small lines marking values on axes using the StockChartAxisMajorTickLines and StockChartAxisMinorTickLines components. Use StockChartAxisMajorTickLines for primary tick marks and StockChartAxisMinorTickLines for secondary tick marks on both StockChartPrimaryXAxis and StockChartPrimaryYAxis.

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Custom Tick Lines">
    <StockChartPrimaryXAxis>
        <StockChartAxisMajorTickLines Width="3" Color="#3498db"></StockChartAxisMajorTickLines>
        <StockChartAxisMinorTickLines Width="1" Color="#95a5a6"></StockChartAxisMinorTickLines>
    </StockChartPrimaryXAxis>
    
    <StockChartPrimaryYAxis>
        <StockChartAxisMajorTickLines Width="3" Color="#e74c3c"></StockChartAxisMajorTickLines>
        <StockChartAxisMinorTickLines Width="0"></StockChartAxisMinorTickLines> <!-- Hide minor ticks -->
    </StockChartPrimaryYAxis>
    
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Line"
                          XName="Date" YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

@code {
    public class ChartData
    {
        public DateTime Date { get; set; }
        public Double Close { get; set; }
    }
    public List<ChartData> StockData = new List<ChartData>
    {
        new ChartData { Date = new DateTime(2012, 04, 02), Close = 100 },
        new ChartData { Date = new DateTime(2012, 04, 09), Close = 10 },
        new ChartData { Date = new DateTime(2012, 04, 16), Close = 500 },
        new ChartData { Date = new DateTime(2012, 04, 23), Close = 80 },
        new ChartData { Date = new DateTime(2012, 04, 30), Close = 200 },
        new ChartData { Date = new DateTime(2012, 05, 07), Close = 600 },
        new ChartData { Date = new DateTime(2012, 05, 14), Close = 50 },
        new ChartData { Date = new DateTime(2012, 05, 21), Close = 700 },
        new ChartData { Date = new DateTime(2012, 05, 28), Close = 90 }
   };
}

Properties:

• Width - Thickness of tick line (set to 0 to hide)
• Color - Tick line color (hex or named colors)
• Height - Length of tick line

Grid Lines

Customize the lines that extend from tick marks across the chart using the StockChartAxisMajorGridLines and StockChartAxisMinorGridLines components. Apply these to both StockChartPrimaryXAxis and StockChartPrimaryYAxis. The DashArray property creates dashed patterns (e.g., "5,5" for dashed lines, "0" for solid).

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Custom Grid Lines">
    <StockChartPrimaryXAxis>
        <StockChartAxisMajorGridLines Width="2" Color="#ecf0f1" DashArray="5,5">
        </StockChartAxisMajorGridLines>
        <StockChartAxisMinorGridLines Width="0"></StockChartAxisMinorGridLines>
    </StockChartPrimaryXAxis>
    
    <StockChartPrimaryYAxis>
        <StockChartAxisMajorGridLines Width="2" Color="#bdc3c7">
        </StockChartAxisMajorGridLines>
        <StockChartAxisMinorGridLines Width="0"></StockChartAxisMinorGridLines>
    </StockChartPrimaryYAxis>
    
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Candle"
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

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

    public List<StockChartData> StockDetails = new List<StockChartData>
    {
        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
    };
}

Properties:

• Width - Line thickness (set to 0 to hide the grid lines)
• Color - Grid line color (hex or named colors)
• DashArray - Pattern for dashed lines (e.g., "5,5" for dashed, "0" for solid)

Multiple Axes

Add secondary axes for displaying related but differently-scaled metrics (e.g., price + volume). Use the StockChartRows component to divide the chart vertically, then create additional axes using the StockChartAxis component within StockChartAxes. Set the Name property to identify the axis, use RowIndex to specify its position, and link series to the axis using the YAxisName property. The OpposedPosition property moves the axis to the opposite side.

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Price and Volume">
    <StockChartRows>
        <StockChartRow Height="70%"></StockChartRow>
        <StockChartRow Height="30%"></StockChartRow>
    </StockChartRows>
    
    <StockChartAxes>
        <StockChartAxis Name="VolumeAxis" OpposedPosition="true" RowIndex="1">
            <StockChartAxisMajorGridLines Width="0"></StockChartAxisMajorGridLines>
        </StockChartAxis>
    </StockChartAxes>
    
    <StockChartSeriesCollection>
        <!-- Price series on primary Y-axis -->
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Candle" 
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close"
                          Name="AAPL Price">
        </StockChartSeries>
        
        <!-- Volume series on secondary Y-axis -->
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Column" 
                          XName="Date" YName="Volume"
                          YAxisName="VolumeAxis"
                          Name="Volume">
        </StockChartSeries>
    </StockChartSeriesCollection>
</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 long 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, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7, Volume = 15000000 }
    };
}

Key Points:

• Use StockChartRows with Height property to divide chart vertically
• Use StockChartAxis with Name property to create secondary axes
• Assign RowIndex property to position axis in specific row
• Link series to axis using YAxisName property on StockChartSeries
• Use OpposedPosition property to move axis to opposite side
• Each axis can have independent scaling and formatting

Inversed Axis

Flip axis direction (useful for certain analysis patterns). Set the IsInversed property to true on either StockChartPrimaryXAxis or StockChartPrimaryYAxis to reverse the axis direction.

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Inversed Time Axis">
    <StockChartPrimaryXAxis IsInversed="true">
    </StockChartPrimaryXAxis>
    
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Line"
                          XName="Date" YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

@code {
    public class ChartData
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }
    public List<ChartData> StockData = new List<ChartData>
    {
        new ChartData { Date = new DateTime(2012, 04, 02), Close = 100 },
        new ChartData { Date = new DateTime(2012, 04, 09), Close = 10 },
        new ChartData { Date = new DateTime(2012, 04, 16), Close = 500 },
        new ChartData { Date = new DateTime(2012, 04, 23), Close = 80 },
        new ChartData { Date = new DateTime(2012, 04, 30), Close = 200 },
        new ChartData { Date = new DateTime(2012, 05, 07), Close = 600 },
        new ChartData { Date = new DateTime(2012, 05, 14), Close = 50 },
        new ChartData { Date = new DateTime(2012, 05, 21), Close = 700 },
        new ChartData { Date = new DateTime(2012, 05, 28), Close = 90 }
    };
}

When to Use:

• Reading right-to-left layouts
• Specific analysis patterns
• Custom visualization requirements

Property:

• IsInversed - Set to true to reverse axis direction (boolean)

Opposed Position

Move axis to opposite side of chart. Set the OpposedPosition property to true on StockChartPrimaryXAxis or StockChartPrimaryYAxis to move the axis to the opposite side. This is commonly used to place the Y-axis on the right side or X-axis on the top.

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Y-Axis on Right Side">
    <StockChartPrimaryYAxis OpposedPosition="true">
    </StockChartPrimaryYAxis>
    
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Candle"
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</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 long 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, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7, Volume = 15000000 }
    };
}

Typical Usage:

• Y-axis on right (common in financial applications)
• X-axis on top
• Better alignment with other UI elements

Property:

• OpposedPosition - Set to true to move axis to opposite side (boolean)

Common Scenarios

Scenario 1: Basic Price Chart

This scenario demonstrates a basic stock price chart using the DateTimeCategory axis type for trading days only. The StockChartPrimaryXAxis is configured with the ValueType property set to show only business days.

@using Syncfusion.Blazor.Charts

<SfStockChart Title="AAPL - Daily Prices">
    <StockChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory">
    </StockChartPrimaryXAxis>
    
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Candle"
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</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 long 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, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7, Volume = 15000000 }
    };
}

Scenario 2: Price and Volume Split View

This scenario creates a split view displaying price and volume separately. The StockChartRows with Height properties divides the chart into two sections. A secondary axis named "VolumeAxis" is created using StockChartAxis with RowIndex="1" to position it in the lower section. The volume series links to this secondary axis using the YAxisName property.

@using Syncfusion.Blazor.Charts

<SfStockChart Title="AAPL - Price and Volume">
    <StockChartRows>
        <StockChartRow Height="75%"></StockChartRow>
        <StockChartRow Height="25%"></StockChartRow>
    </StockChartRows>
    
    <StockChartAxes>
        <StockChartAxis Name="VolumeAxis" RowIndex="1" OpposedPosition="true">
        </StockChartAxis>
    </StockChartAxes>
    
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Candle"
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Column"
                          XName="Date" YName="Volume" YAxisName="VolumeAxis">
        </StockChartSeries>
    </StockChartSeriesCollection>
</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 long 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, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7, Volume = 15000000 }
    };
}

Scenario 3: Comparing Multiple Stocks

This scenario compares multiple stocks on the same chart. The StockChartPrimaryXAxis uses DateTime axis type for continuous time series data. Multiple series are defined for different stocks (AAPL, MSFT, GOOGL) using the StockChartSeriesCollection with distinct Name and Fill properties for identification.

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Tech Stocks Comparison">
    <StockChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
    </StockChartPrimaryXAxis>
    
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@AaplData" Type="ChartSeriesType.Line" Name="AAPL"
                          XName="Date" YName="Close" Fill="#3498db">
        </StockChartSeries>
        <StockChartSeries DataSource="@MsftData" Type="ChartSeriesType.Line" Name="MSFT"
                          XName="Date" YName="Close" Fill="#e74c3c">
        </StockChartSeries>
        <StockChartSeries DataSource="@GooglData" Type="ChartSeriesType.Line" Name="GOOGL"
                          XName="Date" YName="Close" Fill="#2ecc71">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

@code {
    public class StockData
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockData> AaplData = new()
    {
        new StockData { Date = new DateTime(2024, 01, 01), Close = 180 },
        new StockData { Date = new DateTime(2024, 01, 02), Close = 182 },
        new StockData { Date = new DateTime(2024, 01, 03), Close = 185 },
        new StockData { Date = new DateTime(2024, 01, 04), Close = 183 },
        new StockData { Date = new DateTime(2024, 01, 05), Close = 187 }
    };

    public List<StockData> MsftData = new()
    {
        new StockData { Date = new DateTime(2024, 01, 01), Close = 368 },
        new StockData { Date = new DateTime(2024, 01, 02), Close = 371 },
        new StockData { Date = new DateTime(2024, 01, 03), Close = 374 },
        new StockData { Date = new DateTime(2024, 01, 04), Close = 372 },
        new StockData { Date = new DateTime(2024, 01, 05), Close = 376 }
    };

    public List<StockData> GooglData = new()
    {
        new StockData { Date = new DateTime(2024, 01, 01), Close = 140 },
        new StockData { Date = new DateTime(2024, 01, 02), Close = 141 },
        new StockData { Date = new DateTime(2024, 01, 03), Close = 143 },
        new StockData { Date = new DateTime(2024, 01, 04), Close = 142 },
        new StockData { Date = new DateTime(2024, 01, 05), Close = 145 }
    };
}

Common Issues

Issue: Axis labels overlapping

Solutions: 1. Adjust LabelFormat property to shorter format (e.g., "MMM dd" instead of "MMM dd, yyyy") 2. Use StockChartAxisLabelStyle with Angle property to rotate labels: <StockChartAxisLabelStyle Angle="-45"></StockChartAxisLabelStyle> 3. Increase chart width using Width property on SfStockChart 4. Use Interval property on axis to skip labels

Issue: DateTimeCategory not skipping weekends

Solutions: 1. Verify ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory" on StockChartPrimaryXAxis 2. Ensure data only contains trading days 3. Check DateTime values are correctly formatted

Issue: Logarithmic axis showing incorrect scale

Solutions: 1. Ensure all Y values are positive (log of negative/zero is undefined) 2. Check LogBase property setting on StockChartPrimaryYAxis 3. Verify data range isn't too narrow for logarithmic display

Events

This guide explains how to handle Stock Chart events for user interactions, lifecycle management, and dynamic chart updates.

Table of Contents

• Overview
• Lifecycle Events
• Interaction Events
• Interaction Notes
• Range Change Event
• Event Handler Patterns
• Common Issues

Overview

The Stock Chart component provides comprehensive event handling for chart lifecycle, data selection, zooming, tooltips, exporting, and printing.

Key Event Categories:

• Lifecycle Events - OnLoaded
• Interaction Events - OnPointClick, SharedTooltipRendering, TooltipRendering
• Axis and Range Events - AxisLabelRendering, PeriodChanged, RangeChange, OnZooming
• Output Events - Exporting, ExportCompleted, OnPrintComplete

Lifecycle Events

OnLoaded Event

In the OnLoaded event, the OnLoaded property will be used to trigger the event callback when the chart completes rendering:

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Stock Chart with OnLoaded Event">
    <StockChartEvents OnLoaded="ChartLoadedHandler"></StockChartEvents>
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Line" 
                          XName="Date" 
                          YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

<div>Status: @LoadStatus</div>

@code {
    private string LoadStatus = "Loading...";

    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 179.5 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Close = 183.7 },
        new StockInfo { Date = new DateTime(2024, 01, 15), Close = 188.2 }
    };

    private void ChartLoadedHandler(StockChartEventArgs args)
    {
        LoadStatus = $"Chart loaded successfully at {DateTime.Now:HH:mm:ss}";
        Console.WriteLine("Stock Chart rendering complete");
    }
}

Use Cases:

• Perform actions after chart initialization
• Log analytics when chart renders
• Trigger additional data loading
• Update UI components based on chart state

Exporting Event

In the Exporting event, the Exporting property will be used to trigger the event callback when the export process starts:

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Stock Chart with Exporting Event">
    <StockChartEvents Exporting="ChartExportingHandler"></StockChartEvents>
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Candle" 
                          XName="Date" 
                          High="High" 
                          Low="Low" 
                          Open="Open" 
                          Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</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 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 }
    };

    private void ChartExportingHandler(ChartExportEventArgs args)
    {
        Console.WriteLine("Export started");
        // Modify export properties before the file is generated
    }
}

Interaction Events

OnPointClick Event

In the OnPointClick event, the OnPointClick property will be used along with StockChartPointEventArgs containing the Point property to access data when a data point is clicked:

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Click on Data Points">
    <StockChartEvents OnPointClick="PointClickHandler"></StockChartEvents>
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Candle" 
                          XName="Date" 
                          High="High" 
                          Low="Low" 
                          Open="Open" 
                          Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

<div style="margin-top: 20px;">
    <h4>Selected Point Details:</h4>
    <p><strong>Date:</strong> @SelectedDate</p>
    <p><strong>Open:</strong> $@SelectedOpen</p>
    <p><strong>Close:</strong> $@SelectedClose</p>
    <p><strong>High:</strong> $@SelectedHigh</p>
    <p><strong>Low:</strong> $@SelectedLow</p>
</div>

@code {
    private string SelectedDate = "None";
    private string SelectedOpen = "0.00";
    private string SelectedClose = "0.00";
    private string SelectedHigh = "0.00";
    private string SelectedLow = "0.00";

    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 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 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7 },
        new StockInfo { Date = new DateTime(2024, 01, 15), Open = 183.7, High = 190.5, Low = 182.5, Close = 188.2 }
    };

    private void PointClickHandler(StockChartPointEventArgs args)
    {
        var point = args.Point;
        SelectedDate = point.X.ToString();
        SelectedOpen = point.Open.ToString("F2");
        SelectedClose = point.Close.ToString("F2");
        SelectedHigh = point.High.ToString("F2");
        SelectedLow = point.Low.ToString("F2");
    }
}

SharedTooltipRendering Event

In the SharedTooltipRendering event, the SharedTooltipRendering property will be used along with SharedTooltipRenderEventArgs containing the Point property before the shared tooltip is rendered:

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Shared Tooltip Demo">
    <StockChartEvents SharedTooltipRendering="SharedTooltipHandler"></StockChartEvents>
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Line" 
                          XName="Date" 
                          YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

<div>
    <p>Hovering: @HoverInfo</p>
</div>

@code {
    private string HoverInfo = "Move the pointer over the chart";

    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 179.5 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Close = 183.7 },
        new StockInfo { Date = new DateTime(2024, 01, 15), Close = 188.2 }
    };

    private void SharedTooltipHandler(SharedTooltipRenderEventArgs args)
    {
        HoverInfo = $"Shared tooltip rendered for {args.Point?.X}";
    }
}

Interaction Notes

The validated StockChartEvents API exposes point click, tooltip rendering, zooming, period change, range change, export, and print callbacks. Use OnPointClick, SharedTooltipRendering, TooltipRendering, and OnZooming for pointer-driven scenarios, and rely on StockChartMouseEventArgs only where the component API explicitly provides it.

Range Change Event

In the RangeChange event, the RangeChange property will be used along with StockChartRangeChangeEventArgs containing the Start and End properties when the date range changes (via period selector or range selector):

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Range Change Event Demo">
    <StockChartEvents RangeChange="RangeChangeHandler"></StockChartEvents>
    <StockChartPeriods>
        <StockChartPeriod Text="1M" IntervalType="RangeIntervalType.Months" Interval="1"></StockChartPeriod>
        <StockChartPeriod Text="3M" IntervalType="RangeIntervalType.Months" Interval="3"></StockChartPeriod>
        <StockChartPeriod Text="6M" IntervalType="RangeIntervalType.Months" Interval="6"></StockChartPeriod>
    </StockChartPeriods>
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Line" 
                          XName="Date" 
                          YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

<div style="margin-top: 20px;">
    <h4>Current Range:</h4>
    <p><strong>Start:</strong> @RangeStart</p>
    <p><strong>End:</strong> @RangeEnd</p>
</div>

@code {
    private string RangeStart = "Not set";
    private string RangeEnd = "Not set";

    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 175.5 },
        new StockInfo { Date = new DateTime(2024, 02, 01), Close = 179.5 },
        new StockInfo { Date = new DateTime(2024, 03, 01), Close = 183.7 },
        new StockInfo { Date = new DateTime(2024, 04, 01), Close = 188.2 },
        new StockInfo { Date = new DateTime(2024, 05, 01), Close = 192.8 },
        new StockInfo { Date = new DateTime(2024, 06, 01), Close = 197.5 }
    };

    private void RangeChangeHandler(StockChartRangeChangeEventArgs args)
    {
        RangeStart = args.Start.ToString("MMM dd, yyyy");
        RangeEnd = args.End.ToString("MMM dd, yyyy");
    }
}

Event Handler Patterns

Drill-Down Scenario

In the Drill-Down pattern, the OnPointClick property will be used to handle navigation when clicking data points:

@using Syncfusion.Blazor.Charts
@inject NavigationManager NavigationManager

<SfStockChart Title="Click to View Details">
    <StockChartEvents OnPointClick="HandleDrillDown"></StockChartEvents>
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Candle" 
                          XName="Date" 
                          High="High" 
                          Low="Low" 
                          Open="Open" 
                          Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</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 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 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7 }
    };

    private void HandleDrillDown(StockChartPointEventArgs args)
    {
        var date = args.Point.X.ToString();
        NavigationManager.NavigateTo($"/stock-details/{date}");
    }
}

Dynamic Data Updates

In the Dynamic Data Updates pattern, the RangeChange property will be used along with StockChartRangeChangeEventArgs containing Start and End properties to update chart data based on user interaction:

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Dynamic Data Updates">
    <StockChartEvents RangeChange="LoadDataForRange"></StockChartEvents>
    <StockChartPeriods>
        <StockChartPeriod Text="1W" IntervalType="RangeIntervalType.Days" Interval="7"></StockChartPeriod>
        <StockChartPeriod Text="1M" IntervalType="RangeIntervalType.Months" Interval="1"></StockChartPeriod>
    </StockChartPeriods>
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Line" 
                          XName="Date" 
                          YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

<div>Loading: @IsLoading</div>

@code {
    private bool IsLoading = false;

    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 175.5 },
        new StockInfo { Date = new DateTime(2024, 02, 01), Close = 179.5 }
    };

    private async Task LoadDataForRange(StockChartRangeChangeEventArgs args)
    {
        IsLoading = true;
        StateHasChanged();

        // Simulate API call to load data for selected range
        await Task.Delay(500);
        
        // Update StockData based on args.Start and args.End
        Console.WriteLine($"Loading data from {args.Start} to {args.End}");
        
        IsLoading = false;
        StateHasChanged();
    }
}

Common Issues

Event Handler Not Firing

In Event Handler Not Firing issue, the StockChartEvents element and the event property (e.g., OnPointClick) must be properly configured.

Problem: Event handler method doesn't execute.

Solution: Ensure the event is properly wired in StockChartEvents:

<StockChartEvents OnPointClick="PointClickHandler"></StockChartEvents>

Null Reference in Event Args

In Null Reference in Event Args issue, the StockChartPointEventArgs parameter and its Point property must be null-checked before access.

Problem: Accessing properties in event args causes null reference exception.

Solution: Check for null before accessing properties:

private void PointClickHandler(StockChartPointEventArgs args)
{
    if (args?.Point != null)
    {
        var value = args.Point.Close;
    }
}

UI Not Updating After Event

In UI Not Updating After Event issue, the StateHasChanged() method must be called after modifying state variables to reflect changes in the component.

Problem: UI doesn't reflect changes made in event handler.

Solution: Call StateHasChanged() to trigger re-render:

private void ChartClickHandler(StockChartPointEventArgs args)
{
    ClickPosition = $"Point clicked: {args.Point?.X}";
    StateHasChanged();
}

Performance Issues with Mouse Move

In Performance Issues with Mouse Move issue, the event callback and timing logic using DateTime.Now property must be implemented to throttle frequent event calls.

Problem: Excessive hover processing causes performance degradation.

Solution: Throttle event handling or avoid heavy operations:

private DateTime lastUpdate = DateTime.MinValue;

private void MouseMoveHandler(StockChartPointEventArgs args)
{
    if ((DateTime.Now - lastUpdate).TotalMilliseconds < 100)
        return;
    
    lastUpdate = DateTime.Now;
    // Handle event
}

Export and Print

This guide explains how to export Stock Charts to various formats (PNG, JPEG, SVG, PDF) and enable print functionality for reports and documentation.

Table of Contents

• Overview
• Export Formats
• Programmatic Export
• Export Configuration
• Print Functionality
• Disable Export and Print
• Complete Export Example
• Common Issues

Overview

The Stock Chart component provides built-in export and print capabilities through the SfStockChart component, utilizing the ExportType property and ExportAsync() and PrintAsync() methods to allow users to save charts as images or documents, or print them directly.

Key Features:

• Export to PNG, JPEG, SVG, and PDF formats
• Export via UI button or programmatically
• Customizable export settings (filename, resolution)
• One-click print functionality
• Option to disable export/print buttons

Export Formats

The ExportType property enables configuration of available export format options in the Stock Chart toolbar. Export is enabled by default and supports PNG, JPEG, SVG, and PDF formats.

Enable Export Toolbar Button

Export is enabled by default. Use the ExportType property to specify the list of available export formats.

@using Syncfusion.Blazor.Charts

<SfStockChart Title="AAPL Stock Price" EnableSelector="false" ExportType="new List<ExportType>() { ExportType.JPEG, ExportType.PDF, ExportType.PNG, ExportType.XLSX }">
    <StockChartEvents ExportCompleted="ExportCompleteHandler"></StockChartEvents>
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Candle" 
                          XName="Date" 
                          High="High" 
                          Low="Low" 
                          Open="Open" 
                          Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</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 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 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7 },
        new StockInfo { Date = new DateTime(2024, 01, 15), Open = 183.7, High = 190.5, Low = 182.5, Close = 188.2 }
    };

    private void ExportCompleteHandler(ExportEventArgs args)
    {
        Console.WriteLine($"Chart exported successfully");
    }
}

The export menu in the toolbar provides options for PNG, JPEG, SVG, PDF, and Print.

Programmatic Export

Export charts programmatically using the ExportAsync() method of the SfStockChart component. This method accepts the ExportType parameter and an optional filename parameter:

Export to PNG

@using Syncfusion.Blazor.Charts

<SfStockChart @ref="StockChartRef" Title="Stock Chart - Export to PNG">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Line" 
                          XName="Date" 
                          YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

<button @onclick="ExportToPNG">Export to PNG</button>

@code {
    private SfStockChart StockChartRef;

    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 179.5 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Close = 183.7 },
        new StockInfo { Date = new DateTime(2024, 01, 15), Close = 188.2 }
    };

    private async Task ExportToPNG()
    {
        await StockChartRef.ExportAsync(ExportType.PNG, "StockChart");
    }
}

Export to JPEG

@using Syncfusion.Blazor.Charts

<SfStockChart @ref="StockChartRef" Title="Stock Chart - Export to JPEG">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Candle" 
                          XName="Date" 
                          High="High" 
                          Low="Low" 
                          Open="Open" 
                          Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

<button @onclick="ExportToJPEG">Export to JPEG</button>

@code {
    private SfStockChart StockChartRef;

    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 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 }
    };

    private async Task ExportToJPEG()
    {
        await StockChartRef.ExportAsync(ExportType.JPEG, "StockChart");
    }
}

Export to SVG

<button @onclick="ExportToSVG">Export to SVG</button>

@code {
    private SfStockChart StockChartRef;

    private async Task ExportToSVG()
    {
        await StockChartRef.ExportAsync(ExportType.SVG, "StockChart");
    }
}

Export to PDF

@using Syncfusion.Blazor.Charts

<button @onclick="ExportToPDF">Export to PDF</button>

@code {
    private SfStockChart StockChartRef;

    private async Task ExportToPDF()
    {
        await StockChartRef.ExportAsync(ExportType.PDF, "StockChart");
    }
}

Export Configuration

Customize export settings using the ExportAsync() method with additional parameters such as custom filenames and dynamic naming conventions:

@using Syncfusion.Blazor.Charts

<SfStockChart @ref="StockChartRef" Title="Custom Export Settings">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Line" 
                          XName="Date" 
                          YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

<div>
    <button @onclick="ExportWithCustomSettings">Export with Custom Settings</button>
</div>

@code {
    private SfStockChart StockChartRef;

    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 179.5 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Close = 183.7 }
    };

    private async Task ExportWithCustomSettings()
    {
        // Export to PNG with custom filename including timestamp
        string filename = $"StockChart_{DateTime.Now:yyyyMMdd_HHmmss}";
        await StockChartRef.ExportAsync(ExportType.PNG, filename);
    }
}

Print Functionality

The PrintAsync() method enables direct printing of Stock Charts. Print functionality is available both through the toolbar menu and programmatically.

Enable Print via Toolbar

The print option is available in the export toolbar menu by default. Use the EnableSelector property to control toolbar visibility.

Programmatic Print

Trigger print programmatically using the PrintAsync() method of the SfStockChart component:

@using Syncfusion.Blazor.Charts

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

<button @onclick="PrintChart">Print Chart</button>

@code {
    private SfStockChart StockChartRef;

    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 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 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7 }
    };

    private async Task PrintChart()
    {
        await StockChartRef.PrintAsync();
    }
}

Disable Export and Print

Set the ExportType property to an empty list to disable export options, or use the EnableSelector property to hide the entire toolbar including export and print buttons.

@using Syncfusion.Blazor.Charts

<SfStockChart Title="Chart without Export" EnableSelector="false" ExportType="new List<ExportType>() { }">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Line" 
                          XName="Date" 
                          YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

@code {
    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Close { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Close = 179.5 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Close = 183.7 },
        new StockInfo { Date = new DateTime(2024, 01, 15), Close = 188.2 }
    };
}

Set EnableSelector="false" to hide the entire toolbar including export/print options.

Complete Export Example

Comprehensive example demonstrating all export options using the ExportAsync() and PrintAsync() methods, along with the StockChartEvents and ExportCompleted event handler:

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

<h3>Stock Chart Export Demo</h3>

<SfStockChart @ref="StockChartRef" 
              Title="AAPL Stock Price - 2024"
              EnableSelector="true">
    <StockChartEvents ExportCompleted="OnExportComplete"></StockChartEvents>
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" 
                          Type="ChartSeriesType.Candle" 
                          XName="Date" 
                          High="High" 
                          Low="Low" 
                          Open="Open" 
                          Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

<div style="margin-top: 20px;">
    <h4>Export Options:</h4>
    <button class="btn btn-primary" @onclick="() => ExportChart(ExportType.PNG)">PNG</button>
    <button class="btn btn-primary" @onclick="() => ExportChart(ExportType.JPEG)">JPEG</button>
    <button class="btn btn-primary" @onclick="() => ExportChart(ExportType.SVG)">SVG</button>
    <button class="btn btn-primary" @onclick="() => ExportChart(ExportType.PDF)">PDF</button>
    <button class="btn btn-secondary" @onclick="PrintChart">Print</button>
</div>

<div style="margin-top: 10px;">
    <p>@ExportMessage</p>
</div>

@code {
    private SfStockChart StockChartRef;
    private string ExportMessage = "";

    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 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 },
        new StockInfo { Date = new DateTime(2024, 01, 08), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7 },
        new StockInfo { Date = new DateTime(2024, 01, 15), Open = 183.7, High = 190.5, Low = 182.5, Close = 188.2 },
        new StockInfo { Date = new DateTime(2024, 01, 22), Open = 188.2, High = 195.5, Low = 187.5, Close = 193.2 }
    };

    private async Task ExportChart(ExportType type)
    {
        string extension = type.ToString().ToLower();
        string filename = $"AAPL_Stock_{DateTime.Now:yyyyMMdd}.{extension}";
        
        ExportMessage = $"Exporting chart as {type}...";
        await StockChartRef.ExportAsync(type, filename);
    }

    private async Task PrintChart()
    {
        ExportMessage = "Opening print dialog...";
        await StockChartRef.PrintAsync();
    }

    private void OnExportComplete(ExportEventArgs args)
    {
        ExportMessage = $"Chart exported successfully";
        StateHasChanged();
    }
}

Common Issues

Export Doesn't Download File

Problem: ExportAsync() method doesn't download the file.

Solution: Ensure your browser allows downloads and check browser console for errors. The export feature works in browsers that support the HTML5 download attribute.

Exported Image is Blank

Problem: Exported image/PDF is empty or blank.

Solution: Wait for the chart to fully render before exporting:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await Task.Delay(1000); // Wait for chart to render
        await StockChartRef.ExportAsync(ExportType.PNG, "chart.png");
    }
}

Print Shows Blank Page

Problem: Print preview displays a blank page when using PrintAsync().

Solution: Ensure the chart is fully loaded and visible before calling PrintAsync().

Export Button Not Visible

Problem: Export/Print buttons don't appear in toolbar.

Solution: Ensure the EnableSelector property is not set to false:

<SfStockChart EnableSelector="true">

PDF Export Quality Issues

Problem: PDF export has poor quality or resolution.

Solution: Export to SVG format for scalable vector graphics that maintain quality at any size, or use PNG with appropriate dimensions.