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

---

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
• Starting out? → Getting Started
• Choosing chart type? → Chart Types
• Configuring axes? → Axes and Customization
• Binding data? → Series and Data
• Styling appearance? → Appearance and Styling
• Adding interactions? → User Interactions
• Advanced features? → Advanced Features

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

Advanced Features

Financial Chart Types

Candlestick Chart (OHLC)

Use for stock market data displaying Open, High, Low, and Close values.

import { CandleSeries } from '@syncfusion/ej2-react-charts';

const stockData = [
  { date: '2024-01-01', open: 100, high: 105, low: 98, close: 103 },
  { date: '2024-01-02', open: 103, high: 108, low: 101, close: 107 }
];

<ChartComponent
  primaryXAxis={{
    valueType: 'DateTime',
    intervalType: 'Days'
  }}
>
  <Inject services={[CandleSeries]} />
  <SeriesCollectionDirective>
    <SeriesDirective
      dataSource={stockData}
      xName='date'
      low='low'
      high='high'
      open='open'
      close='close'
      type='Candle'
    />
  </SeriesCollectionDirective>
</ChartComponent>

When to use:

• Stock price analysis
• Currency pairs
• Financial instruments

HLOC Chart (High-Low-Open-Close)

Alternative representation of OHLC data:

<SeriesDirective
  dataSource={stockData}
  type='HighLowOpenClose'
  xName='date'
  low='low'
  high='high'
  open='open'
  close='close'
/>

HiLo Chart (High-Low)

Simplified version showing only high and low values:

<SeriesDirective
  dataSource={data}
  type='HiLo'
  xName='date'
  low='low'
  high='high'
/>

---

Technical Indicators

Add moving averages, trend lines, and other technical analysis overlays.

Trendlines

import { Trendlines } from '@syncfusion/ej2-react-charts';

<ChartComponent>
  <Inject services={[LineSeries, Trendlines]} />
  <SeriesCollectionDirective>
    <SeriesDirective
      dataSource={data}
      type='Line'
      trendlines={[{
        type: 'MovingAverage',
        period: 20, // 20-day moving average
        name: 'MA20',
        fill: '#FF6B6B',
        width: 2
      }]}
    />
  </SeriesCollectionDirective>
</ChartComponent>

Trendline types:

• Linear: Best-fit line
• Exponential: Exponential curve
• Logarithmic: Logarithmic fit
• Polynomial: Polynomial regression
• Power: Power function
• MovingAverage: Simple moving average

Technical Indicators (EMA, SMA, RSI, MACD, etc.)

Use dedicated indicator modules for financial analysis:

import {
  ChartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  IndicatorsDirective,
  IndicatorDirective,
  Inject,
  CandleSeries,
  Category,
  Tooltip,
  Crosshair,
  Zoom,
  EmaIndicator,
  SmaIndicator,
  RsiIndicator,
  MacdIndicator,
  AtrIndicator,
  MomentumIndicator,
  StochasticIndicator,
  BollingerBands,
  TmaIndicator,
  AccumulationDistributionIndicator
} from '@syncfusion/ej2-react-charts';

// Example: RSI Indicator
<ChartComponent
  rows={[
    { height: '70%' },
    { height: '30%' }
  ]}
  axes={[
    { name: 'priceAxis', rowIndex: 0 },
    { name: 'rsiAxis', rowIndex: 1, minimum: 0, maximum: 100 }
  ]}
>
  <Inject services={[
    CandleSeries,
    Category,
    Tooltip,
    Crosshair,
    Zoom,
    RsiIndicator
  ]} />
  
  <SeriesCollectionDirective>
    <SeriesDirective
      dataSource={stockData}
      type='Candle'
      xName='date'
      low='low'
      high='high'
      open='open'
      close='close'
      yAxisName='priceAxis'
    />
  </SeriesCollectionDirective>
  
  <IndicatorsDirective>
    <IndicatorDirective
      type='Rsi'
      field='Close'
      yAxisName='rsiAxis'
      period={14}
      fill='#6063ff'
      upperLine={{ color: '#e74c3c' }}
      lowerLine={{ color: '#2ecc71' }}
    />
  </IndicatorsDirective>
</ChartComponent>

Available Technical Indicators

Trend Indicators:

• EMA (Exponential Moving Average): EmaIndicator
• SMA (Simple Moving Average): SmaIndicator
• TMA (Triangular Moving Average): TmaIndicator

Momentum Indicators:

• RSI (Relative Strength Index): RsiIndicator
• Momentum: MomentumIndicator
• Stochastic: StochasticIndicator

Volatility Indicators:

• ATR (Average True Range): AtrIndicator
• Bollinger Bands: BollingerBands

Volume Indicators:

• Accumulation Distribution: AccumulationDistributionIndicator

Composite Indicators:

• MACD (Moving Average Convergence Divergence): MacdIndicator

MACD Indicator Example

<ChartComponent
  rows={[
    { height: '60%' },
    { height: '40%' }
  ]}
>
  <Inject services={[CandleSeries, MacdIndicator, Category]} />
  
  <SeriesCollectionDirective>
    <SeriesDirective
      dataSource={stockData}
      type='Candle'
      xName='date'
      low='low'
      high='high'
      open='open'
      close='close'
    />
  </SeriesCollectionDirective>
  
  <IndicatorsDirective>
    <IndicatorDirective
      type='Macd'
      field='Close'
      fastPeriod={12}
      slowPeriod={26}
      signalPeriod={9}
      macdLine={{ color: '#ff6347', width: 2 }}
      signalLine={{ color: '#00ff7f', width: 2 }}
    />
  </IndicatorsDirective>
</ChartComponent>

Bollinger Bands Example

<ChartComponent>
  <Inject services={[LineSeries, BollingerBands, Category]} />
  
  <SeriesCollectionDirective>
    <SeriesDirective
      dataSource={stockData}
      type='Line'
      xName='date'
      yName='close'
    />
  </SeriesCollectionDirective>
  
  <IndicatorsDirective>
    <IndicatorDirective
      type='BollingerBands'
      field='Close'
      period={20}
      standardDeviation={2}
      upperLine={{ color: '#ffb74d', width: 1 }}
      lowerLine={{ color: '#e91e63', width: 1 }}
    />
  </IndicatorsDirective>
</ChartComponent>

Linear Regression

<SeriesDirective
  trendlines={[{
    type: 'Linear',
    name: 'Trend',
    width: 2,
    fill: '#3B82F6'
  }]}
/>

Polynomial Regression

<SeriesDirective
  trendlines={[{
    type: 'Polynomial',
    polynomialOrder: 3, // cubic fit
    name: 'Polynomial Fit',
    fill: '#FF6B6B'
  }]}
/>

---

Multiple Panes

Split chart into multiple sections for comparing different scales or time periods.

Two-Pane Financial Chart

<ChartComponent
  rows={[
    { height: '70%' }, // price pane
    { height: '30%' }  // volume pane
  ]}
  axes={[
    {
      name: 'priceYAxis',
      rowIndex: 0,
      valueType: 'Double',
      title: 'Price ($)',
      labelFormat: '${value}'
    },
    {
      name: 'volumeYAxis',
      rowIndex: 1,
      valueType: 'Double',
      title: 'Volume (M)',
      labelFormat: '{value}M'
    }
  ]}
>
  <SeriesCollectionDirective>
    {/* Price series in top pane */}
    <SeriesDirective
      dataSource={stockData}
      type='Candle'
      yAxisName='priceYAxis'
      xName='date'
      low='low'
      high='high'
      open='open'
      close='close'
    />
    
    {/* Volume series in bottom pane */}
    <SeriesDirective
      dataSource={stockData}
      type='Column'
      yAxisName='volumeYAxis'
      xName='date'
      yName='volume'
      fill='#90CAF9'
    />
  </SeriesCollectionDirective>
</ChartComponent>

Column-Based Layout

<ChartComponent
  columns={[
    { width: '60%' },
    { width: '40%' }
  ]}
  axes={[
    { name: 'leftAxis', columnIndex: 0, ... },
    { name: 'rightAxis', columnIndex: 1, ... }
  ]}
>
  {/* series for left and right panes */}
</ChartComponent>

---

Accessibility

Ensure charts are usable by everyone, including people with disabilities.

WCAG Compliance

<ChartComponent
  accessibility={{
    tabIndex: 0,
    accessibilityRole: 'region',
    accessibilityDescription: 'Shows monthly sales data from January to December 2024'
  }}
  title='Sales Performance'
  width='100%'
  height='400px'
>
  {/* chart */}
</ChartComponent>

Keyboard Navigation

Enable keyboard access:

We do not expose a dedicated API like allowKeyboardInteraction for keyboard navigation. The desired navigation behavior is achieved through standard Tab and arrow key actions.

<ChartComponent
  selectionMode='Point'
>
  {/* Use arrow keys to select points, Enter to interact */}
</ChartComponent>

Color Contrast

Use high-contrast color palettes:

<ChartComponent
  palettes={[
    '#000000', // black
    '#FFFFFF', // white
    '#FFFF00'  // yellow
  ]}
>
  {/* Avoid red/green only differentiation */}
</ChartComponent>

Alt Text and Descriptions

<ChartComponent
  title='Q1 Revenue'
  subTitle='$500K total revenue across all regions'
  accessibility={{
    accessibility: 'Shows monthly sales data from January to December 2024'
  }}
>
  {/* Provide context in title/subtitle */}
</ChartComponent>

Print Functionality

const chartRef = useRef(null);

const handlePrint = () => {
  chartRef.current?.print();
};

<ChartComponent
  ref={chartRef}
  title='Chart for Printing'
>
  {/* Chart */}
</ChartComponent>

---

Internationalization (i18n)

Support multiple languages and locales.

Locale Configuration

import { L10n } from '@syncfusion/ej2-base';

// Define locale strings
L10n.load({
  'de': {
    'charts': {
      'Click': 'Klicken Sie',
      'ZoomIn': 'Vergrößern',
      'ZoomOut': 'Verkleinern',
      'Reset': 'Zurücksetzen'
    }
  }
});

<ChartComponent locale='de'>
  {/* Chart in German */}
</ChartComponent>

Date Formatting by Locale

<ChartComponent
  primaryXAxis={{
    valueType: 'DateTime',
    intervalType: 'Months',
    labelFormat: 'MMMM', // localizes month names automatically
  }}
>
  {/* Chart */}
</ChartComponent>

Number Formatting by Locale

<SeriesDirective
  dataLabel={{
    visible: true,
    format: 'n2' // formats based on locale (1,234.56 vs 1.234,56)
  }}
/>

---

Export and Print

Save charts as images or PDF.

Export to Image

⚠️ Important: The Export service must be imported and injected into the chart for exporting to work. Without this, the export functionality will be unavailable.

import { Export } from '@syncfusion/ej2-react-charts';

const chartRef = useRef(null);

const handleExport = () => {
  chartRef.current?.export('PNG', 'chart');
};

<ChartComponent ref={chartRef} export={{
  enabled: true,
  type: 'PNG'
}}>
  <Inject services={[Export]} />
  {/* Chart */}
