syncfusion-angular-sparkline

What this skill does

# Implementing Syncfusion Angular Sparkline Component

## When to Use This Skill

Use this skill when you need to:
- **Visualize compact data** - Display small time-series datasets inline within tables, grids, or dashboards
- **Add sparkline charts** - Render Line, Column, Area, Pie, or Win-Loss sparklines
- **Enhance data presentation** - Add markers for key points (high, low, start, end, negative)
- **Display metrics inline** - Show data labels and tooltips within sparklines
- **Customize appearance** - Apply themes, styling, accessibility features, or range bands
- **Integrate into existing apps** - Set up the Sparkline module with proper service injection
- **Migrate from legacy** - Move from EJ1 Sparkline to EJ2 Angular Sparkline

## Component Overview

The **Syncfusion Angular Sparkline** is a lightweight data visualization component that displays compact charts in a small space. Sparklines are ideal for:
- Trend indicators within tables or dashboards
- Visual representation of sequential data
- Inline metrics showing performance or changes over time

**Key characteristics:**
- **Compact rendering** - Fits within grid cells or inline metrics
- **Multiple types** - Line, Column, Area, Pie, Win-Loss visualizations
- **Interactive features** - Tooltips, markers, data labels
- **Customizable** - Markers, colors, axis settings, themes
- **Accessible** - WCAG support, keyboard navigation, RTL support

> ⚠️ **CRITICAL: Multiple Sparklines Require Unique IDs**
> 
> When using **more than one sparkline component** on the same page, you **MUST** provide a unique `id` attribute to each sparkline to ensure proper rendering.
> 
> ```html
> <!-- ✓ CORRECT - Unique IDs for multiple sparklines -->
> <ejs-sparkline id="sparkline1" [dataSource]="data1"></ejs-sparkline>
> <ejs-sparkline id="sparkline2" [dataSource]="data2"></ejs-sparkline>
> <ejs-sparkline id="sparkline3" [dataSource]="data3"></ejs-sparkline>
> 
> <!-- ✗ WRONG - No IDs or duplicate IDs causes rendering issues -->
> <ejs-sparkline [dataSource]="data1"></ejs-sparkline>
> <ejs-sparkline [dataSource]="data2"></ejs-sparkline>
> ```
> 
> **Without unique IDs, sparklines may:**
> - Not render at all
> - Render with incorrect data
> - Overlap or conflict with each other
> - Display inconsistent styles

## Documentation and Navigation Guide

This skill guides you through implementing sparklines. Here are the key topics:

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Installation and package setup for Angular 19+
- Basic sparkline component implementation
- Module injection for SparklineTooltipService
- Data binding with dataSource, xName, and yName
- Enabling tooltips and running the application
- When to read: Before implementing your first sparkline

### Sparkline Types
📄 **Read:** [references/sparkline-types.md](references/sparkline-types.md)
- Line type (default, line chart visualization)
- Column type (vertical bar representation)
- Area type (filled area charts)
- Pie type (proportional/compositional data)
- Win-Loss type (binary outcomes: success/failure)
- Type comparison and selection criteria
- When to read: Choose which sparkline type best represents your data

### Markers
📄 **Read:** [references/markers.md](references/markers.md)
- Enabling markers for all points or specific points
- Marker options: All, Start, End, High, Low, Negative
- Customizing marker appearance (fill, border, size, opacity)
- Combining multiple marker types
- When to read: Highlight key data points (peaks, valleys, start/end)

### Data Labels
📄 **Read:** [references/data-labels.md](references/data-labels.md)
- Enabling data labels for specific points
- Label options: All, Start, End, High, Low, Negative
- Customizing label styling (fill, border, text color)
- Formatting label text with custom formats
- Displaying x and y values in labels
- When to read: Add numeric or formatted values directly on the sparkline

### Advanced Features
📄 **Read:** [references/advanced-features.md](references/advanced-features.md)
- Range band visualization (shaded background regions)
- Axis customization (min, max, interval settings)
- User interactions (tooltip configuration, event handling)
- Special points customization (high/low point colors)
- Container sizing and responsive dimensions
- RTL (Right-to-Left) support
- When to read: Implement complex features like range bands, axis control, or events

