Syncfusion React Charts

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

• 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

• 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

• 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

• 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

• 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

• 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

• Selection and highlighting
• Zooming and panning
• Tooltip and crosshair configuration
• Synchronized charts
• Event handling patterns

Advanced Features

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

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:

<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):

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):

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:

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:

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

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

Pattern 6: Responsive Design

Use container styling to make charts responsive:

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

Key Props Reference

ChartComponent

SeriesDirective