Syncfusion Angular Chart

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

Documentation and Navigation Guide

Getting Started

📄 Read: 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

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

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

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

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

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

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 screen sizes
• Configure chart background, border, and area
• Customize animation effects

Accessibility

📄 Read: references/accessibility.md

When you need to:

• Implement WCAG 2.0/2.1 compliant charts
• Enable keyboard navigation (arrow keys, tab, enter)
• Configure ARIA attributes for screen readers
• Ensure proper color contrast and focus indicators
• Support high contrast themes
• Implement internationalization (i18n) for multiple languages
• Enable localization (l10n) for regional formats
• Add RTL (right-to-left) support for appropriate languages
• Configure advanced accessibility features

Advanced Features

📄 Read: references/advanced-features.md

When you need to:

• Handle chart events (load, loaded, pointClick, seriesRender, axisLabelRender, etc.)
• Export charts (PDF, SVG, PNG, JPEG, CSV, XLSX)
• Implement print functionality
• Understand module injection for tree-shaking
• Use different render methods (SVG, Canvas)
• Configure animation settings
• Handle empty point modes
• Access chart API methods programmatically
• Implement advanced event-driven interactions

Common Patterns and Examples

📄 Read: references/common-patterns.md

When you need to:

• See complete examples for common use cases
• Build a trend analysis dashboard
• Create a financial stock chart with technical indicators
• Implement real-time data monitoring with live updates
• Build multi-axis comparison charts
• Create distribution analysis visualizations
• Find troubleshooting solutions for common issues
• Learn performance optimization techniques
• Migrate from EJ1 to EJ2 Chart
• Follow best practices for chart implementation

Quick Start Example

Here's a minimal example to create a basic line chart:

// app.component.ts
import { Component } from '@angular/core';
import { ChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChartModule],
  template: `
    <ejs-chart [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
      <e-series-collection>
        <e-series [dataSource]='chartData' type='Line' xName='month' yName='sales' name='Sales'>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  `
})
export class AppComponent {
  public primaryXAxis = { valueType: 'Category' };
  public primaryYAxis = { title: 'Sales (in USD)' };
  public title = 'Monthly Sales Report';
  
  public chartData = [
    { month: 'Jan', sales: 35000 },
    { month: 'Feb', sales: 28000 },
    { month: 'Mar', sales: 34000 },
    { month: 'Apr', sales: 32000 },
    { month: 'May', sales: 40000 },
    { month: 'Jun', sales: 32000 }
  ];
}

// app.config.ts (for Angular 19+)
import { ApplicationConfig } from '@angular/core';
import { registerLicense } from '@syncfusion/ej2-base';

// Register Syncfusion license (get free trial at syncfusion.com)
registerLicense('YOUR_LICENSE_KEY');

export const appConfig: ApplicationConfig = {
  providers: []
};

Common Patterns

Pattern 1: Multi-Series Comparison Chart

public chartData = [
  { month: 'Jan', product1: 35, product2: 28, product3: 34 },
  { month: 'Feb', product1: 28, product2: 44, product3: 32 },
  { month: 'Mar', product1: 34, product2: 48, product3: 41 }
];

<ejs-chart [primaryXAxis]='primaryXAxis' [title]='title'>
  <e-series-collection>
    <e-series [dataSource]='chartData' type='Column' xName='month' yName='product1' name='Product A'></e-series>
    <e-series [dataSource]='chartData' type='Column' xName='month' yName='product2' name='Product B'></e-series>
    <e-series [dataSource]='chartData' type='Column' xName='month' yName='product3' name='Product C'></e-series>
  </e-series-collection>
</ejs-chart>

Pattern 2: Interactive Chart with Zoom and Tooltip

import { Component } from '@angular/core';
import { ChartModule, ZoomService, TooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChartModule],
  providers: [ZoomService, TooltipService],
  template: `
    <ejs-chart [zoomSettings]='zoomSettings' [tooltip]='tooltip'>
      <e-series-collection>
        <e-series [dataSource]='data' type='Line' xName='x' yName='y'></e-series>
      </e-series-collection>
    </ejs-chart>
  `
})
export class AppComponent {
  public zoomSettings = {
    enableSelectionZooming: true,
    enableMouseWheelZooming: true,
    enablePinchZooming: true,
    enablePan: true
  };
  
  public tooltip = { enable: true };
  public data = [/* your data */];
}

Pattern 3: Financial Stock Chart

public stockData = [
  { date: new Date(2024, 1, 1), open: 120, high: 135, low: 110, close: 130, volume: 1000000 },
  { date: new Date(2024, 1, 2), open: 130, high: 145, low: 125, close: 140, volume: 1200000 }
  // ... more data
];

<ejs-chart [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'>
  <e-series-collection>
    <e-series [dataSource]='stockData' type='Candle' 
              xName='date' high='high' low='low' open='open' close='close'>
    </e-series>
  </e-series-collection>
</ejs-chart>

Key Configuration Options

Series Configuration

• type: Chart type (Line, Column, Bar, Area, Scatter, etc.)
• dataSource: Data array for the series
• xName, yName: Property names for x and y values
• name: Series name for legend
• marker: Marker configuration for data points
• fill: Series color

Axis Configuration

• valueType: Axis type (Double, DateTime, Category, Logarithmic)
• title: Axis title text
• minimum, maximum: Axis range
• interval: Label interval
• labelFormat: Format string for labels
• opposedPosition: Position axis on opposite side

Chart Configuration

• title: Chart title
• width, height: Chart dimensions
• theme: Built-in theme name
• background: Chart background color
• legendSettings: Legend configuration
• zoomSettings: Zoom configuration
• tooltip: Tooltip configuration

Common Use Cases

1. Business Dashboards: Display KPIs, sales trends, revenue comparisons
2. Financial Applications: Stock charts, portfolio performance, technical analysis
3. Analytics Platforms: User behavior, traffic analysis, conversion funnels
4. Scientific Visualization: Experimental data, statistical distributions, correlation analysis
5. Monitoring Systems: Real-time metrics, system performance, IoT data
6. Reporting Tools: Automated reports, data exports, scheduled visualizations
7. Educational Applications: Math graphs, statistics teaching, data science demonstrations

Next Steps

After creating your basic chart:

• Explore different series types for your specific data visualization needs
• Add interactive features like zooming and tooltips for better user experience
• Customize appearance with themes and styling
• Implement data binding for dynamic data sources
• Ensure accessibility compliance for all users
• Export and print capabilities for sharing visualizations

For detailed implementation guidance, refer to the specific reference files listed in the navigation guide above.

API Reference Documentation

📄 Complete API Guide: references/api-reference.md

The Syncfusion Angular Chart component provides 200+ API documentation files covering:

• Core APIs: ChartModel (40+ properties), AxisModel (50+ properties), SeriesDirective (60+ properties)
• Chart Elements: Legend, Markers, Data Labels, Tooltip, Annotations, Trendlines, Technical Indicators, Striplines
• Interactive Features: Zooming, Panning, Crosshair, Selection, Drag Settings
• Events: 40+ event interfaces (ILoadedEventArgs, IPointRenderEventArgs, IZoomingEventArgs, etc.)
• Enumerations: 50+ enums (ChartSeriesType, ValueType, ChartTheme, SelectionMode, ExportType, etc.)
• Utilities: BorderModel, FontModel, MarginModel, AnimationModel, and more

All API documentation is available at https://ej2.syncfusion.com/angular/documentation/api/chart/. See references/api-reference.md for comprehensive API navigation and documentation structure.

Each reference guide (getting-started.md, series-types.md, axes-and-layout.md, etc.) links to the official online API documentation throughout the content.