Skip to main content 홈 크리에이터 syncfusion aspnetcore-ui-components-skills syncfusion-aspnetcore-charts
syncfusion-aspnetcore-charts Implements Syncfusion ASP.NET Core Chart (SfChart) for data visualization. Use this when building charts, visualizing time-series or categorical data, or creating dashboards. Covers series configuration (line, bar, pie), axes, tooltips, legends, and customization for ASP.NET Core applications.
설치로 이동 Skills Marketplace 커뮤니티가 만든 AI 스킬을 발견하고 탐색하세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-charts명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Zip 다운로드 다운로드 중... 이 저장소의 다른 Skills syncfusion-aspnetcore-grid Implements Syncfusion ASP.NET Core Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
syncfusion-aspnetcore-pivot-table Use this skill when users ask how to build Syncfusion PivotView/pivot tables in ASP.NET Core apps. Trigger for server integration, data binding (API/DB/remote), OLAP, aggregation, drill-down, grouping, filtering, conditional formatting, exporting (Excel/PDF/CSV), or pivot charts in ASP.NET Core. Not for MVC/Blazor/JS.
syncfusion-aspnetcore-ai-assistview Implement the Syncfusion ASP.NET Core AI AssistView control for interactive AI-powered assistance interfaces. Use this skill when implementing AI assistants, prompt suggestions, custom views, file attachments, markdown responses, customizable templates, regenerable responses, thinking capabilities (chain-of-thoughts), generative UI blocks, Text-to-Speech conversion, Speech-to-Text voice input, or customizing advanced AI conversation UI in ASP.NET Core applications.
syncfusion
syncfusion/aspnetcore-ui-components-skills
GitHub 저장소 열기 name syncfusion-aspnetcore-charts description Implements Syncfusion ASP.NET Core Chart (SfChart) for data visualization. Use this when building charts, visualizing time-series or categorical data, or creating dashboards. Covers series configuration (line, bar, pie), axes, tooltips, legends, and customization for ASP.NET Core applications. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Data Visualization"}
Implementing Syncfusion ASP.NET Core Charts
The Syncfusion ASP.NET Core Chart component is a feature-rich data visualization control that supports 25+ interactive chart types. It provides extensive customization options, multiple axes, data binding capabilities, and interactive features like zooming, panning, crosshair, and tooltips.
Table of Contents
When to Use This Skill Use this skill when you need to:
Create any type of chart or graph in ASP.NET Core applications
Visualize data with line, area, column, bar, or other chart types
Display financial data with candlestick, OHLC, or technical indicators
Implement interactive charts with zoom, pan, crosshair, or selection
Create multi-series charts or combination charts
Add data labels, markers, legends, or annotations to charts
Configure axes (numeric, datetime, category, logarithmic)
Export charts to PDF, SVG, or image formats
Build dashboards with multiple chart components
Implement accessible charts with WCAG compliance
Component Overview
25+ Chart Types: Line, Area, Column, Bar, Scatter, Bubble, Candle, OHLC, and moreData Binding: JSON arrays, DataManager, OData services, dynamic updatesMultiple Axes: Support for multiple X and Y axes with different scalesInteractivity: Zooming, panning, crosshair, trackball, selection, tooltipsCustomization: Themes, colors, gradients, custom templatesAdvanced Features: Annotations, striplines, trendlines, technical indicators, error barsExport: PDF, SVG, PNG, JPEG, CSV formatsAccessibility: WCAG 2.0 compliant, keyboard navigation, RTL support
Documentation and Navigation Guide
Getting Started
Installation and NuGet package setup
Adding Chart tag helper to ASP.NET Core project
Script manager registration
Creating your first chart
Basic configuration and running the application
Chart Types
Line, Step Line, Spline charts
Area, Step Area, Spline Area charts
Stacked Area and 100% Stacked Area
Range Area and Spline Range Area
When to use each type and complete examples
Column and Bar charts
Stacked Column/Bar and 100% Stacked
Range Column charts
Vertical chart orientation
Complete configuration examples
Candlestick charts
OHLC (Open-High-Low-Close) charts
HiLo and HiLoOpenClose charts
Technical indicators (SMA, EMA, RSI, MACD, etc.)
Financial data binding patterns
Scatter plots for correlation analysis
Bubble charts with three dimensions
Point customization and sizing
Complete implementation examples
Box and Whisker (statistical distribution)
Histogram (frequency distribution)
Pareto (cumulative analysis)
Waterfall (sequential value changes)
Polar and Radar charts
Complete examples for each type
Data Binding
Binding to JSON object arrays
DataManager integration
OData web services
Complex property binding
Dynamic data updates
Local vs remote data
Axes Configuration
Axis types: Numeric, DateTime, Category, Logarithmic
Multiple axes configuration
Axis crossing and positioning
Inversed axis
Axis title and styling
Range and interval customization
Smart label management (trim, wrap, rotate, hide)
Multilevel labels for grouping
Label formatting and templates
Custom label placement
Edge label handling
Label rotation and alignment
Series Configuration
Adding multiple series
Series types and properties
Combination charts (mixing chart types)
Empty points handling
Series customization
Performance optimization
Visual Elements
Enabling and positioning data labels
Label templates and formatting
Text mapping from data source
Smart label arrangement
Customization (font, color, border)
Label connectors
Data marker shapes and customization
Marker visibility and sizing
Legend positioning and layout
Legend customization and templates
Legend pagination
Toggle series visibility
Interactivity Features
Zooming modes: Selection, Pinch, Mousewheel
Panning support
Zoom toolbar configuration
Reset zoom functionality
Programmatic zoom control
Crosshair configuration and customization
Trackball mode for multiple series
Tooltip integration
Line styles and labels
Shared tooltips
Enabling and customizing tooltips
Tooltip templates
Shared tooltips across series
Format and styling
Tooltip animations
Point and series selection
Selection modes and patterns
Multiple selection
Selection events
Visual feedback customization
Advanced Features
Chart annotations (text, shapes, images)
Annotation positioning and alignment
Strip lines for highlighting regions
Segment and recurrence patterns
Customization and styling
Trendline types: Linear, Exponential, Logarithmic, Polynomial
Forecasting with trendlines
Error bars for uncertainty
Error bar modes and types
Customization options
Creating multiple chart panes
Pane configuration and sizing
Associating series with panes
Synchronized axes
Layout customization
Appearance and Theming
Built-in themes (Material, Bootstrap, Fabric, etc.)
Chart dimensions and sizing
Background and border customization
Gradient colors and fills
Chart title and subtitle
Print and export support
Accessibility and Localization
WCAG 2.0 compliance
Keyboard navigation
Screen reader support
RTL (Right-to-Left) support
Internationalization (i18n)
Localization of chart elements
Quick Start Example Here's a minimal example to create a basic line chart:
@* Add to your .cshtml page *@
<ejs-chart id="container" title="Sales Analysis">
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="@ViewBag.ChartData" xName="Month" yName="Sales"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
</e-series>
</e-series-collection>
</ejs-chart>
public IActionResult Index ()new object []
{
new { Month = "Jan" , Sales = 35 },
new { Month = "Feb" , Sales = 28 },
new { Month = "Mar" , Sales = 34 },
new { Month = "Apr" , Sales = 32 },
new { Month = "May" , Sales = 40 }
};
return View();
}
Common Patterns
Multiple Series Chart <ejs-chart id="container" title="Product Comparison">
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="@ViewBag.ProductA" xName="Month" yName="Sales"
name="Product A" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
</e-series>
<e-series dataSource="@ViewBag.ProductB" xName="Month" yName="Sales"
name="Product B" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
</e-series>
</e-series-collection>
<e-chart-legendsettings visible="true"></e-chart-legendsettings>
</ejs-chart>
Chart with Data Labels and Markers <ejs-chart id="container">
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="@ViewBag.Data" xName="X" yName="Y"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
<e-series-marker visible="true" height="10" width="10">
<e-series-datalabel visible="true" position="Top">
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Combination Chart <ejs-chart id="container" title="Weather Analysis">
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="@ViewBag.Data" xName="Month" yName="Temperature"
name="Temperature" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
</e-series>
<e-series dataSource="@ViewBag.Data" xName="Month" yName="Rainfall"
name="Rainfall" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
</e-series>
</e-series-collection>
</ejs-chart>
Chart with Zooming and Crosshair <ejs-chart id="container">
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime" ></e-chart-primaryxaxis>
<e-chart-zoomsettings enableSelectionZooming="true" enablePinchZooming="true">
</e-chart-zoomsettings>
<e-chart-crosshairsettings enable="true">
</e-chart-crosshairsettings>
<e-series-collection>
<e-series dataSource="@ViewBag.Data" xName="Date" yName="Value"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Area">
</e-series>
</e-series-collection>
</ejs-chart>
Key Configuration Options
Chart-Level Properties
title: Chart title textwidth/height: Chart dimensionstheme: Visual theme (Material, Bootstrap, Fabric, etc.)background: Background colorpalettes: Custom color palette for series
Primary Axis (e-chart-primaryxaxis)
valueType: Category, Numeric, DateTime, Logarithmictitle: Axis titleminimum/maximum: Axis rangeinterval: Label intervallabelFormat: Format string for labels
Series Properties (e-series)
type: Chart type (Line, Column, Bar, Area, etc.)dataSource: Data to visualizexName/yName: Property names for X and Y valuesname: Series name for legendfill: Custom colorwidth: Line/border width
Interactive Features
e-chart-zoomsettings: Enable zooming capabilitiese-chart-crosshairsettings: Configure crosshaire-chart-tooltipsettings: Tooltip customizatione-chart-legendsettings: Legend configuration
Visual Elements Options
e-series-marker: Data point markerse-series-datalabel: Labels on data pointse-chart-annotations: Custom annotationse-striplines: Highlight regions
Common Use Cases
1. Sales Dashboard Use Column or Bar charts with multiple series to compare sales across products, regions, or time periods. Add data labels for exact values and legends for clarity.
2. Financial Analysis Use Candlestick or OHLC charts for stock price visualization. Add technical indicators (SMA, EMA, RSI) and enable zooming for detailed analysis.
3. Trend Analysis Use Line or Spline charts with trendlines to show data trends over time. Add forecasting to predict future values.
4. Statistical Distribution Use Box and Whisker charts for statistical analysis, Histogram for frequency distribution, or Scatter plots for correlation analysis.
5. Performance Monitoring Use Area charts with multiple series and real-time data updates. Add annotations and striplines to mark significant events or thresholds.
6. Comparison Analysis Use Stacked Column/Bar or 100% Stacked charts to show part-to-whole relationships. Use Pareto charts for cumulative analysis.
Troubleshooting Tips
Verify Syncfusion.EJ2.AspNet.Core NuGet package is installed
Ensure @addTagHelper *, Syncfusion.EJ2 is in _ViewImports.cshtml
Check that <ejs-scripts> is added at the end of <body> in layout
Confirm script reference is included in <head>
Verify dataSource is properly bound
Check xName and yName match property names (case-sensitive)
Ensure data is not null or empty
Verify axis valueType matches data type
Performance issues with large data:
Use enableDataVirtualization for large datasets
Reduce marker size or disable markers
Use lighter chart types (Line instead of Spline)
Consider data aggregation or sampling
Verify theme is correctly set
Check CSS import order
Use browser developer tools to inspect elements
Ensure custom styles have proper specificity
Related Components
3D Chart: For three-dimensional visualizationStock Chart: Specialized for financial data with navigatorRange Navigator: Timeline control for date-based filteringSparkline: Compact inline chartsBullet Chart: For KPI visualizationSmith Chart: For electrical impedance visualization
API Reference For a comprehensive reference of all Chart API properties, methods, and events, see:
Complete list of all properties (configuration, data binding, display, interactivity, accessibility)
All event properties and their purposes
Series and axis configuration options
Common property combinations and usage patterns
Link to official Syncfusion documentation
Additional Resources 