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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

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

Advanced Features

📄 Read: references/advanced-features.md [blocked]

• 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 pointchartRef.current.series[0].addPoint({ x: 'Jun', y: 45 }, 300);
// Remove first pointchartRef.current.series[0].removePoint(0, 300);
// Replace all datachartRef.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

Common Use Cases

1. Sales Dashboard: Combine column chart for revenue with line series for trends
2. Time Series Analysis: Use date-time axis with line chart for temporal data
3. Comparative Analysis: Multi-series column charts comparing categories
4. Financial Analysis: Candlestick chart with moving average indicators
5. Distribution Analysis: Histogram or box-whisker charts for statistical data
6. Real-time Monitoring: Use addPoint/removePoint for live feeds with smooth animation
7. Remote Data from REST API: Bind DataManager with WebApiAdaptor or ODataAdaptor directly to series
8. Server-side OData: Use ODataV4Adaptor with a Query to filter and paginate at the server

Next Steps

Choose the reference that matches your current need:

• Need API details? → API Reference [blocked]
• Starting out? → Getting Started [blocked]
• Choosing chart type? → Chart Types [blocked]
• Configuring axes? → Axes and Customization [blocked]
• Binding data? → Series and Data [blocked]
• Styling appearance? → Appearance and Styling [blocked]
• Adding interactions? → User Interactions [blocked]
• Advanced features? → Advanced Features [blocked]

External Resources

• Official API Documentation: https://ej2.syncfusion.com/react/documentation/api/chart/
• Live Demos: https://ej2.syncfusion.com/react/demos/
• GitHub Repository: https://github.com/syncfusion/ej2-react-ui-components