skills.rest
syncfusion
syncfusionOFFICIAL
Explore all skills by this author →
Website𝕏@SyncfusionGitHub

syncfusion-blazor-toolkit-charts

Implement Syncfusion Blazor Chart components for data visualizations in Blazor applications.

19|8|Updated May 12, 2026
Search Tags:#data visualization#charts#dotnet#syncfusion#blazor#razor#sfchart
One-click install
npx skills add https://github.com/syncfusion/blazor-toolkit --skill syncfusion-blazor-toolkit-charts-syncfusion
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: syncfusion-blazor-toolkit-charts
Source: https://github.com/syncfusion/blazor-toolkit/tree/main/.github/skills/syncfusion-blazor-toolkit-charts
Command: npx skills add https://github.com/syncfusion/blazor-toolkit --skill syncfusion-blazor-toolkit-charts-syncfusion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Syncfusion.Blazor.Toolkit, Syncfusion.Blazor.Themes, and includes references (resource) components.

What problem does it solve? Building interactive data visualizations in Blazor requires correct component configuration, exact enum values, and proper API usage, and small mistakes like unqualified enum names or wrong property names cause compile errors and broken charts. ## Core Features & Use Cases - Chart Implementation Guidance: Step-by-step instructions for line, area, column, bar, scatter, bubble, spline, and stacking chart variants with correct Razor syntax. - Complete API Reference: Authoritative enum values, public method signatures (RefreshAsync, ExportAsync, ShowTooltip), and component properties to prevent API misuse. - Advanced Scenarios: Covers axes configuration, data binding, tooltips, zooming, selection, legends, technical indicators, trend lines, strip lines, accessibility, and RTL localization. - Use Case: A developer needs a time-series line chart with zooming and tooltips for a sales dashboard; this Skill provides the exact SfChart markup, fully qualified enums, and data binding pattern ready to adapt. ## Quick Start Ask the AI to create a Syncfusion Blazor column chart bound to a list of monthly sales data with tooltips and data labels enabled.

Frequently Asked Questions about syncfusion-blazor-toolkit-charts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a chart in Blazor with Syncfusion?▼

Install the Syncfusion.Blazor.Toolkit NuGet package, register AddSyncfusionBlazor in Program.cs, then add an SfChart component with ChartPrimaryXAxis, ChartPrimaryYAxis, and a ChartSeries bound to your data via DataSource, XName, and YName properties.

How to add zooming and tooltips to a Blazor chart?▼

Add ChartTooltipSettings with Enable set to true for tooltips, and ChartZoomSettings with EnableSelectionZooming, EnableMouseWheelZooming, and EnablePan for zooming. Both are child components of SfChart and require no extra code.

Why does my Syncfusion Blazor chart enum cause errors?▼

Syncfusion Blazor Toolkit Charts requires fully qualified enum names such as Syncfusion.Blazor.Toolkit.ValueType.Category and Syncfusion.Blazor.Toolkit.ChartSeriesType.Column. Short forms like ValueType.Category will fail to resolve in some configurations.

Does Syncfusion Blazor Chart support exporting to PDF or PNG?▼

Yes, call ExportAsync on the chart instance obtained via @ref, passing an ExportType such as PNG, JPEG, SVG, or PDF plus a file name. PrintAsync is also available for direct printing.

Can Blazor charts handle live or dynamically updating data?▼

Yes, charts support dynamic data operations including adding, removing, and updating points at runtime, followed by calling RefreshAsync on the chart reference. The references cover live chart and lazy loading patterns.

Related Skills

Explore More Software Engineering Skills→
syncfusionsyncfusion

syncfusion-aspnetcore-3d-chart

Build Syncfusion ASP.NET Core 3D charts with Razor tag helpers.

Official
Advanced
Li-Bai-GOATLi-Bai-GOAT

chartjs-generator

Generate interactive charts with Chart.js for web applications.

Community
Intermediate
tiantangcao1980-webtiantangcao1980-web
4

mui-x

Install MUI X packages to integrate DataGrid, Charts, and Date Pickers in React.

Community
Intermediate
hackeshackeshackeshackes
6

chart-visualization

Generate visual charts from data using Chart.js, D3.js, or Highcharts.

Community
Advanced