syncfusion-react-charts

What this skill does

# Implementing Syncfusion React Charts

## When to Use This Skill

Use this skill when you need to:
- Create and render charts (area, bar, column, line, scatter, etc.)
- Configure chart axes and customize their appearance
- Bind local data, remote data (DataManager), or use OData/WebAPI/custom adaptors
- Dynamically add, remove, or replace data points (`addPoint`, `removePoint`, `setData`)
- Customize chart appearance (colors, labels, legends, annotations)
- Configure data labels (must be placed inside `marker.dataLabel`, not directly on the series)
- Implement user interactions (selection, zooming, tooltips)
- Add financial indicators and technical analysis
- Handle accessibility and internationalization
- Troubleshoot chart rendering or data issues

## Component Overview

Syncfusion React Chart is a powerful data visualization component that supports 20+ chart types with extensive customization options. It's designed for building professional dashboards, reports, and analytics applications with interactive features like zooming, selection, and tooltips.

**Key Capabilities:**
- 20+ chart types (cartesian, polar, radar, pie, doughnut, and more)
- Multiple axes (category, numeric, date-time, logarithmic)
- Financial indicators and candlestick charts
- Advanced interactions (zoom, pan, crosshair, tooltip)
- Responsive design and accessibility support
- Print and export functionality

---

## Documentation and Navigation Guide

### API Reference
📄 **Read:** [references/api-reference.md](references/api-reference.md)
- Complete ChartComponent properties reference
- All methods and events documentation
- SeriesDirective properties
- Model interfaces (AxisModel, ZoomSettingsModel, etc.)
- Module services (series types, features, indicators)
- Official API documentation links

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Installation and package setup
- Creating your first chart
- CSS imports and theme configuration
- Rendering basic chart examples
- Package structure overview

### Chart Types
📄 **Read:** [references/chart-types.md](references/chart-types.md)
- Overview of 20+ supported chart types
- When to use each chart type
- Basic examples for common types (Line, Bar, Column, Area, Scatter)
- Type-specific configurations
- Choosing the right chart for your data

### Axes and Customization
📄 **Read:** [references/axes-and-customization.md](references/axes-and-customization.md)
- Category, numeric, date-time, and logarithmic axes
- Axis labels and formatting
- Multiple axes configuration
- Range and interval settings
- Axis crossing and positioning

### Series and Data Binding
📄 **Read:** [references/series-and-data.md](references/series-and-data.md)
- Series configuration and properties
- Local data binding patterns
- Remote data binding using `DataManager`
- Data adaptors: `ODataAdaptor`, `ODataV4Adaptor`, `WebApiAdaptor`, custom adaptors
- Offline mode and lazy loading
- Dynamic data updates via `addPoint`, `removePoint`, `setData`, or React state
- Multiple series handling
- Data validation and edge cases

### Appearance and Styling
📄 **Read:** [references/appearance-and-styling.md](references/appearance-and-styling.md)
- Legend configuration and positioning
- Data labels and formatting
- Chart annotations
- Gradients and color customization
- Title, subtitle, and description styling

### User Interactions
📄 **Read:** [references/user-interaction.md](references/user-interaction.md)
- Selection and highlighting
- Zooming and panning
- Tooltip and crosshair configuration
- Synchronized charts
- Event handling patterns

### Advanced Features
📄 **Read:** [references/advanced-features.md](references/advanced-features.md)
- Financial chart types (candlestick, HLOC, high-low)
- Technical indicators (moving average, trend lines, etc.)
- Multiple panes and indicator panes
- Accessibility (WCAG compliance, keyboard navigation)
- Internationalization and localization

---

## Quick Start Example

```jsx
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, Category, Legend, Tooltip } from '@syncfusion/ej2-react-charts';

export default function BasicChart() {
  const data = [
    { x: 'Jan', y: 35 },
    { x: 'Feb', y: 28 },
    { x: 'Mar', y: 34 },
    { x: 'Apr', y: 32 },
    { x: 'May', y: 40 }
  ];

  return (
    <ChartComponent id='charts'>
      <Inject services={[LineSeries, Category, Legend, Tooltip]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}
```

---

## Common Patterns

### Pattern 1: Multi-Series Chart
When displaying multiple datasets that share the same axes, add multiple `SeriesDirective` components within `SeriesCollectionDirective`:

```jsx
<SeriesCollectionDirective>
  <SeriesDirective dataSource={salesData} xName='month' yName='revenue' type='Column' />
  <SeriesDirective dataSource={profitData} xName='month' yName='profit' type='Column' />
</SeriesCollectionDirective>
```

### Pattern 2: Dynamic Data Updates
Three approaches depending on the use case:

**a) React state (simple re-render):**
```jsx
const [data, setData] = useState(initialData);

const handleDataUpdate = () => {
  setData(prev => [...prev, { x: 'Jun', y: 45 }]);
};

<SeriesDirective dataSource={data} xName='x' yName='y' type='Line' />
```

**b) `addPoint` / `removePoint` / `setData` (imperative, with animation):**
```jsx
const chartRef = useRef(null);

// Add a point
chartRef.current.series[0].addPoint({ x: 'Jun', y: 45 }, 300);

// Remove first point
chartRef.current.series[0].removePoint(0, 300);

// Replace all data
chartRef.current.series[0].setData(newDataArray, 500);

<ChartComponent ref={chartRef} ...>
  <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' />
</ChartComponent>
```

### Pattern 3: Remote Data Binding
Use `DataManager` with an adaptor to bind data from a REST API or OData service:

```jsx
import { DataManager, Query, WebApiAdaptor } from '@syncfusion/ej2-data';

const dataManager = new DataManager({
  url: 'your data source URL link',
  adaptor: new WebApiAdaptor()
});

<SeriesDirective dataSource={dataManager} xName='CustomerID' yName='Freight' type='Column' query={new Query()} />
```

Other adaptors: `ODataAdaptor` (OData v3), `ODataV4Adaptor` (OData v4), custom adaptor by extending `ODataAdaptor`.

### Pattern 4: Data Labels (inside marker)
Data labels **must** be placed inside `marker.dataLabel`, not directly on the series. Inject `DataLabel` service:

```jsx
<Inject services={[LineSeries, Category, DataLabel]} />

<SeriesDirective
  dataSource={data}
  xName='x'
  yName='y'
  type='Line'
  marker={{
    visible: true,
    dataLabel: { visible: true, position: 'Top' }
  }}
/>
```

### Pattern 5: Custom Tooltips
Enhance user experience with formatted tooltip templates:

```jsx
<ChartComponent tooltip={{ enable: true, template: '<div>${point.x}: ${point.y}</div>' }}>
```

### Pattern 6: Responsive Design
Use container styling to make charts responsive:

```jsx
<ChartComponent id='charts' width='100%' height='400px'>
  {/* chart content */}
</ChartComponent>
```

---

## Key Props Reference

### ChartComponent
| Prop | Type | Purpose | When to Use |
|------|------|---------|-----------|
| `id` | string | Unique identifier | Required for each chart |
| `width` | string | Chart width (px or %) | Control layout sizing |
| `height` | string | Chart height | Set explicit dimensions |
| `title` | string | Chart title | Display main heading |
| `tooltip` | object | Tooltip configuration | Interactive data inspection |
| `primaryXAxis` | object | Primary X-axis config | Define horizontal axis |
| `primaryYAxis` | object | Primary Y-axis config | Define vertical axis |

### SeriesDirective
| Prop | Type | Purpose | When to Use |
|------|------|---------|-----------|
| `dataSource` | array \| DataManager | Data source |