Blazor Charts Documentation Overview

Introduction to Syncfusion Blazor Charts

The Blazor Charts is a powerful and feature-rich UI component designed for visualizing business and analytical data with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including support for financial and statistical charting, multiple axes, data driven visual elements, and seamless integration with local and remote data sources. Built for scalability, it enables developers to create responsive, data-intensive dashboards and reports with ease.

Common use cases

The Blazor Charts is ideal for a wide range of business scenarios:

Use Case Description Key Features
Sales & Revenue Dashboards Compare revenue across products, regions, and time periods Combination Charts, Multiple Axis, Data Labels
Financial Analysis Track stock prices, volatility, and trading signals Candle, Hilo, Technical Indicators
Trend Analysis Visualize performance trends and forecasts over time Line, Spline, Trendlines
Statistical Reporting Display distributions, quartiles, and outliers Histogram, Box and Whisker, Error Bar
Comparative Analysis Contrast categories and stacked contributions Column, Bar, Stacking, 100% Stacking
Live Monitoring Update charts in real time from streaming data Live Chart, Data Editing, Events

Data connectivity

The Blazor Charts enables multiple data binding approaches, offering flexibility in choosing the right strategy for different application architectures. The chart can work with in-memory collections, connect to remote services, or leverage ORM frameworks for seamless database integration.

Data Binding Approaches

  • List binding - Bind charts to local collections, lists, and arrays for fast data access without external dependencies. Ideal for small to medium datasets and rapid prototyping.
  • Remote data - Connect to web services, REST APIs, and remote endpoints using DataManager adaptors for scalable applications.
  • Entity Framework - Bind directly to EF Core DbContext query results for simplified database model binding.

Chart types

The Blazor Charts supports 50+ chart types for virtually every visualization requirement. Each type supports markers, data labels, tooltips, legends, and empty point handling:

Category Available Types Best For
Line & Spline Line, Step Line, Stacked Line, 100% Stacked Line, Spline Continuous trends over time
Area Area, Range Area, Range Step Area, Spline Range Area, Stacked Area, 100% Stacked Area, Step Area, Spline Area Volume comparison beneath a line
Column & Bar Column, Range Column, Stacked Column, 100% Stacked Column, Bar, Stacked Bar, 100% Stacked Bar Category magnitude comparison
Distribution & Statistical Scatter, Bubble, Histogram, Box and Whisker, Error Bar, Waterfall, Pareto Statistical analysis and contribution
Polar & Radar Polar, Radar Multivariate comparison
Financial Candle, Hilo, High Low Open Close Stock and market data
Mixed Charts Mixed Chart Combining incompatible chart types in one plot

Axes

The Blazor Charts offers extensive axis options for precisely mapping data to the plot area:

Feature Purpose Key Benefit
Category Axis Plot data against provided labels Simple category comparison
Numeric Axis Plot numeric data with range control Continuous numeric scales
DateTime Axis Plot date-time values with interval types Time series visualization
Logarithmic Axis Plot values across exponential ranges Wide range scientific data
Axis Labels Style and rotate axis labels, handle label intersect Readable tick labels
Axis Customization Axis crossing, titles, tick and grid lines, inversed axis Precise axis control
Multiple Axis Add multiple axes to one chart Multi unit comparison
Strip Lines Highlight ranges or bands of interest on the axis Threshold visualization
Multiple Panes Divide the chart into stacked panes Compact multi series layouts

Data visualization elements

The Blazor Charts provides comprehensive elements for annotating and enhancing data points:

Feature Purpose Key Benefit
Data Labels Display values on data points with position and format control Direct value visibility
Data Label Template Use custom Blazor templates for data labels Fully customized labels
Data Markers Highlight data points with shapes and images Point identification
Legend Explain series and point colors with position control Series differentiation
Tooltip Show point details on hover with template support On-demand information
Chart Annotations Place custom HTML content anywhere in the chart In-plot contextual content
Gradient Apply linear and radial gradient color fills Modern visual polish
Chart Appearance Configure titles, margins, background, and themes Complete visual control

User experience & interaction

The Blazor Charts provides a comprehensive, interactive user experience with extensive customization options, flexible interaction modes, and accessibility standards compliance:

Feature Purpose Key Benefit
Zooming Zoom by pinch, mouse wheel, selection, or toolbar Precise data inspection
Crosshair and Trackball Track exact values along the axes Value inspection without clutter
Selection Select points, series, or clusters for user actions Interactive point-level workflows
Data Editing Drag data points to update underlying values Interactive what-if scenarios
Data Sorting Sort data points by value or label Ordered presentation
Adaptive Layout Automatically arrange elements for any size Optimal display across devices

Advanced analytics

The Blazor Charts includes sophisticated capabilities designed for complex financial and analytical scenarios:

Feature Purpose Key Benefit
Technical Indicators Overlay indicators such as Bollinger Bands, RSI, MACD, and SMA on the chart Informed trading analysis
Trendlines Project linear, exponential, and other trend lines onto series Forecast direction analysis

Print & export

The Blazor Charts provides comprehensive output capabilities for reporting and sharing chart visuals:

Feature Purpose Key Benefit
Print Print the chart with page setup options On-demand physical output
Export Export the chart to PDF, PNG, JPEG, and SVG Professional document integration
Exporting event customization Customize the exported chart using the Exporting event Branded export output

Globalization & accessibility

The Blazor Charts is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards:

System requirements

The Blazor Charts works with:

  • Blazor Version: .NET 8.0 or higher
  • Hosting Models: Blazor Server, Blazor WebAssembly, Blazor Web App
  • Browsers: Chrome, Firefox, Safari, Edge (latest versions)
  • Mobile: iOS Safari, Android Chrome

Getting Started:

Popular Features:

Resources:

Support & Resources