Skip to main content Inicio Creadores syncfusion blazor-ui-components-skills syncfusion-blazor-stock-charts
syncfusion-blazor-stock-charts Implement Syncfusion Blazor Stock Chart (SfStockChart) for financial data visualization. Use this when working with stock charts, candlestick displays, OHLC data, or technical indicators like SMA, EMA, MACD, and Bollinger Bands. This skill covers period selectors, range navigation, and financial time-series data visualization in Blazor applications.
Ir a la instalación Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-stock-chartsEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Más de este repositorio Implement Syncfusion Blazor Chart (SfChart) component for comprehensive data visualization. Use this when creating line charts, bar/column charts, area charts, financial charts, or statistical visualizations. This skill covers 30+ chart types including scatter plots, bubble charts, candlestick charts, and specialized charts like waterfall, histogram, and polar charts for Blazor applications.
syncfusion-blazor-diagram Build and troubleshoot Syncfusion Blazor diagrams using SfDiagramComponent. Trigger for flowcharts, org charts, mind maps, BPMN, UML sequence, swimlanes, symbol palettes, nodes/connectors/ports/annotations, layouts, data binding, serialization (load/save), export/print, and collaborative editing questions. Provide Blazor + Syncfusion setup steps, configuration patterns, and sample snippets.
syncfusion-blazor-pivot-table Use this skill when users ask how to implement Syncfusion Pivot Table/PivotView in Blazor. Trigger for Blazor components, data binding, OLAP analysis, aggregation, drill-down/drill-through, grouping, filtering, conditional formatting, exports (Excel/PDF/CSV), or pivot charts. Blazor-only, not React/Angular/Vue/JS.
Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
Explorador de archivos
16 archivos name syncfusion-blazor-stock-charts description Implement Syncfusion Blazor Stock Chart (SfStockChart) for financial data visualization. Use this when working with stock charts, candlestick displays, OHLC data, or technical indicators like SMA, EMA, MACD, and Bollinger Bands. This skill covers period selectors, range navigation, and financial time-series data visualization in Blazor applications. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Data Visualization"}
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, HiloHollow Candle Mode : Enable solid or hollow candle rendering through candle configuration9+ Technical Indicators : SMA, EMA, MACD, RSI, Bollinger Bands, ATR, and moreTime Navigation : Period selector with preset ranges, Range selector for custom datesStock Events : Mark important dates (earnings, dividends, splits)Trend Analysis : Multiple trend line types with forecastingInteractive Features : Zooming, panning, crosshair, trackball tooltipsExport Options : PNG, JPEG, SVG, PDF export and printAccessibility : WCAG compliant with keyboard navigation
Documentation and Navigation Guide
Getting Started 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 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 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 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 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 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 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 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 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 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 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 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 Handle stock chart events exposed by StockChartEvents:
OnLoaded for post-render initializationOnPointClick for point selection scenariosAxisLabelRendering for axis label customizationPeriodChanged and RangeChange for time navigation updatesOnZooming for zoom interaction handlingTooltipRendering and SharedTooltipRendering for tooltip customizationExporting, ExportCompleted, and OnPrintComplete for output workflows
Accessibility 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 Property Type Purpose Titlestring Main chart title Height / Widthstring Chart dimensions (e.g., "450px", "100%") ThemeTheme Visual theme (Material, Bootstrap, Fluent, etc.) EnablePeriodSelectorbool Show/hide period selector (default: true) EnableSelectorbool Show/hide range selector (default: true) EnableCustomRangebool Allow custom date range input
Official API Reference 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 Property Type Purpose TypeChartSeriesType Series type (Candle, Line, Hilo, etc.) DataSourceobject Data collection XNamestring Property name for X-axis (Date) High / Low / Open / Closestring OHLC property names YNamestring Property for Line/Spline series Fillstring Series color
Period Selector Props Property Type Purpose Textstring Button label (e.g., "1M", "6M", "1Y") Intervalint Number of intervals IntervalTypeRangeIntervalType Days, Months, Years Selectedbool Default selected period
Next Steps For questions or issues, refer to Accessibility for compliance requirements or Events for handling user interactions.
