Syncfusion Feedback
Product Categories
Chart SDK

Common

Production-ready component

The following components have been developed to meet industry standards and are now marked as production-ready for the Chart SDK:

  • Web Sankey Diagram: A powerful visualization tool for understanding flows and relationships within complex systems. It uses interconnected nodes and weighted links to clearly show how quantities move and transform across stages.

Sankey Diagram

  • Blazor Chart Wizard: A guide that simplifies end‑to‑end chart creation. It analyzes data sources to auto‑detect fields, recommends the most suitable chart types, and applies optimized default configurations for layout, styling, and performance. With its intuitive step‑by‑step workflow and real‑time preview, it enables developers to quickly build consistent, high‑quality visualizations with minimal manual setup, ensuring faster development and reliable production outcomes.

Chart Wizard

Web Charts

Supported in:
React Angular JavaScript TypeScript Vue ASP.NET Core ASP.NET MVC

Inline DateTime and number formatting in tooltip

Inline DateTime and number formatting within tooltip format strings enables values to be displayed more clearly and readably, such as formatting dates (MMM yyyy, MM:yy) and numbers (n2, c2, n0). This handles invalid formats or values without affecting rendering or template behavior.

Inline format tooltip

Web Accumulation Charts

Supported in:
React Angular JavaScript TypeScript Vue ASP.NET Core ASP.NET MVC

Nested doughnut (multi-level)

The multi-series pie chart displays multiple datasets as concentric rings within a single chart. This makes it easier to compare data and understand hierarchical relationships. Cross-series legend grouping with the mappingKey feature allows similar categories to be combined into a single legend item, enabling unified interaction across all matching slices. Each series operates independently, supporting tooltips, data labels, highlighting, and selection.

Multiple series

Pure React Charts

Stacked and 100% stacked line series

Visualize cumulative values across categories. Stacking groups and percentage normalization provide clear representation of proportional contributions.

React Charts stacking lines

Range and stacked step area series

Users can visualize data by step. These series display both range-based variations and stacked transitions effectively.

React Charts range step area

Box and whisker series

Box and whisker plots display the distribution of statistical data, including the minimum, maximum, median, quartiles, and outliers.

React Charts box and whisker

Cylindrical column and bar series

Cylindrical rendering uses column and bar series to provide a visually enhanced, 3D-like appearance.

React Charts cylindrical column

Polar and radar series

Polar and radar chart types display multivariate data in a circular layout, making comparison and analysis more intuitive.

React Charts polar and radar

Technical indicators

Built-in financial indicators such as ATR, RSI, MACD, Bollinger Bands, SMA, EMA, and Stochastic enable advanced trend analysis and financial visualization.

React Charts indicators

Scrollbars

Integrated scrollbars enable efficient navigation across large datasets, ensuring smooth interaction and seamless coordination with zooming.

React Charts scrollbars

Series labels

Display each series name directly in the chart area to improve readability when multiple series are rendered.

Last-value labels

Last-value labels display the final data point for each series with customizable formatting.

React Charts last value label

No-data template

A no-data template displays a customizable message or UI when the data source is empty.

Range color mapping

Range color mapping uses color variations based on value ranges or conditions to highlight patterns and improve data interpretation.

React Charts range color mapping

Multilevel labels

Display hierarchical axis labels across multiple levels, enabling better grouping and improved readability of categorical data.

React Charts multilevel labels

Blazor Charts

Series labels

Series-level labels can now be displayed directly on charts with configurable position and appearance options. This feature enhances chart readability and data clarity by enabling developers to annotate series without relying on separate legend elements. Label alignment, formatting, and visibility can be customized for each series.

Series labels

No riser for step line and step area series

Introduces the no-riser option, which removes vertical transitions in step charts to display only horizontal segments. This improves readability, emphasizes value continuity, and reduces visual clutter while supporting all step positions (left, right, center).

Chart with no riser

.NET MAUI Cartesian Charts

Point color mapping

Point color mapping allows users to assign per-point colors directly from the data source using brush, color, or hex values.

Point color mapping in .NET MAUI Cartesian Charts

Multilevel labels

Multilevel labels enable the hierarchical categorization of axis data. This feature improves data organization and clarity when working with complex data.

.NET MAUI Cartesian Charts multilevel labels

Web Stock Chart

Supported in:
React Angular JavaScript TypeScript Vue ASP.NET Core ASP.NET MVC

Indicator events

Indicator events in Stock Charts enable users to detect and control add and remove operations triggered through the built-in toolbar. The before indicator change event allows canceling an indicator mutation before it is applied, while the indicator changed event is triggered after a successful indicator update.

Web Range Selector

Supported in:
React Angular JavaScript TypeScript Vue ASP.NET Core ASP.NET MVC

New series types

The range navigator supports spline, spline area, and column series types, expanding the visualization options for range-based data selection. Spline displays smoother trend lines, spline area emphasizes variations over a continuous range, and column represents values as distinct vertical bars within the navigator.

This enhancement provides greater flexibility for building financial dashboards, analytical reports, and time-series applications, helping users interpret data more effectively through the most suitable visual representation.

New series types

Up arrow icon