### Appearance and Accessibility
📄 **Read:** [references/appearance-and-accessibility.md](references/appearance-and-accessibility.md)
- CSS themes and theme switching
- Appearance customization with CSS classes
- Localization (locale-specific formatting)
- WCAG accessibility compliance
- Keyboard navigation support
- Responsive design for different screen sizes
- When to read: Style the sparkline, support multiple locales, or ensure accessibility

### Migration Guide
📄 **Read:** [references/migration-guide.md](references/migration-guide.md)
- Migrating from EJ1 Sparkline to EJ2
- API property mapping and changes
- Breaking changes and deprecated features
- Finding equivalents for legacy functionality
- When to read: You're upgrading from an older Syncfusion version

## Quick Start Example

Here's a minimal example to render a basic sparkline:

```typescript
import { SparklineModule } from '@syncfusion/ej2-angular-charts'
import { Component } from '@angular/core';

@Component({
  imports: [SparklineModule],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-sparkline 
    id='sparkline-container'
    [dataSource]="data"
    xName="x"
    yName="y"
    type="Line">
  </ejs-sparkline>`
})
export class AppComponent {
  data = [
    { x: 'Jan', y: 2 },
    { x: 'Feb', y: 6 },
    { x: 'Mar', y: 4 },
    { x: 'Apr', y: 8 },
    { x: 'May', y: 5 }
  ]
}
```

**Output:** A simple line sparkline showing the trend across months.

## Common Patterns

### Pattern 1: Sparkline in a Table Cell

Embed a sparkline within a grid or table to show trends for each row:

```html
<table>
  <tr>
    <td>Product A</td>
    <td><ejs-sparkline [dataSource]="salesA" type="Column" height="50px" width="150px"></ejs-sparkline></td>
  </tr>
  <tr>
    <td>Product B</td>
    <td><ejs-sparkline [dataSource]="salesB" type="Column" height="50px" width="150px"></ejs-sparkline></td>
  </tr>
</table>
```

### Pattern 2: Highlight Key Points with Markers

Show markers on high and low points to emphasize performance peaks:

```typescript
@Component({
  template: `<ejs-sparkline 
    [dataSource]="data"
    type="Line"
    [markerSettings]="markerSettings">
  </ejs-sparkline>`
})
export class HighlightComponent {
  data = [10, 25, 15, 35, 20, 30]
  markerSettings = {
    visible: ['High', 'Low'],
    fill: '#FF5733',
    size: 8,
    opacity: 1
  }
}
```

### Pattern 3: Add Tooltip for Details

Enable tooltip to show exact values on hover with custom formatting:

```typescript
import { SparklineModule, SparklineTooltipService } from '@syncfusion/ej2-angular-charts'

@Component({
  imports: [SparklineModule],
  standalone: true,
  providers: [SparklineTooltipService],
  template: `<ejs-sparkline 
    [dataSource]="data"
    xName="month"
    yName="sales"
    [tooltipSettings]="tooltipSettings">
  </ejs-sparkline>`
})
export class TooltipComponent {
  data = [
    { month: 'Jan', sales: 10000 },
    { month: 'Feb', sales: 15000 }
  ]
  tooltipSettings = { 
    visible: true,
    format: '${month}: ${sales} units'
  }
}
```

### Pattern 4: Range Bands for Thresholds

Display shaded regions to show acceptable performance ranges:

```typescript
@Component({
  template: `<ejs-sparkline 
    [dataSource]="data"
    type="Area"
    [rangeBandSettings]="rangeBandSettings">
  </ejs-sparkline>`
})
export class RangeBandComponent {
  data = [20, 30, 25, 35, 28, 32, 40]
  rangeBandSettings = [
    { startRange: 25, endRange: 35, color: '#90EE90', opacity: 0.3 },  // Good range
    { startRange: 15, endRange: 25, colo