</ChartComponent>

Export formats:

• PNG, JPEG, SVG: Raster/vector images
• PDF: PDF document
• XLSX, CSV: Data export

Export to PDF

const handlePDFExport = () => {
  chartRef.current?.export('PDF', 'chart', 'Landscape');
};

Print Chart

const handlePrint = () => {
  chartRef.current?.print();
};

<button onClick={handlePrint}>Print Chart</button>

---

Real-Time Data Updates

Efficiently update chart data for live feeds.

Streaming Data Pattern

const [data, setData] = useState(initialData);
const dataRef = useRef(data);

useEffect(() => {
  const subscription = liveDataStream.subscribe((newPoint) => {
    dataRef.current = [...dataRef.current, newPoint];
    
    // Keep last 100 points
    if (dataRef.current.length > 100) {
      dataRef.current.shift();
    }
    
    setData([...dataRef.current]);
  });

  return () => subscription.unsubscribe();
}, []);

<SeriesDirective dataSource={data} />

Rendering Options

Canvas Rendering

Enables canvas-based rendering for improved performance with large datasets.

<ChartComponent enableCanvas={true}>
  {/* chart - better performance for large datasets */}
</ChartComponent>

RTL Support

Enables right-to-left layout rendering for RTL languages.

<ChartComponent enableRtl={true}>
  {/* Right-to-left rendering */}
</ChartComponent>

Transposed Chart

Swaps the X and Y axes to change the chart orientation.

<ChartComponent isTransposed={true}>
  {/* Swap X and Y axes orientation */}
</ChartComponent>

Side-by-Side Placement

<ChartComponent enableSideBySidePlacement={true}>
  {/* Column/Bar series side-by-side */}
</ChartComponent>

HTML Sanitization

<ChartComponent enableHtmlSanitizer={true}>
  {/* Sanitize HTML in templates/annotations */}
</ChartComponent>

---

Custom Rendering

Override default rendering for complete control.

Custom Series Rendering

<SeriesDirective
  pointRender={(args) => {
    // Customize each point
    if (args.point.y > 100) {
      args.fill = '#4CAF50';
      args.pointSize = 10;
    } else if (args.point.y < 50) {
      args.fill = '#F44336';
    }
  }}
/>

Template-Based Rendering

<SeriesDirective
  type='Column'
   marker={{
    dataLabel: {
      visible: true,
      template: `<div style="background:#fff;border:1px solid #333;padding:2px 6px;">${point.x}: ${point.y}</div>`
    }
  }}
/>

---

Performance Optimization

Large Dataset Handling

// Use category axis for performance
<ChartComponent
  primaryXAxis={{
    valueType: 'Category' // faster than DateTime for large datasets
  }}
>
  {/* Chart */}
</ChartComponent>

// Aggregate data before visualization
const aggregatedData = data.reduce((acc, item) => {
  const date = item.date.toDateString();
  const existing = acc.find(d => d.date === date);
  
  if (existing) {
    existing.value += item.value;
  } else {
    acc.push({ date, value: item.value });
  }
  
  return acc;
}, []);

Debounce Updates

const [data, setData] = useState([]);

useEffect(() => {
  const timeoutId = setTimeout(() => {
    setData(newData);
  }, 300); // Debounce rapid updates

  return () => clearTimeout(timeoutId);
}, [newData]);

---

Responsive Design

Make charts adapt to screen size.

Fluid Layout

<ChartComponent
  width='100%'
  height='400px'
>
  {/* Chart fills container width */}
</ChartComponent>

Media Query Adjustments

