syncfusion-angular-chart

What this skill does

# Implementing Syncfusion Angular Chart Component

A comprehensive guide for implementing the Syncfusion Angular Chart component, a high-performance, interactive data visualization library supporting 25+ chart types including line, bar, area, column, pie, financial, and specialized series. Optimized for responsive rendering, smooth interactions, and large datasets.

## When to Use This Skill

Use this skill when you need to:

- **Visualize Data:** Display numerical data as charts, graphs, or plots in Angular applications
- **Trend Analysis:** Show data trends over time using line, spline, or area charts
- **Comparisons:** Compare categorical data using column, bar, or grouped charts
- **Financial Data:** Implement stock charts with candlestick, OHLC, or technical indicators
- **Statistical Analysis:** Use box plots, histograms, or pareto charts for distributions
- **Multi-dimensional Data:** Display scatter plots or bubble charts for correlation analysis
- **Real-time Monitoring:** Create live-updating charts for dashboards or monitoring systems
- **Interactive Exploration:** Add zooming, panning, crosshair, tooltips, or selection features
- **Custom Visualizations:** Combine multiple series types, axes, or create complex layouts
- **Accessible Charts:** Implement WCAG-compliant charts with keyboard navigation and screen reader support

## Component Overview

The Syncfusion Angular Chart is a feature-rich data visualization component with:

- **25+ Series Types:** Line, spline, step line, area, column, bar, scatter, bubble, pie, financial (candlestick, OHLC), statistical (box & whisker, histogram, pareto), polar, radar, waterfall, and more
- **Interactive Features:** Zooming (selection, mouse wheel, pinch), panning, tooltips, crosshair, trackball, selection, data editing
- **Multiple Axes:** Support for primary, secondary, and multiple axes with different data types (numeric, datetime, logarithmic, category)
- **Chart Elements:** Legends, data markers, data labels, annotations, trendlines, technical indicators, striplines
- **Data Binding:** Local arrays, remote data (OData, DataManager), JSON sources, dynamic updates
- **Customization:** Themes, CSS styling, color palettes, responsive design, animations
- **Export & Print:** Export to PDF, SVG, PNG, JPEG, CSV, XLSX formats
- **Accessibility:** WCAG compliance, keyboard navigation, ARIA attributes, internationalization, RTL support

## Quality Standards for This Skill

This skill documentation follows strict quality standards to ensure accuracy and production-readiness:

### ✅ API Accuracy Standards
- **Property Names:** Use exact Syncfusion v33+ API property names (e.g., `legendSettings` NOT `legend`)
- **Type Safety:** All code examples use explicit TypeScript types from `@syncfusion/ej2-angular-charts`
- **Verification:** All properties verified against official [Syncfusion API docs](https://ej2.syncfusion.com/angular/documentation/api/chart/)
- **No Assumptions:** Never guess property names—always check official documentation first

### ✅ Code Quality Standards
- **TypeScript Strict Mode:** All examples compile with `"strict": true`
- **No `any` Types:** 100% type coverage, no loose typing
- **Tested Examples:** Code examples tested in real Angular projects
- **Import Statements:** All required types explicitly imported

### ✅ Documentation Standards
- **Clear Property Names:** Template property names clearly distinguished from TypeScript names
- **Type Declarations:** TypeScript type models documented for each property
- **Common Mistakes Section:** Each feature includes "❌ Don't do this" examples
- **Related Properties:** Links to related settings and cross-references

### 🔍 Common Pitfalls (Learn From Mistakes)

| ❌ WRONG | ✅ CORRECT | Why |
|---------|-----------|-----|
| `[legend]` | `[legendSettings]` | Must use `Settings` suffix for config objects |
| No type declared | `public legendSettings: LegendSettingsModel = {...}` | Type safety enables IDE IntelliSense |
| `[tooltips]` | `[tooltip]` | Use singular form, not plural |
| Global marker config | Per-series marker config | Markers are series-specific |

**See:** [Property Mapping Guide](references/property-mapping-guide.md) for complete reference  
**For Developers:** [Skill Development Guide](references/skill-development-guide.md) explains how to maintain this documentation

## Documentation and Navigation Guide

### Getting Started

📄 **Read:** [references/getting-started.md](references/getting-started.md)

When you need to:
- Install and set up the Chart component in an Angular project
- Understand prerequisites and system requirements
- Add the `@syncfusion/ej2-angular-charts` package
- Configure CSS themes and imports
- Create your first basic chart
- Understand the chart module structure

### Series Types

📄 **Read:** [references/series-types.md](references/series-types.md)

When you need to:
- Choose the appropriate chart type for your data
- Implement line series (line, step line, spline, stacked, multi-colored)
- Create area charts (area, stacked, 100% stacked, range, spline range)
- Build column and bar charts (column, bar, stacked, range)
- Visualize financial data (candlestick, hilo, hilo-open-close)
- Use statistical charts (box & whisker, histogram, pareto, error bar)
- Create specialized charts (scatter, bubble, polar, radar, waterfall, vertical)
- Combine multiple series types in one chart

### Chart Elements

📄 **Read:** [references/chart-elements.md](references/chart-elements.md)

When you need to:
- Configure and customize legends (positioning, templates, styling)
- Add data markers to highlight points (shapes, sizes, visibility)
- Display data labels on chart elements (positioning, templates, formatting)
- Add custom annotations (text, shapes, images at specific coordinates)
- Include trendlines (linear, exponential, polynomial, moving average)
- Add technical indicators (RSI, MACD, Bollinger Bands, EMA, SMA)
- Highlight specific ranges with striplines
- Apply gradient fills to series

### Axes and Layout

📄 **Read:** [references/axes-and-layout.md](references/axes-and-layout.md)

When you need to:
- Configure axis types (numeric, datetime, logarithmic, category)
- Set up primary and secondary axes
- Add multiple axes for different data scales
- Format axis labels (rotation, alignment, multilevel labels)
- Customize gridlines and tick marks
- Implement axis crossing and inversed axes
- Create charts with multiple panes
- Configure chart title, subtitle, and dimensions
- Set chart margins and padding

### Interactive Features

📄 **Read:** [references/interactive-features.md](references/interactive-features.md)

When you need to:
- Enable zooming (selection zoom, mouse wheel zoom, pinch zoom, zoom toolbar)
- Implement panning for navigating zoomed charts
- Add tooltips (default, custom templates, shared tooltips)
- Enable crosshair for precise value reading
- Use trackball for multi-series point tracking
- Implement selection (point, series, cluster, drag selection)
- Enable data editing by dragging points
- Synchronize multiple charts for coordinated interactions

### Data Binding

📄 **Read:** [references/data-binding.md](references/data-binding.md)

When you need to:
- Bind local data (arrays of objects, JSON)
- Connect to remote data sources (OData, RESTful APIs)
- Use DataManager for advanced data operations
- Handle dynamic data updates and real-time data
- Manage empty points and null values
- Map data fields to chart properties
- Optimize performance for large datasets
- Handle asynchronous data loading

### Customization

📄 **Read:** [references/customization.md](references/customization.md)

When you need to:
- Apply built-in themes (Material, Bootstrap, Fabric, Tailwind, etc.)
- Customize chart appearance with CSS
- Use Theme Studio for custom theme generation
- Configure color palettes for series
- Style individual series with custom colors and patterns
- Implement responsive design for different s