useEffect(() => {
  const handleResize = () => {
    if (window.innerWidth < 768) {
      setChartConfig({
        height: '300px',
        legendSettings: { position: 'Bottom' }
      });
    } else {
      setChartConfig({
        height: '500px',
        legendSettings: { position: 'Right' }
      });
    }
  };

  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

---

Common Advanced Patterns

Pattern 1: Dashboard with Multiple Charts

export default function Dashboard() {
  return (
    <div className='grid grid-cols-2 gap-4'>
      <ChartComponent>
        {/* Revenue chart */}
      </ChartComponent>
      <ChartComponent>
        {/* Profit chart */}
      </ChartComponent>
      <ChartComponent>
        {/* Growth chart */}
      </ChartComponent>
      <ChartComponent>
        {/* Comparison chart */}
      </ChartComponent>
    </div>
  );
}

Pattern 2: Drill-Down with Multiple Levels

const [level, setLevel] = useState('year'); // year → month → day

const data = useMemo(() => {
  switch (level) {
    case 'year': return yearlyData;
    case 'month': return monthlyData;
    case 'day': return dailyData;
  }
}, [level]);

const handlePointClick = (args) => {
  setLevel(level === 'year' ? 'month' : 'day');
};

<ChartComponent chartMouseClick={handlePointClick}>
  <SeriesDirective dataSource={data} />
</ChartComponent>

Pattern 3: Combined Technical Analysis

<ChartComponent>
  <SeriesCollectionDirective>
    {/* Candlestick for price */}
    <SeriesDirective
      type='Candle'
      trendlines={[
        { type: 'MovingAverage', period: 20 },
        { type: 'MovingAverage', period: 50 }
      ]}
    />
    
    {/* RSI indicator on separate pane */}
  </SeriesCollectionDirective>
</ChartComponent>

---

Troubleshooting Advanced Features

---

Strip Lines

Add reference lines or bands to highlight specific ranges:

import { StripLine } from '@syncfusion/ej2-react-charts';

<ChartComponent
  primaryYAxis={{
    stripLines: [
      {
        start: 30,
        end: 40,
        color: 'rgba(255, 0, 0, 0.1)',
        text: 'Target Range',
        textStyle: {
          size: '12px',
          color: '#ff0000'
        }
      },
      {
        start: 50,
        size: 0,
        color: '#ff0000',
        dashArray: '5,5',
        text: 'Threshold'
      }
    ]
  }}
>
  <Inject services={[LineSeries, Category, StripLine]} />
  {/* chart content */}
</ChartComponent>

---

Multi-Level Labels

Create hierarchical axis labels:

import { MultiLevelLabel } from '@syncfusion/ej2-react-charts';

<ChartComponent
  primaryXAxis={{
    valueType: 'Category',
    multiLevelLabels: [
      {
        categories: [
          { start: 'Jan', end: 'Mar', text: 'Q1' },
          { start: 'Apr', end: 'Jun', text: 'Q2' },
          { start: 'Jul', end: 'Sep', text: 'Q3' },
          { start: 'Oct', end: 'Dec', text: 'Q4' }
        ]
      }
    ]
  }}
>
  <Inject services={[ColumnSeries, Category, MultiLevelLabel]} />
  {/* chart content */}
</ChartComponent>

---

API Reference

For complete details on advanced features:

• Advanced Features API: https://ej2.syncfusion.com/react/documentation/api/chart/overview
• Technical Indicators: https://ej2.syncfusion.com/react/documentation/api/chart/technicalindicatormodel
• Trendlines: https://ej2.syncfusion.com/react/documentation/api/chart/trendline
• Annotations: https://ej2.syncfusion.com/react/documentation/api/chart/chartannotationsettingsmodel

````markdown

API Reference

Table of Contents

• ChartComponent Properties
• ChartComponent Methods
• ChartComponent Events
• SeriesDirective Properties
• Common Model Interfaces
• Module Services

---

ChartComponent Properties

Complete reference for ChartComponent properties based on the official Syncfusion EJ2 React Charts API.

Core Configuration

Axes Configuration

Data and Series

Styling

Interaction Features

Zoom Configuration

Legend

Tooltip and Crosshair

Annotations

Technical Indicators

Accessibility

Display Options

Export and Print

State Management

Stack Labels

No Data Template

---

ChartComponent Methods

Methods available on the ChartComponent instance via refs.

Chart Manipulation

const chartRef = useRef(null);

// Access methods via chartRef.current

Display Methods

Export and Print

Annotations

Utility Methods

---

ChartComponent Events

Event handlers for chart interactions and lifecycle.

Lifecycle Events

Rendering Events

Animation Events

Mouse Events

Point Events

Axis Events

Legend Events

Selection Events

Zoom Events

Scroll Events

Drag Events (Data Editing)

Export/Print Events

---

SeriesDirective Properties

Properties for configuring individual chart series.

Core Series Properties

Axis Assignment

Financial Data Properties

Bubble/Range Properties

Styling

Markers

Data Labels

Data labels are configured inside the `marker` property using marker.dataLabel. Inject the DataLabel service to enable this feature.

Trendlines

Empty Points

Color Mapping

Remote Data

---

SeriesDirective Methods

Methods available directly on a series instance (accessed via chartRef.current.series[index]).

addPoint Example

// Append a new point with 300ms animation
chartRef.current.series[0].addPoint({ month: 'Jun', value: 45 }, 300);

removePoint Example

// Remove the first point (index 0) with 300ms animation
chartRef.current.series[0].removePoint(0, 300);

setData Example

const newData = [{ month: 'Apr', value: 50 }, { month: 'May', value: 60 }];
// Replace all data with 500ms animation
chartRef.current.series[0].setData(newData, 500);

---

Common Model Interfaces

Key model interfaces used in chart configuration.

AxisModel

interface AxisModel {
  valueType?: 'Category' | 'Numeric' | 'DateTime' | 'Logarithmic';
  title?: string;
  titleStyle?: FontModel;
  labelFormat?: string;
  labelRotation?: number;
  minimum?: number;
  maximum?: number;
  interval?: number;
  intervalType?: 'Auto' | 'Years' | 'Months' | 'Days' | 'Hours' | 'Minutes' | 'Seconds';
  majorGridLines?: { width?: number; color?: string; dashArray?: string };
  minorGridLines?: { width?: number; color?: string };
  majorTickLines?: { width?: number; size?: number; color?: string };
  minorTickLines?: { visible?: boolean; width?: number; size?: number };
  opposedPosition?: boolean;
  crossesAt?: number;
  labelIntersectAction?: 'None' | 'Hide' | 'Rotate45' | 'Rotate90' | 'Wrap' | 'MultipleRows';
  edgelabelPlacement?: 'None' | 'Hide' | 'Shift';
}

ZoomSettingsModel

interface ZoomSettingsModel {
  enableSelectionZoom?: boolean;
  enablePinchZooming?: boolean;
  enableMouseWheelZooming?: boolean;
  enableDeferredZoom?: boolean;
  mode?: 'X' | 'Y' | 'XY';
  toolbarItems?: ('ZoomIn' | 'ZoomOut' | 'Reset' | 'Pan')[];
}

TooltipSettingsModel

interface TooltipSettingsModel {
  enable?: boolean;
  shared?: boolean;
  enableMarker?: boolean;
  format?: string;
  template?: string | Function;
  fill?: string;
  border?: BorderModel;
  opacity?: number;
}

LegendSettingsModel

interface LegendSettingsModel {
  visible?: boolean;
  position?: 'Top' | 'Bottom' | 'Left' | 'Right' | 'Custom';
  alignment?: 'Near' | 'Center' | 'Far';
  toggleVisibility?: boolean;
  background?: string;
  border?: BorderModel;
  padding?: number;
  margin?: MarginModel;
}

MarkerSettingsModel

interface MarkerSettingsModel {
  visible?: boolean;
  shape?: 'Circle' | 'Square' | 'Diamond' | 'Triangle' | 'Pentagon' | 'Cross' | 'Plus';
  width?: number;
  height?: number;
  fill?: string;
  border?: BorderModel;
}

CrosshairSettingsModel

interface CrosshairSettingsModel {
  enable?: boolean;
  lineType?: 'Vertical' | 'Horizontal' | 'Both';
  line?: { width?: number; color?: string; dashArray?: string };
  lineStyle?: { width?: number; color?: string; dashArray?: string };
}

---

Module Services

Services that must be injected via <Inject services={[...]} /> to enable features.

Chart Series Types

import {
  LineSeries,
  ColumnSeries,
  BarSeries,
  AreaSeries,
  ScatterSeries,
  BubbleSeries,
  StepLineSeries,
  StepAreaSeries,
  SplineSeries,
  SplineAreaSeries,
  PolarSeries,
  RadarSeries,
  CandleSeries,
  HiloSeries,
  HiloOpenCloseSeries,
  RangeColumnSeries,
  RangeAreaSeries,
  RangeStepAreaSeries,
  SplineRangeAreaSeries,
  StackingColumnSeries,
  StackingBarSeries,
  StackingAreaSeries,
  StackingLineSeries,
  StackingStepAreaSeries,
  WaterfallSeries,
  BoxAndWhiskerSeries,
  HistogramSeries,
  ParetoSeries,
  MultiColoredLineSeries,
  MultiColoredAreaSeries
} from '@syncfusion/ej2-react-charts';

Axis Types

import {
  Category,
  DateTime,
  DateTimeCategory,
  Logarithmic
} from '@syncfusion/ej2-react-charts';

Features

import {
  Legend,
  Tooltip,
  Crosshair,
  Selection,
  Highlight,
  Zoom,
  DataLabel,
  Export,
  ChartAnnotation,
  ErrorBar,
  Trendlines,
  StripLine,
  MultiLevelLabel,
  ScrollBar,
  DataEditing
} from '@syncfusion/ej2-react-charts';

Technical Indicators

import {
  EmaIndicator,
  SmaIndicator,
  TmaIndicator,
  MacdIndicator,
  AtrIndicator,
  RsiIndicator,
  MomentumIndicator,
  StochasticIndicator,
  BollingerBands,
  AccumulationDistributionIndicator
} from '@syncfusion/ej2-react-charts';

---

Usage Example with API References

import React, { useRef } from 'react';
import {
  ChartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  LineSeries,
  ColumnSeries,
  Category,
  Legend,
  Tooltip,
  Zoom,
  Selection,
  DataLabel
} from '@syncfusion/ej2-react-charts';

export default function APIExampleChart() {
  const chartRef = useRef(null);

  const data = [
    { month: 'Jan', sales: 35, profit: 8 },
    { month: 'Feb', sales: 28, profit: 6 },
    { month: 'Mar', sales: 34, profit: 7 }
  ];

  const handleExport = () => {
    chartRef.current?.export('PNG', 'my-chart');
  };

  return (
    <>
      <button onClick={handleExport}>Export Chart</button>
      <ChartComponent
        ref={chartRef}
        id='api-chart'
        width='100%'
        height='400px'
        title='Sales Performance'
        primaryXAxis={{
          valueType: 'Category',
          labelFormat: '{value}',
          majorGridLines: { width: 0 }
        }}
        primaryYAxis={{
          labelFormat: '${value}K',
          minimum: 0,
          maximum: 50,
          interval: 10
        }}
        tooltip={{
          enable: true,
          shared: true,
          format: '${series.name}: ${point.y}'
        }}
        legendSettings={{
          visible: true,
          position: 'Top'
        }}
        zoomSettings={{
          enableSelectionZoom: true,
          enableMouseWheelZooming: true,
          mode: 'XY'
        }}
        selectionMode='Point'
        highlightMode='Series'
        enableAnimation={true}
        palettes={['#3B82F6', '#10B981']}
        pointRender={(args) => {
          if (args.point.y > 30) {
            args.fill = '#4CAF50';
          }
        }}
        loaded={(args) => {
          console.log('Chart loaded successfully');
        }}
      >
        <Inject services={[
          LineSeries,
          ColumnSeries,
          Category,
          Legend,
          Tooltip,
          Zoom,
          Selection,
          DataLabel
        ]} />
        
        <SeriesCollectionDirective>
          <SeriesDirective
            dataSource={data}
            xName='month'
            yName='sales'
            name='Sales'
            type='Column'
            fill='#3B82F6'
            opacity={0.85}
            cornerRadius={{ topLeft: 4, topRight: 4 }}
            marker={{
              dataLabel: {
                visible: true,
                position: 'Top'
              }
            }}
          />
          <SeriesDirective
            dataSource={data}
            xName='month'
            yName='profit'
            name='Profit'
            type='Line'
            width={2}
            marker={{
              visible: true,
              shape: 'Circle',
              width: 8,
              height: 8,
              dataLabel: { visible: false }
            }}
          />
        </SeriesCollectionDirective>
      </ChartComponent>
    </>
  );
}

---

Official API Documentation

For the most up-to-date and complete API reference, visit:

• ChartComponent API: https://ej2.syncfusion.com/react/documentation/api/chart/
• SeriesModel API: https://ej2.syncfusion.com/react/documentation/api/chart/seriesmodel
• AxisModel API: https://ej2.syncfusion.com/react/documentation/api/chart/axismodel

---

Quick Reference Checklist

When using Syncfusion React Charts, ensure you:

✅ Import required modules (ChartComponent, SeriesDirective, etc.) ✅ Inject necessary services (LineSeries, Category, Legend, etc.) ✅ Set unique id on ChartComponent ✅ Configure primaryXAxis and primaryYAxis ✅ Map data with dataSource, xName, and yName ✅ Specify series type ✅ Add event handlers for interactions ✅ Enable features via settings (tooltip, zoom, legend, etc.)

````

Appearance and Styling

Table of Contents

• Color and Fill
• Legend Configuration
• Data Labels
• Chart Annotations
• Gradients
• Title and Subtitle
• Border and Styling
• Theme Customization

---

Color and Fill

Series Color

Set series fill color:

<SeriesDirective
  fill='#3B82F6'
  type='Column'
  ...
/>

Supported formats:

• Hex: '#3B82F6'
• RGB: 'rgb(59, 130, 246)'
• Named colors: 'blue', 'red', 'green'

Palette Colors

Use predefined color palettes:

<ChartComponent
  palettes={['#FF5733', '#33FF57', '#3357FF']}
>
  {/* series will cycle through these colors */}
</ChartComponent>

Built-in palettes:

• Material (default)
• Fabric
• Bootstrap
• HighContrast
• Palette1, Palette2, etc.

Point-Level Colors (Conditional)

const data = [
  { month: 'Jan', value: 35, color: '#4CAF50' },
  { month: 'Feb', value: 28, color: '#F44336' }
];

<SeriesDirective
  dataSource={data}
  pointColorMapping='color' // use data's color property
  ...
/>

---

Legend Configuration

Legends identify series and allow user interaction.

Basic Legend

<ChartComponent
  legendSettings={{
    visible: true,
    position: 'Right' // Top, Bottom, Left, Right, Custom
  }}
>
  {/* chart */}
</ChartComponent>

Legend Customization

<ChartComponent
  legendSettings={{
    visible: true,
    position: 'Top',
    alignment: 'Center', // Far, Center, Near
    background: 'white',
    border: {
      color: '#cccccc',
      width: 1
    },
    padding: 10,
    margin: {
      left: 10,
      right: 10,
      top: 10,
      bottom: 10
    },
    labelPosition: 'After', // Before, After
    enablePages: true, // pagination for many series
    maximumLabelWidth: 100
  }}
>
  {/* chart */}
</ChartComponent>

Interactive Legend

<ChartComponent
  legendSettings={{
    visible: true,
    toggleVisibility: true // click to hide/show series
  }}
>
  {/* chart */}
</ChartComponent>

Series Name in Legend

<SeriesDirective
  name='Monthly Revenue'
  // This name appears in legend
  type='Column'
  ...
/>

---

Data Labels

Display values directly on chart points/bars/columns. Data labels are configured inside the marker property of SeriesDirective using the dataLabel key. Inject the DataLabel service to enable this feature.

Basic Data Labels

import { DataLabel } from '@syncfusion/ej2-react-charts';

<ChartComponent id='charts' primaryXAxis={{ valueType: 'Category' }}>
  <Inject services={[ColumnSeries, Category, DataLabel]} />
  <SeriesCollectionDirective>
    <SeriesDirective
      dataSource={data}
      xName='month'
      yName='sales'
      type='Column'
      marker={{
        dataLabel: {
          visible: true,
          position: 'Top' // Top, Bottom, Middle, Outer
        }
      }}
    />
  </SeriesCollectionDirective>
</ChartComponent>

Position options:

• Top, Bottom, Left, Right: Around the point
• Middle: Inside the point (column/bar)
• Outer: Outside the point (line/area/scatter)

Data Label Template

Use an HTML template string for fully custom label content:

<SeriesDirective
  dataSource={data}
  xName='month'
  yName='sales'
  type='Column'
  marker={{
    dataLabel: {
      visible: true,
      template: `<div style="background:#fff;border:1px solid #333;padding:2px 6px;">${point.x}: ${point.y}</div>`
    }
  }}
/>

Available template variables:

• ${point.x}: X value
• ${point.y}: Y value
• ${point.text}: Formatted point text
• ${series.name}: Series name
• ${point.percentage}: Percentage (for pie/doughnut charts)

Formatted Data Labels

Use the format property for simple value formatting:

<SeriesDirective
  dataSource={data}
  xName='month'
  yName='sales'
  type='Column'
  marker={{
    dataLabel: {
      visible: true,
      format: '${value}K'  // appends 'K' after the value
    }
  }}
/>

Data Label Styling

Customize font and spacing inside marker.dataLabel:

<SeriesDirective
  dataSource={data}
  xName='month'
  yName='sales'
  type='Line'
  marker={{
    visible: true,
    width: 8,
    height: 8,
    dataLabel: {
      visible: true,
      position: 'Top',
      font: {
        fontFamily: 'Arial',
        fontStyle: 'Normal',
        fontWeight: 'Bold',
        size: '12px',
        color: '#000000'
      },
      margin: {
        left: 2,
        right: 2,
        top: 2,
        bottom: 2
      }
    }
  }}
/>

Data Label with Marker (Line/Scatter)

For line and scatter series, combine marker.visible with marker.dataLabel to show both point markers and labels simultaneously:

<SeriesDirective
  dataSource={data}
  xName='month'
  yName='sales'
  type='Line'
  width={2}
  marker={{
    visible: true,         // show dot markers
    shape: 'Circle',
    width: 8,
    height: 8,
    dataLabel: {           // also show data labels
      visible: true,
      position: 'Top'
    }
  }}
/>

Series Labels

Series labels display the series name directly on the chart near the last visible data point, reducing the need to refer to the legend. They can be enabled using the labelSettings property in the SeriesDirective. This property works independently and does not depend on data label imports.

import { SeriesLabel } from '@syncfusion/ej2-react-charts';

<SeriesDirective
  dataSource={data}
  xName='month'
  yName='sales'
  type='Line'
  name='Revenue'
  labelSettings= {{ visible: true, background: 'green', showOverlapText: true, font: {size: '16px' }}}
/>

Note Module should be injected like data label.

Available Customization Option for Series Labels

• text - Specifies custom label text.
• font - Controls the label’s text styling.
• background - Sets a background color for the label container.
• border - Defines the border around the label container.
• opacity - Adjusts label transparency.
• showOverlapText - if set true, show label even collide with chart elements.

Last Value Labels

Highlight the final data point of each series with a special label and optional indicator line. Useful for emphasizing the latest value/trend in line, area, or similar series.

import { LastValueLabel } from '@syncfusion/ej2-react-charts';

<SeriesDirective
  dataSource={data}
  xName='month'
  yName='sales'
  type='Line'
  lastValueLabel={{
    enable: true,
    background: '#3B82F6',
    border: { color: '#ffffff', width: 1 },
    font: { color: '#ffffff', size: '12px' }
    // Additional options: lineColor, lineWidth, dashArray, rx, ry for rounded corners
  }}
/>

Note Module should be injected like data label.

When to use: Time-series or trend charts where the most recent value needs clear visibility (e.g., stock prices, sales performance).

Customization options:

• enable: Set to true to show the last value label.
• Background, border, font styling.
• Indicator line properties (lineColor, lineWidth, dashArray).

---

Chart Annotations

Add text, lines, and shapes to highlight specific areas.

Text Annotation

import { ChartAnnotation } from '@syncfusion/ej2-react-charts';

<ChartComponent>
  <Inject services={[ChartAnnotation]} />
  <AnnotationsDirective>
    <AnnotationDirective
      x='50%'
      y='50%'
      content='<div style="color: red;">Peak Sales</div>'
    />
  </AnnotationsDirective>
</ChartComponent>

Line Annotation

<AnnotationDirective
  type='Line'
  x1='Jan'
  y1={30}
  x2='Dec'
  y2={30}
  lineStyle={{
    color: 'red',
    dashArray: '5,5',
    width: 2
  }}
/>

Image Annotation

<AnnotationDirective
  x='Mar'
  y={35}
  content='<img src="/star.png" width="30" height="30" />'
/>

---

Gradients

Apply gradient fills for visual interest.

Linear Gradient

<SeriesDirective
  fill='url(#linearGradient)'
  type='Column'
/>

{/* Define gradient elsewhere */}
<svg>
  <defs>
    <linearGradient id='linearGradient' x1='0%' y1='0%' x2='0%' y2='100%'>
      <stop offset='0%' stopColor='#FF6B6B' />
      <stop offset='100%' stopColor='#FFE66D' />
    </linearGradient>
  </defs>
</svg>

Gradient via Style

<ChartComponent
  chartArea={{
    backgroundColor: 'linear-gradient(180deg, #FF6B6B 0%, #FFE66D 100%)'
  }}
>
  {/* chart */}
</ChartComponent>

---

Title and Subtitle

Basic Title

<ChartComponent
  title='Sales Dashboard 2024'
  subTitle='Monthly Performance Overview'
>
  {/* chart */}
</ChartComponent>

Title Styling

<ChartComponent
  title='Sales Dashboard'
  titleStyle={{
    fontFamily: 'Segoe UI',
    fontStyle: 'Normal',
    fontWeight: 'Bold',
    size: '18px',
    color: '#333333',
    textAlignment: 'Center'
  }}
  subTitleStyle={{
    fontFamily: 'Segoe UI',
    fontStyle: 'Italic',
    size: '14px',
    color: '#666666'
  }}
>
  {/* chart */}
</ChartComponent>

---

Border and Styling

Chart Border

<ChartComponent
  border={{
    color: '#cccccc',
    width: 2
  }}
>
  {/* chart */}
</ChartComponent>

Chart Area Background

<ChartComponent
  chartArea={{
    border: {
      color: '#e0e0e0',
      width: 1
    },
    backgroundColor: '#fafafa'
  }}
>
  {/* chart */}
</ChartComponent>

Series Border

<SeriesDirective
  border={{
    color: '#333333',
    width: 2
  }}
  type='Column'
/>

Margin and Padding

<ChartComponent
  margin={{
    left: 40,
    right: 40,
    top: 40,
    bottom: 40
  }}
>
  {/* chart */}
</ChartComponent>

---

Theme Customization

Available themes (18+ including dark & high contrast):

• Material, MaterialDark, Material3, Material3Dark
• Fabric, FabricDark
• Bootstrap, BootstrapDark, Bootstrap4, Bootstrap5, Bootstrap5Dark, Bootstrap5.3, Bootstrap5.3Dark
• Tailwind, TailwindDark
• Fluent, FluentDark, Fluent2, Fluent2Dark, Fluent2HighContrast
• HighContrast, HighContrastLight

Switch via the theme prop:

<ChartComponent theme='Material3Dark'>
  {/* chart content */}
</ChartComponent>

Dark Theme

<ChartComponent className='dark-theme'>
  {/* chart */}
</ChartComponent>

dark-theme.css:

.dark-theme .e-chart {
  background-color: #1f2937;
  color: #ffffff;
}

.dark-theme .e-chart-title {
  color: #ffffff;
}

.dark-theme .e-chart-legend {
  background-color: #111827;
}

---

Complete Styled Chart Example

<ChartComponent
  id='styled-chart'
  title='Q1 Sales Performance'
  subTitle='Regional Comparison'
  width='100%'
  height='500px'
  margin={{ left: 40, right: 40, top: 40, bottom: 40 }}
  chartArea={{
    border: { width: 0 },
    backgroundColor: '#fafafa'
  }}
  titleStyle={{
    fontWeight: 'Bold',
    size: '18px',
    color: '#1f2937'
  }}
  subTitleStyle={{
    size: '14px',
    color: '#6b7280'
  }}
  legendSettings={{
    visible: true,
    position: 'Top',
    alignment: 'Center',
    background: 'white'
  }}
  tooltip={{
    enable: true,
    shared: true,
    template: `<div>${point.x}: ${point.y}</div>`
  }}
  primaryXAxis={{
    valueType: 'Category',
    majorGridLines: { width: 0 }
  }}
  primaryYAxis={{
    labelFormat: '${value}K',
    majorGridLines: { color: '#e5e7eb' }
  }}
>
  <Inject services={[ColumnSeries, LineSeries, Category, Legend, Tooltip]} />
  <SeriesCollectionDirective>
    <SeriesDirective
      dataSource={salesData}
      xName='region'
      yName='sales'
      name='Sales'
      type='Column'
      fill='#3B82F6'
      cornerRadius={{ topLeft: 4, topRight: 4 }}
      marker={{
        dataLabel: {
          visible: true,
          position: 'Top',
          font: { fontWeight: 'Bold', size: '12px' }
        }
      }}
    />
    <SeriesDirective
      dataSource={salesData}
      xName='region'
      yName='target'
      name='Target'
      type='Line'
      width={2}
      marker={{
        visible: true,
        width: 8,
        height: 8,
        dataLabel: { visible: false }
      }}
    />
  </SeriesCollectionDirective>
</ChartComponent>

---

Common Styling Patterns

Pattern 1: Professional Dashboard Style

• Clean white background
• Subtle borders and grid
• Bold title, subtle labels
• Responsive sizing

Pattern 2: High-Contrast Accessibility

• High contrast colors (#000 on #FFF or vice versa)
• Large font sizes (14px+)
• Thicker borders and lines
• Avoid color-only differentiation

Pattern 3: Print-Friendly Chart

<ChartComponent
  print={{
    type: 'PDF', // or 'PNG', 'SVG'
    orientation: 'Landscape'
  }}
>
  {/* Simplify colors, ensure good contrast */}
</ChartComponent>

Axes and Customization

Table of Contents

• Overview
• Axis Types
• Primary Axes Configuration
• Secondary Axes
• Axis Labels and Formatting
• Multiple Panes
• Common Patterns

---

Overview

Axes define how your chart interprets and displays data. Syncfusion React Charts supports multiple axis types, each suited for different data formats:

• Category: String or categorical values
• Numeric: Numerical values with mathematical scaling
• DateTime: Date/time values with temporal scaling
• Logarithmic: Exponential scale (useful for wide value ranges)

Most charts have primaryXAxis and primaryYAxis. Financial charts may have additional indicator axes.

---

Axis Types

Category Axis

Use for string-based categorical data (month names, product names, regions, etc.).

<ChartComponent
  primaryXAxis={{ valueType: 'Category' }}
  primaryYAxis={{ valueType: 'Double' }}
>
  {/* series with xName mapping to category values */}
</ChartComponent>

When to use:

• Product comparisons
• Monthly/quarterly data
• Regional breakdowns
• Any discrete, non-numeric categories

Common configurations:

primaryXAxis={{
  valueType: 'Category',
  labelFormat: '{value}',
  majorTickLines: { width: 2 },
  minorTickLines: { width: 1 },
  labelIntersectAction: 'Rotate45' // or 'Wrap', 'MultipleRows'
}}

Numeric Axis

Use for numerical data with automatic scaling and intervals.

<ChartComponent
  primaryXAxis={{ valueType: 'Double' }}
  primaryYAxis={{ valueType: 'Double' }}
>
  {/* scatter or other XY charts */}
</ChartComponent>

When to use:

• Scatter plots
• Correlation analysis
• Weight vs. height comparisons
• Any XY coordinate data

Common configurations:

primaryYAxis={{
  valueType: 'Double',
  minimum: 0,
  maximum: 100,
  interval: 10,
  labelFormat: '${value}K'
}}

DateTime Axis

Use for time-series data with automatic date/time scaling.

<ChartComponent
  primaryXAxis={{
    valueType: 'DateTime',
    intervalType: 'Months', // or 'Years', 'Days', 'Hours'
    interval: 1
  }}
>
  {/* time-based data */}
</ChartComponent>

When to use:

• Stock prices over time
• Website traffic trends
• Sensor readings
• Any time-series analysis

intervalType options: Seconds, Minutes, Hours, Days, Months, Years

Common configurations:

primaryXAxis={{
  valueType: 'DateTime',
  intervalType: 'Days',
  interval: 7, // weekly intervals
  labelFormat: 'MMM dd', // e.g., "Mar 15"
}}

DateTimeCategory Axis

Use for date-time values treated as categories (non-linear intervals, useful for irregular dates like stock market holidays).

<ChartComponent
  primaryXAxis={{
    valueType: 'DateTimeCategory',
    intervalType: 'Months',
    labelFormat: 'MMM yyyy'
  }}
>
  {/* series */}
</ChartComponent>

When to use: Stock or event data with missing dates.

Logarithmic Axis

Use for data with exponential growth or very large value ranges.

<ChartComponent
  primaryYAxis={{
    valueType: 'Logarithmic',
    logBase: 10 // or 2, e, etc.
  }}
>
  {/* data with exponential scale */}
</ChartComponent>

When to use:

• Financial charts (stock growth)
• Scientific data (exponential growth)
• Wide value ranges (1 to 1,000,000)

---

Primary Axes Configuration

The two main axes that define the chart's coordinate system.

Basic Configuration

<ChartComponent
  primaryXAxis={{
    valueType: 'Category',
    labelFormat: '{value}',
    title: 'Months'
  }}
  primaryYAxis={{
    valueType: 'Double',
    labelFormat: '${value}K',
    title: 'Sales Revenue',
    minimum: 0,
    maximum: 100
  }}
>
  {/* chart content */}
</ChartComponent>

Label Formatting

Format axis labels for readability:

// Currency formatting
primaryYAxis={{ labelFormat: '${value}' }}

// Percentage formatting
primaryYAxis={{ labelFormat: '{value}%' }}

// Thousand separators
primaryYAxis={{ labelFormat: '{value:n0}' }} // 1,000

// Decimal places
primaryYAxis={{ labelFormat: '{value:n2}' }} // 1,000.00

// Date formatting
primaryXAxis={{ labelFormat: 'MMM dd' }} // Mar 15

// Scientific notation
primaryYAxis={{ labelFormat: '{value:e2}' }} // 1.23e+5

Axis Range Configuration

Control the min/max values and interval spacing:

primaryYAxis={{
  minimum: 0,
  maximum: 100,
  interval: 10, // distance between labels
  intervalType: 'Days', // or 'Days', 'Months', etc.
  edgelabelPlacement: 'Shift' // or 'Hide', 'None'
}}

Axis Crossing

Control where axes intersect:

primaryYAxis={{
  crossesAt: 50, // Y-axis crosses X-axis at x=50
  opposedPosition: false // true moves axis to opposite side
}}

primaryXAxis={{
  crossesAt: 0, // X-axis crosses Y-axis at y=0
  opposedPosition: true // Moves to top of chart
}}

Label Angle and Rotation

Rotate axis labels for long text:

primaryXAxis={{
  labelRotation: 45 // rotate labels 45 degrees
}}

// Or use automatic action
primaryXAxis={{
  labelIntersectAction: 'Rotate45' // auto-rotate if needed
  // Also: 'Wrap', 'MultipleRows', 'None'
}}

Grid Lines Configuration

Control major and minor grid lines:

primaryYAxis={{
  majorGridLines: {
    width: 1,
    color: '#e0e0e0',
    dashArray: '5,5' // dashed
  },
  minorGridLines: {
    visible: false
  }
}}

Axis Scrollbar

Enable scrollbar on axis for large datasets or zooming navigation.

<ChartComponent
  primaryXAxis={{
    valueType: 'Category',
    scrollbarSettings: {
      enable: true,
      pointsLength: 50  // optional
    }
  }}
>
  <Inject services={[ScrollBar]} />
  {/* series */}
</ChartComponent>

Note: Requires injecting ScrollBar module.

---

Secondary Axes

Add additional axes for comparing different scales or units.

Basic Secondary Axis

<ChartComponent
  primaryYAxis={{ /* config */ }}
  axes={[{
    name: 'secondaryYAxis',
    valueType: 'Double',
    labelFormat: '${value}',
    opposedPosition: true // right side
  }]}
>
  <SeriesCollectionDirective>
    <SeriesDirective
      yAxisName='secondaryYAxis' // attach to secondary
      type='Line'
      ...
    />
  </SeriesCollectionDirective>
</ChartComponent>

Use Case: Comparing Revenue and Count

const chartData = [
  { month: 'Jan', revenue: 35000, customers: 120 },
  { month: 'Feb', revenue: 28000, customers: 105 }
];

<ChartComponent
  primaryYAxis={{
    labelFormat: '${value}',
    title: 'Revenue',
    minimum: 0,
    maximum: 40000
  }}
  axes={[{
    name: 'countAxis',
    valueType: 'Double',
    title: 'Customer Count',
    minimum: 0,
    maximum: 200,
    opposedPosition: true
  }]}
>
  <SeriesCollectionDirective>
    {/* Revenue series on primary axis */}
    <SeriesDirective
      dataSource={chartData}
      xName='month'
      yName='revenue'
      type='Column'
      name='Revenue'
    />
    {/* Customer count on secondary axis */}
    <SeriesDirective
      dataSource={chartData}
      xName='month'
      yName='customers'
      yAxisName='countAxis'
      type='Line'
      name='Customers'
    />
  </SeriesCollectionDirective>
</ChartComponent>

---

Axis Labels and Formatting

Custom Label Formatting

primaryYAxis={{
  labelFormat: (args) => {
    // Custom formatting logic
    if (args.value >= 1000) {
      return (args.value / 1000).toFixed(1) + 'K';
    }
    return args.value;
  }
}}

Axis Titles

<ChartComponent
  primaryXAxis={{
    title: 'Months',
    titleStyle: {
      fontFamily: 'Arial',
      fontStyle: 'Normal',
      fontWeight: '400',
      size: '14px',
      color: '#424242'
    }
  }}
  primaryYAxis={{
    title: 'Sales Revenue ($)',
    titleStyle: { size: '14px', color: '#424242' }
  }}
>
  {/* chart */}
</ChartComponent>

Tick Marks

Control major and minor tick marks:

primaryXAxis={{
  majorTickLines: {
    width: 2,
    size: 5,
    color: '#000'
  },
  minorTickLines: {
    visible: true,
    width: 1,
    size: 3
  }
}}

---

Multiple Panes

Split chart into multiple panes for complex comparisons.

Basic Multiple Panes

import { StripLine } from '@syncfusion/ej2-react-charts';

<ChartComponent
  rows={[
    { height: '50%' },
    { height: '50%' }
  ]}
>
  <SeriesCollectionDirective>
    {/* Series for top pane */}
    <SeriesDirective
      xAxisName='topXAxis'
      yAxisName='topYAxis'
      type='Column'
      ...
    />
    {/* Series for bottom pane */}
    <SeriesDirective
      xAxisName='bottomXAxis'
      yAxisName='bottomYAxis'
      type='Line'
      ...
    />
  </SeriesCollectionDirective>
</ChartComponent>

Use Case: Price and Volume

<ChartComponent
  rows={[
    { height: '70%' }, // price chart
    { height: '30%' }  // volume chart
  ]}
  axes={[
    { name: 'priceYAxis', rowIndex: 0, ... },
    { name: 'volumeYAxis', rowIndex: 1, ... }
  ]}
>
  {/* price series */}
  {/* volume series */}
</ChartComponent>

---

Common Patterns

Pattern 1: Financial Chart with Two Y-Axes

<ChartComponent
  primaryYAxis={{
    labelFormat: '${value}',
    title: 'Stock Price',
    minimum: 50,
    maximum: 150
  }}
  axes={[{
    name: 'volumeAxis',
    labelFormat: '{value}M',
    title: 'Trading Volume',
    opposedPosition: true
  }]}
>
  <SeriesCollectionDirective>
    <SeriesDirective type='Candle' yName='close' />
    <SeriesDirective type='Column' yAxisName='volumeAxis' yName='volume' />
  </SeriesCollectionDirective>
</ChartComponent>

Pattern 2: DateTime Axis with Proper Intervals

primaryXAxis={{
  valueType: 'DateTime',
  intervalType: 'Months',
  interval: 1,
  labelFormat: 'MMM yyyy',
  majorGridLines: { width: 0 }
}}

Pattern 3: Category Axis with Rotated Labels

primaryXAxis={{
  valueType: 'Category',
  labelRotation: -45,
  labelIntersectAction: 'Rotate45',
  minorTickLines: { width: 0 },
  labelStyle: { angle: -45 }
}}

Pattern 4: Logarithmic Axis for Wide Ranges

primaryYAxis={{
  valueType: 'Logarithmic',
  logBase: 10,
  title: 'Log Scale',
  labelFormat: '10^{value}'
}}

---

Edge Cases and Troubleshooting

Issue: Labels Overlapping

Solution: Use labelIntersectAction: 'Rotate45' or 'Wrap'

Issue: Axis Range Too Small

Solution: Explicitly set minimum and maximum on axis

Issue: DateTime Axis Not Formatting Correctly

Solution: Ensure data property is actual Date object, not string

Issue: Secondary Axis Not Appearing

Solution: Verify series has yAxisName matching secondary axis name

---

Performance Tips

• Use majorGridLines: { width: 0 } to hide grid for cleaner look
• Limit number of grid lines with interval setting
• Use labelIntersectAction: 'Hide' instead of rotating for dense labels
• For large datasets, use category axis instead of datetime (faster rendering)

Chart Types Reference

Table of Contents

• Overview
• Cartesian Charts
• Polar and Radar Charts
• Financial Charts
• Specialty Charts
• Choosing the Right Chart Type
• Type-Specific Configurations

---

Overview

Syncfusion React Charts supports 20+ chart types, each optimized for different data visualization scenarios. Chart type is specified via the type prop on SeriesDirective.

Common Import Pattern:

import { ChartComponent, SeriesDirective, LineSeries, ColumnSeries, AreaSeries, BarSeries, ScatterSeries, BubbleSeries, ... } from '@syncfusion/ej2-react-charts';

Each chart type must be: 1. Imported from the package 2. Injected via <Inject services={[...]}> 3. Specified as type='TypeName' on the series

---

Cartesian Charts

Cartesian charts use X and Y axes for data positioning. Most common in business analytics.

Line Chart

When to use: Trends, time-series data, continuous values

import { LineSeries } from '@syncfusion/ej2-react-charts';

<SeriesDirective
  dataSource={data}
  xName='date'
  yName='value'
  type='Line'
/>

Properties:

• width: Line thickness (default 2)
• dashArray: Dash pattern (e.g., '5,3' for dashed)
• marker: Point marker config
• fill: Line color

Column Chart

When to use: Comparing categories, discrete values

<SeriesDirective
  dataSource={data}
  xName='category'
  yName='value'
  type='Column'
/>

Properties:

• cornerRadius: Round corners (0-50)
• columnSpacing: Gap between columns (0-1, default 0)
• border: Border styling
• fill: Column color

Bar Chart

When to use: Comparing categories horizontally (better for long labels)

<ChartComponent
  primaryXAxis={{ valueType: 'Category' }}
  primaryYAxis={{ valueType: 'Double' }}
>
  <SeriesDirective type='Bar' ... />
</ChartComponent>

Key difference from Column: Axes are reversed (categories on Y-axis)

Area Chart

When to use: Cumulative trends, magnitude emphasis

<SeriesDirective
  dataSource={data}
  xName='month'
  yName='value'
  type='Area'
/>

Properties:

• opacity: Fill transparency (0-1)
• drawType: Smooth or straight segments

Scatter Chart

When to use: Correlations, distribution patterns

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

Requires `Numeric` axes:

primaryXAxis={{ valueType: 'Double' }}
primaryYAxis={{ valueType: 'Double' }}

Bubble Chart

When to use: Trivariate data (3 dimensions)

import { BubbleSeries } from '@syncfusion/ej2-react-charts';

<SeriesDirective
  dataSource={data}
  xName='x'
  yName='y'
  size='size'
  type='Bubble'
/>

Data must include size property for bubble radius.

Step Line Chart

When to use: Stepped values, discrete state changes

<SeriesDirective type='StepLine' ... />

---

Polar and Radar Charts

Non-Cartesian charts for directional data and multi-dimensional comparisons.

Polar Chart

When to use: Directional or angular data

import { PolarSeries } from '@syncfusion/ej2-react-charts';

<ChartComponent chartArea={{ border: { width: 0 } }}>
  <SeriesDirective type='Polar' drawType='Column' ... />
</ChartComponent>

Available draw types: Line, Column, Area, Spline, RangeColumn

Radar Chart

When to use: Skill or characteristic comparison across multiple axes

import { RadarSeries } from '@syncfusion/ej2-react-charts';

<SeriesDirective type='Radar' drawType='Line' ... />

Similar to Polar but drawn with straight lines connecting points.

---

Financial Charts

Specialized charts for stock market and financial data analysis.

Candlestick Chart

When to use: OHLC data (Open, High, Low, Close)

import { CandleSeries } from '@syncfusion/ej2-react-charts';

<SeriesDirective
  dataSource={data}
  xName='date'
  low='low'
  high='high'
  open='open'
  close='close'
  type='Candle'
/>

Data properties: low, high, open, close

HLOC Chart

When to use: High-Low-Open-Close visualization

<SeriesDirective type='HighLowOpenClose' ... />

Similar data structure to Candlestick but different visual representation.

HiLo Chart (High-Low)

When to use: Simple high-low range visualization

<SeriesDirective type='HiLo' ... />

---

Specialty Charts

Box and Whisker Plot

When to use: Statistical distribution, quartiles

import { BoxAndWhiskerSeries } from '@syncfusion/ej2-react-charts';

<SeriesDirective type='BoxAndWhisker' ... />

Waterfall Chart

When to use: Cumulative effect visualization

import { WaterfallSeries } from '@syncfusion/ej2-react-charts';

<SeriesDirective type='Waterfall' ... />

Histogram

When to use: Frequency distribution

import { HistogramSeries } from '@syncfusion/ej2-react-charts';

<SeriesDirective type='Histogram' ... />

Error Bar Chart

When to use: Displaying uncertainty ranges

<SeriesDirective
  type='Column'
  errorBar={{ visible: true, type: 'StandardDeviation' }}
  ...
/>

Pareto Chart

When to use: 80/20 analysis, Pareto principle visualization

import { ParetoSeries } from '@syncfusion/ej2-react-charts';

<SeriesDirective type='Pareto' ... />

---

Choosing the Right Chart Type

Decision Matrix

Real-World Examples

Sales Dashboard:

• Revenue trend: Line or Area
• Sales by region: Column or Bar
• Top performers: Pie or Doughnut

Financial Dashboard:

• Stock prices: Candlestick
• Portfolio allocation: Pie
• Moving average: Line overlaid on candlestick

Analytics Dashboard:

• Page views over time: Line
• Traffic by source: Column or Bar
• User demographics: Radar or multi-axis

---

Type-Specific Configurations

Stacked Charts

Stack multiple series on top of each other:

// Column series stacking
<SeriesDirective
  dataSource={q1Data}
  type='StackingColumn'
/>
<SeriesDirective
  dataSource={q2Data}
  type='StackingColumn'
/>

Available: StackingColumn, StackingBar, StackingArea, StackingLine

100% Stacked Charts

Show proportions as percentages:

<SeriesDirective type='StackingColumn100' />

Available: StackingColumn100, StackingBar100, StackingArea100

Range Charts

Show min-max ranges:

<SeriesDirective
  dataSource={data}
  xName='x'
  high='high'
  low='low'
  type='RangeColumn'
/>

Data must include high and low properties.

Available: RangeColumn, RangeArea, RangeStepArea

Spline Charts

Smooth curves instead of straight lines:

<SeriesDirective type='Spline' /> // Line with smooth curves
<SeriesDirective type='SplineArea' /> // Area with smooth curves
<SeriesDirective type='SplineRangeArea' /> // Range area with smooth curves

---

Performance Considerations

• Many data points (1000+)? Use Line chart over Scatter
• Real-time updates? Consider virtual scrolling with zooming
• Large series count (10+)? Use Column chart over Pie
• Mobile viewing? Prefer Column/Bar over dense Scatter

---

Common Configuration Across All Types

<SeriesDirective
  type='Column'
  fill='#3B82F6'
  border={{ width: 1, color: '#1E40AF' }}
  opacity={0.85}
  marker={{
    visible: true,
    shape: 'Circle',
    width: 8,
    height: 8
  }}
/>

Getting Started with Syncfusion React Charts

This guide covers the complete setup process for integrating the Syncfusion React Charts component into your React application, from installation through creating your first chart.

Table of Contents

• Installation and Package Setup
• Install Required Packages
• Import Required Modules
• Creating Your First Chart
• Minimal Chart Example
• Chart with Title and Axes Labels
• Basic Chart Configuration
• Chart Sizing
• Adding Legend
• Adding Tooltip
• Module Injection
• Inject Services
• Series Modules
• Axis Modules
• User Interaction Modules
• Label and Annotation Modules
• Legend Module
• Technical Indicator Modules
• Analysis Modules
• Export Module
• Example Full Chart Injection
• Interfaces
• Chart Configuration Interfaces
• Axis Interfaces
• Series Interfaces
• Tooltip and Crosshair Interfaces
• Legend Interface
• Zoom and Selection Interfaces
• Annotation Interface
• Analysis Interfaces
• Technical Indicator Interface
• Lifecycle Event Interfaces
• Series and Point Event Interfaces
• Axis Event Interfaces
• Tooltip Event Interfaces
• Legend Event Interfaces
• Interaction Event Interfaces
• Annotation Event Interface
• Export and Print Event Interfaces
• Animation Event Interface
• Example Importing Interfaces
• Common Setup Issues
• Issue Chart Not Rendering
• Issue Data Not Displaying
• Issue Labels Not Showing on Axes
• Full Example Sales Chart with Multiple Features
• Additional Configuration Options
• Theme Selection
• Background and Borders
• Animation Control
• No Data Template
• Quick Reference

Installation and Package Setup

Install Required Packages

npm install @syncfusion/ej2-react-charts @syncfusion/ej2-base

Import Required Modules

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

The Inject component is required to register the chart modules that your chart uses, such as LineSeries, Category, Legend, and Tooltip. Without injecting the required modules, those features will not work.

Available themes:

• Material - Material Design
• Bootstrap - Bootstrap theme
• Bootstrap4 - Bootstrap 4 theme
• Tailwind - Tailwind CSS theme

Choose the theme that matches your application's design system. Use only one theme import at a time.

Creating Your First Chart

Minimal Chart Example

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

export default function MyChart() {
  const chartData = [
    { month: 'Jan', sales: 35 },
    { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 },
    { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }
  ];

  return (
    <ChartComponent>
      <Inject services={[LineSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective
          dataSource={chartData}
          xName="month"
          yName="sales"
          type="Line"
        />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}

What this does:

• ChartComponent: Main chart container
• SeriesCollectionDirective: Container for all chart series
• SeriesDirective: Single data series with X/Y mapping
• Inject: Registers LineSeries and Category axis modules

Chart with Title and Axes Labels

<ChartComponent
  id="sales-chart"
  primaryXAxis={{ valueType: 'Category', labelFormat: '{value}' }}
  primaryYAxis={{ labelFormat: '${value}K' }}
  title="Monthly Sales"
  subTitle="Q1 2024 Performance"
>
  <Inject services={[LineSeries, Category]} />
  <SeriesCollectionDirective>
    <SeriesDirective
      dataSource={chartData}
      xName="month"
      yName="sales"
      type="Line"
      name="Sales"
    />
  </SeriesCollectionDirective>
</ChartComponent>

Key additions:

• id: Unique identifier for the chart, especially when rendering multiple charts
• primaryXAxis: Configures category values with label formatting
• primaryYAxis: Formats Y-axis labels, such as currency with a $ symbol
• title: Main chart heading displayed at the top
• subTitle: Additional context displayed below the title
• name: Series name for legend display

Basic Chart Configuration

Chart Sizing

Set explicit dimensions to control layout:

<ChartComponent width="800px" height="400px">
  {/* chart content */}
</ChartComponent>

Responsive sizing is recommended for modern apps:

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

This makes the chart responsive to the container width while maintaining a fixed height.

Adding Legend

<ChartComponent legendSettings={{ visible: true, position: 'Right' }}>
  <Inject services={[LineSeries, Category, Legend]} />
  {/* series */}
</ChartComponent>

Legend positions: Top, Bottom, Left, Right, Custom

Adding Tooltip

<ChartComponent tooltip={{ enable: true, shared: true }}>
  <Inject services={[LineSeries, Category, Tooltip]} />
  {/* series */}
</ChartComponent>

Tooltip props:

• enable: Shows tooltips on hover
• shared: Displays all series values at once for multi-series charts
• template: Defines a custom HTML template for tooltip content

Module Injection

React Chart features are modular and require injection to enable them. This reduces bundle size by loading only the required chart series, axis types, indicators, and interactive features.

Inject Services

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

<ChartComponent primaryXAxis={{ valueType: 'Category' }}>
  <SeriesCollectionDirective>
    <SeriesDirective
      dataSource={data}
      xName="x"
      yName="y"
      type="Line"
      name="Sales"
    />
  </SeriesCollectionDirective>

  <Inject services={[LineSeries, ColumnSeries, Category, Legend, Tooltip, DataLabel]} />
</ChartComponent>

Series Modules

Axis Modules

User Interaction Modules

Label and Annotation Modules

Legend Module

Technical Indicator Modules

Analysis Modules

Export Module

Example Full Chart Injection

import {
  ChartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  LineSeries,
  ColumnSeries,
  BarSeries,
  AreaSeries,
  SplineSeries,
  SplineAreaSeries,
  StepLineSeries,
  StepAreaSeries,
  ScatterSeries,
  BubbleSeries,
  RangeColumnSeries,
  RangeAreaSeries,
  SplineRangeAreaSeries,
  HiloSeries,
  HiloOpenCloseSeries,
  CandleSeries,
  WaterfallSeries,
  HistogramSeries,
  BoxAndWhiskerSeries,
  ParetoSeries,
  PolarSeries,
  RadarSeries,
  StackingLineSeries,
  StackingColumnSeries,
  StackingBarSeries,
  StackingAreaSeries,
  StackingStepAreaSeries,
  MultiColoredLineSeries,
  MultiColoredAreaSeries,
  Category,
  DateTime,
  DateTimeCategory,
  Logarithmic,
  MultiLevelLabel,
  StripLine,
  ScrollBar,
  Tooltip,
  Crosshair,
  Zoom,
  Selection,
  Highlight,
  DataEditing,
  DataLabel,
  LastValueLabel,
  ChartAnnotation,
  Legend,
  SmaIndicator,
  EmaIndicator,
  TmaIndicator,
  AtrIndicator,
  AccumulationDistributionIndicator,
  BollingerBands,
  MacdIndicator,
  MomentumIndicator,
  RsiIndicator,
  StochasticIndicator,
  Trendlines,
  ErrorBar,
  Export
} from '@syncfusion/ej2-react-charts';

<ChartComponent>
  <SeriesCollectionDirective>
    <SeriesDirective
      dataSource={data}
      xName="x"
      yName="y"
      type="Line"
      lastValueLabel={{
        enable: true
      }}
    />
  </SeriesCollectionDirective>

  <Inject
    services={[
      LineSeries,
      ColumnSeries,
      BarSeries,
      AreaSeries,
      SplineSeries,
      SplineAreaSeries,
      StepLineSeries,
      StepAreaSeries,
      ScatterSeries,
      BubbleSeries,
      RangeColumnSeries,
      RangeAreaSeries,
      SplineRangeAreaSeries,
      HiloSeries,
      HiloOpenCloseSeries,
      CandleSeries,
      WaterfallSeries,
      HistogramSeries,
      BoxAndWhiskerSeries,
      ParetoSeries,
      PolarSeries,
      RadarSeries,
      StackingLineSeries,
      StackingColumnSeries,
      StackingBarSeries,
      StackingAreaSeries,
      StackingStepAreaSeries,
      MultiColoredLineSeries,
      MultiColoredAreaSeries,
      Category,
      DateTime,
      DateTimeCategory,
      Logarithmic,
      MultiLevelLabel,
      StripLine,
      ScrollBar,
      Tooltip,
      Crosshair,
      Zoom,
      Selection,
      Highlight,
      DataEditing,
      DataLabel,
      LastValueLabel,
      ChartAnnotation,
      Legend,
      SmaIndicator,
      EmaIndicator,
      TmaIndicator,
      AtrIndicator,
      AccumulationDistributionIndicator,
      BollingerBands,
      MacdIndicator,
      MomentumIndicator,
      RsiIndicator,
      StochasticIndicator,
      Trendlines,
      ErrorBar,
      Export
    ]}
  />
</ChartComponent>

Interfaces

React Chart provides TypeScript interfaces to strongly type chart configuration, axis settings, series settings, labels, annotations, technical indicators, and event arguments.

Chart Configuration Interfaces

Axis Interfaces

Series Interfaces

Tooltip and Crosshair Interfaces

Legend Interface

Zoom and Selection Interfaces

Annotation Interface

Analysis Interfaces

Technical Indicator Interface

Lifecycle Event Interfaces

Series and Point Event Interfaces

Axis Event Interfaces

Tooltip Event Interfaces

Legend Event Interfaces

Interaction Event Interfaces

Annotation Event Interface

Export and Print Event Interfaces

Animation Event Interface

Example Importing Interfaces

import {
  ChartModel,
  AxisModel,
  SeriesModel,
  TooltipSettingsModel,
  ILoadedEventArgs,
  IPointRenderEventArgs
} from '@syncfusion/ej2-react-charts';

const primaryXAxis: AxisModel = {
  valueType: 'Category'
};

const tooltip: TooltipSettingsModel = {
  enable: true
};

const series: SeriesModel = {
  dataSource: [
    { x: 'Jan', y: 35 },
    { x: 'Feb', y: 28 },
    { x: 'Mar', y: 34 }
  ],
  xName: 'x',
  yName: 'y',
  type: 'Line'
};

const chartOptions: ChartModel = {
  primaryXAxis,
  tooltip,
  series: [series]
};

const loaded = (args: ILoadedEventArgs): void => {
  // Chart rendering completed.
};

const pointRender = (args: IPointRenderEventArgs): void => {
  // Customize each point before rendering.
};

Common Setup Issues

Issue Chart Not Rendering

Cause: Missing CSS imports or undeclared modules.

Solution:

1. Verify CSS files are imported at the top of your component file or app entry file. 2. Check that all modules used in the chart are included in <Inject services={[...]}>. 3. Ensure each module is imported from @syncfusion/ej2-react-charts.

Issue Data Not Displaying

Cause: Incorrect property mapping through xName or yName.

Solution:

1. Verify xName and yName match your data object property names exactly. These values are case-sensitive. 2. Confirm dataSource contains objects with these properties. 3. Check that type matches the series module imported and injected.

Issue Labels Not Showing on Axes

Cause: Category axis not injected or valueType not set correctly.

Solution:

1. Ensure the Category module is injected for string-based axes. 2. For numeric data, use the default numeric axis behavior or configure the axis appropriately. 3. Verify data contains the mapped properties.

Full Example Sales Chart with Multiple Features

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

export default function SalesChart() {
  const data = [
    { month: 'Jan', revenue: 35, profit: 8 },
    { month: 'Feb', revenue: 28, profit: 6 },
    { month: 'Mar', revenue: 34, profit: 7 },
    { month: 'Apr', revenue: 32, profit: 7 },
    { month: 'May', revenue: 40, profit: 9 }
  ];

  return (
    <ChartComponent
      id="sales-chart"
      primaryXAxis={{
        valueType: 'Category',
        majorGridLines: { width: 0 }
      }}
      primaryYAxis={{
        labelFormat: '${value}K',
        edgeLabelPlacement: 'Shift'
      }}
      title="2024 Sales Performance"
      width="100%"
      height="420px"
      tooltip={{ enable: true, shared: true }}
      legendSettings={{ visible: true, position: 'Top' }}
    >
      <Inject services={[LineSeries, Category, Legend, Tooltip, DataLabel]} />
      <SeriesCollectionDirective>
        <SeriesDirective
          dataSource={data}
          xName="month"
          yName="revenue"
          name="Revenue"
          width={2}
          type="Line"
          marker={{
            visible: true,
            width: 7,
            height: 7,
            dataLabel: { visible: true, position: 'Top' }
          }}
        />
        <SeriesDirective
          dataSource={data}
          xName="month"
          yName="profit"
          name="Profit"
          width={2}
          type="Line"
          marker={{
            visible: true,
            width: 7,
            height: 7
          }}
        />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}

This example demonstrates:

• Multiple series for comparison
• Custom axis label formatting
• Legend and tooltip configuration
• Responsive width and fixed height
• Professional styling with proper spacing

Additional Configuration Options

Theme Selection

Choose from built-in themes to match your application design:

<ChartComponent theme="Bootstrap5">
  {/* chart content */}
</ChartComponent>

Available themes:

• Material, MaterialDark
• Fabric, FabricDark
• Bootstrap, BootstrapDark, Bootstrap4, Bootstrap5, Bootstrap5Dark
• Tailwind, TailwindDark
• Fluent, FluentDark, Fluent2, Fluent2Dark, Fluent2HighContrast
• Material3, Material3Dark
• HighContrast, HighContrastLight

Background and Borders

<ChartComponent
  background="#f5f5f5"
  backgroundImage="/pattern.png"
  border={{
    color: '#e0e0e0',
    width: 2
  }}
  chartArea={{
    border: { color: '#cccccc', width: 1 },
    backgroundColor: '#ffffff'
  }}
>
  {/* chart content */}
</ChartComponent>

Animation Control

<ChartComponent enableAnimation={true}>
  {/* chart content */}
</ChartComponent>

No Data Template

Display custom content when the chart has no data:

<ChartComponent noDataTemplate='<div style="padding: 20px;">No data available to display</div>'>
  {/* chart content */}
</ChartComponent>

Quick Reference

For complete API documentation and all available properties, see:

• API Reference: https://ej2.syncfusion.com/react/documentation/api/chart/overview
• Official Documentation: https://ej2.syncfusion.com/react/documentation/api/chart/

User Interactions

Table of Contents

• Selection
• Zooming and Panning
• Tooltip
• Crosshair
• Synchronized Charts
• Event Handling
• Common Patterns

---

Selection

Allow users to click on chart elements to highlight or interact with data.

Highlighting vs Selection

Highlighting: Temporary visual emphasis when hovering over elements. Selection: Persistent selection that remains after clicking.

import { Selection, Highlight } from '@syncfusion/ej2-react-charts';

<ChartComponent
  selectionMode='Point'
  highlightMode='Series'
  highlightColor='#FFD700'
  highlightPattern='Dots'
>
  <Inject services={[Selection, Highlight]} />
  {/* chart content */}
</ChartComponent>

Point Selection

import { Selection } from '@syncfusion/ej2-react-charts';

<ChartComponent selectionMode='Point'>
  <Inject services={[Selection]} />
  <SeriesCollectionDirective>
    <SeriesDirective
      dataSource={data}
      type='Column'
      selected={{
        color: '#FFD700' // highlight color
      }}
    />
  </SeriesCollectionDirective>
</ChartComponent>

Selection modes:

• Point: Individual data points
• Series: Entire series
• Cluster: All points in a category
• DragXY: Drag selection with respect to both axes
• DragX: Drag selection horizontally
• DragY: Drag selection vertically
• Lasso: Free-form drag selection
• None: No selection

Multi-Selection

Enable selecting multiple points or series:

<ChartComponent
  selectionMode='Point'
  isMultiSelect={true}  // Enable multi-selection
  selectedDataIndexes={[
    { series: 0, point: 1 },
    { series: 0, point: 3 }
  ]}
>
  <Inject services={[Selection]} />
  {/* chart content */}
</ChartComponent>

Drag Selection

Enable drag-to-select multiple data points:

<ChartComponent
  selectionMode='DragXY'  // or 'DragX', 'DragY'
  allowMultiSelection={true}
>
  <Inject services={[Selection]} />
  {/* chart content */}
</ChartComponent>

Selection Patterns

Apply visual patterns to selected elements:

<ChartComponent
  selectionMode='Point'
  selectionPattern='Chessboard'  // or 'Dots', 'DiagonalForward', 'Grid', etc.
>
  <Inject services={[Selection]} />
  {/* chart content */}
</ChartComponent>

Available patterns:

• None, Chessboard, Dots, DiagonalForward, DiagonalBackward
• Crosshatch, Pacman, Grid, Turquoise, Star, Triangle
• Circle, Tile, HorizontalDash, VerticalDash, Rectangle
• Box, VerticalStripe, HorizontalStripe, Bubble

Selection Customization

<ChartComponent
  selectionMode='Point'
  selectedDataIndexes={[
    { series: 0, point: 2 }, // pre-select points
    { series: 1, point: 3 }
  ]}
>
  <Inject services={[Selection]} />
  {/* series */}
</ChartComponent>

Handling Selection Events

const handlePointRender = (args) => {
  if (args.border) {
    args.border.width = 2;
    args.border.color = '#000';
  }
};

<ChartComponent
  pointRender={handlePointRender}
  selectionMode='Point'
>
  {/* chart */}
</ChartComponent>

---

Zooming and Panning

Enable users to zoom into specific regions and pan around.

Basic Zooming

import { Zoom } from '@syncfusion/ej2-react-charts';

<ChartComponent
  zoomSettings={{
    enableSelectionZoom: true, // drag to zoom
    enablePinchZooming: true, // touch pinch zoom
    enableMouseWheelZooming: true, // mouse wheel zoom
    mode: 'XY' // or 'X', 'Y'
  }}
>
  <Inject services={[Zoom]} />
  {/* chart */}
</ChartComponent>

Zoom modes:

• XY: Zoom both axes
• X: Zoom horizontal axis only
• Y: Zoom vertical axis only

Zoom Customization

<ChartComponent
  zoomSettings={{
    enableSelectionZoom: true,
    enablePinchZooming: true,
    enableMouseWheelZooming: false, // disable mouse wheel
    enableDeferredZoom: true, // smooth animation
    enableScrollbar: true, // show scrollbar when zoomed
    toolbarItems: ['ZoomIn', 'ZoomOut', 'Pan', 'Reset'] // toolbar buttons
  }}
>
  {/* chart */}
</ChartComponent>

Scrollbar with Zoom

Enable scrollbar for easier navigation when zoomed:

import { ScrollBar } from '@syncfusion/ej2-react-charts';

<ChartComponent
  zoomSettings={{
    enableSelectionZoom: true,
    enableScrollbar: true
  }}
>
  <Inject services={[Zoom, ScrollBar]} />
  {/* chart */}
</ChartComponent>

Programmatic Zooming

const chartRef = useRef(null);

const handleZoom = () => {
  // Zoom to specific range
  chartRef.current?.primaryXAxis?.zoomRange({
    start: 0.2,
    end: 0.8
  });
};

<ChartComponent ref={chartRef}>
  {/* chart */}
</ChartComponent>

---

Tooltip

Display information when hovering over data points.

Basic Tooltip

import { Tooltip } from '@syncfusion/ej2-react-charts';

<ChartComponent tooltip={{ enable: true }}>
  <Inject services={[Tooltip]} />
  {/* chart */}
</ChartComponent>

Tooltip Customization

<ChartComponent
  tooltip={{
    enable: true,
    shared: false, // true for multi-series
    enableMarker: true,
    backgroundColor: '#ffffff',
    border: {
      color: '#cccccc',
      width: 1
    },
    opacity: 1,
    format: '${series.name}: ${point.y}',
    template: `
      <div style="background: white; padding: 10px; border-radius: 4px;">
        <div><b>${point.x}</b></div>
        <div>${series.name}: ${point.y}</div>
      </div>
    `
  }}
>
  <Inject services={[Tooltip]} />
  {/* chart */}
</ChartComponent>

Shared Tooltip (Multi-Series)

<ChartComponent
  tooltip={{
    enable: true,
    shared: true, // show all series at once
  }}
>
  {/* multiple series */}
</ChartComponent>

Crosshair

Display vertical and horizontal lines to help read values.

Basic Crosshair

import { Crosshair } from '@syncfusion/ej2-react-charts';

<ChartComponent
  crosshair={{
    enable: true,
    lineStyle: {
      width: 1,
      color: '#999',
      dashArray: '5,5'
    }
  }}
>
  <Inject services={[Crosshair]} />
  {/* chart */}
</ChartComponent>

Crosshair with Trackball

<ChartComponent
  crosshair={{
    enable: true,
    lineType: 'Vertical', // or 'Horizontal', 'Both'
    line: {
      width: 1,
      color: '#999'
    },
    lineStyle: {
      dashArray: '5,5'
    }
  }}
  tooltip={{
    enable: true,
    shared: true
  }}
>
  <Inject services={[Crosshair, Tooltip]} />
  {/* chart */}
</ChartComponent>

Track Ball (Following Cursor)

<ChartComponent
  tooltip={{
    enable: true
  }}
>
  {/* chart */}
</ChartComponent>

---

Synchronized Charts

Link multiple charts so interactions in one affect others.

Basic Synchronization

import React, { useState } from 'react';

export default function SynchronizedCharts() {
  const [zoomRange, setZoomRange] = useState({ start: 0, end: 1 });

  const handleZoom = (range) => {
    setZoomRange(range);
  };

  return (
    <>
      <ChartComponent
        zoomSettings={{
          enableSelectionZoom: true
        }}
        // Handle zoom and update both
      >
        {/* chart 1 */}
      </ChartComponent>
      
      <ChartComponent
        // Use same zoomRange state
      >
        {/* chart 2 */}
      </ChartComponent>
    </>
  );
}

Advanced Synchronization with Refs

export default function SyncCharts() {
  const chart1Ref = useRef(null);
  const chart2Ref = useRef(null);

  const handleScroll1 = (args) => {
    // Mirror scroll to chart 2
    if (chart2Ref.current) {
      chart2Ref.current.primaryXAxis.zoomRange({
        start: args.zoomStart,
        end: args.zoomEnd
      });
    }
  };

  return (
    <>
      <ChartComponent ref={chart1Ref}>
        {/* chart 1 with handlers */}
      </ChartComponent>
      <ChartComponent ref={chart2Ref}>
        {/* chart 2 */}
      </ChartComponent>
    </>
  );
}

---

Event Handling

Respond to chart interactions programmatically.

Chart Events

<ChartComponent
  chartMouseClick={(args) => {
    console.log('Chart clicked at:', args.pageX, args.pageY);
  }}
  chartMouseUp={(args) => {
    console.log('Mouse up');
  }}
  chartMouseDown={(args) => {
    console.log('Mouse down');
  }}
  chartMouseMove={(args) => {
    console.log('Mouse moving');
  }}
>
  {/* chart */}
</ChartComponent>

Point/Series Events

<ChartComponent
  pointRender={(args) => {
    // Called when point is rendered
    if (args.point.y > 50) {
      args.fill = '#4CAF50'; // highlight high values
    }
  }}
  seriesRender={(args) => {
    // Called when series is rendered
    console.log('Series rendered:', args.series.name);
  }}
>
  {/* chart */}
</ChartComponent>

Selection Events

<ChartComponent
  selectionMode='Point'
  selectionComplete={(args) => {
    console.log('Selected points:', args.selectedDataIndexes);
    // Handle selection
  }}
>
  <Inject services={[Selection]} />
  {/* chart */}
</ChartComponent>

Zoom Events

<ChartComponent
  zoomSettings={{ enableSelectionZoom: true }}
  zoomStart={(args) => {
    console.log('Zoom started');
  }}
  zoomEnd={(args) => {
    console.log('Zoom ended');
  }}
  zoomComplete={(args) => {
    console.log('New range:', args.zoomStart, args.zoomEnd);
  }}
>
  <Inject services={[Zoom]} />
  {/* chart */}
</ChartComponent>

---

Common Patterns

Pattern 1: Drill-Down Navigation

const [selectedCategory, setSelectedCategory] = useState(null);
const [data, setData] = useState(categoryData);

const handlePointClick = (args) => {
  const category = args.pointIndex;
  setSelectedCategory(category);
  // Load detailed data for category
  setData(detailDataByCategory[category]);
};

<ChartComponent
  pointRender={(args) => {
    args.enableTooltip = true;
  }}
  chartMouseClick={handlePointClick}
>
  {/* chart */}
</ChartComponent>

Pattern 2: Linked Dashboard

export default function Dashboard() {
  const [selectedRegion, setSelectedRegion] = useState('All');

  const filteredData = selectedRegion === 'All'
    ? data
    : data.filter(d => d.region === selectedRegion);

  const handleSelection = (region) => {
    setSelectedRegion(region);
  };

  return (
    <>
      <ChartComponent
        selectionMode='Point'
        selectionComplete={(args) => {
          const region = data[args.selectedDataIndexes[0].point]?.region;
          handleSelection(region);
        }}
      >
        {/* Region selector chart */}
      </ChartComponent>
      
      <ChartComponent>
        <SeriesDirective dataSource={filteredData} />
        {/* Detail chart based on selection */}
      </ChartComponent>
    </>
  );
}

Pattern 3: Time Range Selector

export default function TimeRangeChart() {
  const [range, setRange] = useState({ start: 0, end: 1 });

  return (
    <>
      <ChartComponent
        zoomSettings={{
          enableSelectionZoom: true
        }}
        zoomComplete={(args) => {
          setRange({
            start: args.zoomStart,
            end: args.zoomEnd
          });
        }}
      >
        {/* Main chart with zooming */}
      </ChartComponent>
      
      <div>Selected range: {Math.round(range.start * 100)}% - {Math.round(range.end * 100)}%</div>
    </>
  );
}

Pattern 4: Tooltip with Custom Content

<ChartComponent
  tooltip={{
    enable: true,
    template: (args) => {
      const point = args.point;
      return `
        <div style="padding: 10px; background: #f5f5f5; border-radius: 4px;">
          <div><b>${point.x}</b></div>
          <div>Value: $${point.y?.toLocaleString()}</div>
          <div>% of total: ${((point.y / totalSum) * 100).toFixed(1)}%</div>
        </div>
      `;
    }
  }}
>
  {/* chart */}
</ChartComponent>

Pattern 5: Context Menu on Right-Click

<ChartComponent
  chartMouseClick={(args) => {
    if (args.event?.button === 2) { // right-click
      args.cancel = true; // prevent default context menu
      // Show custom menu
      showContextMenu({
        x: args.pageX,
        y: args.pageY
      });
    }
  }}
>
  {/* chart */}
</ChartComponent>

---

Performance Considerations

• Too many tooltips? Debounce tooltip updates
• Zooming slow? Use enableDeferredZoom: true
• Selection sluggish? Limit number of selectable points
• Many series? Use shared: false for tooltips

---

Data Editing (Drag and Drop)

Enable users to edit data by dragging points on the chart:

import { DataEditing } from '@syncfusion/ej2-react-charts';

<ChartComponent
  dragStart={(args) => {
    console.log('Drag started:', args.seriesIndex, args.pointIndex);
  }}
  drag={(args) => {
    console.log('Dragging:', args.newY);
  }}
  dragEnd={(args) => {
    console.log('Drag ended, new value:', args.newY);
    // Update your data source here
  }}
>
  <Inject services={[LineSeries, DataEditing]} />
  <SeriesCollectionDirective>
    <SeriesDirective
      dataSource={data}
      dragSettings={{
        enable: true
      }}
      type='Line'
    />
  </SeriesCollectionDirective>
</ChartComponent>

---

Browser Compatibility

• Desktop: Full support for all interactions
• Mobile/Touch: Use pinch zoom, tap selection
• Accessibility: Keyboard navigation for selection/zoom

---

API Reference

For complete details on all interaction properties, methods, and events:

• User Interaction API: https://ej2.syncfusion.com/react/documentation/api/chart/overview
• Selection API: https://ej2.syncfusion.com/react/documentation/api/chart/selection
• Zoom API: https://ej2.syncfusion.com/react/documentation/api/chart/zoom
• Tooltip API: https://ej2.syncfusion.com/react/documentation/api/chart/tooltipsettingsmodel