Nautical-themed illustration of Syncfusion EJ2 React Charts library features

Chart Your Course: Navigating the Seas of Data with Syncfusion EJ2 React Charts

The Gray Cat
The Gray Cat

Charting a New Course in Data Visualization

In the vast sea of React UI components, Syncfusion EJ2 React Charts stands out as a lighthouse, guiding developers towards creating stunning data visualizations. This powerful library, part of the larger Syncfusion Essential JS 2 ecosystem, offers a comprehensive set of chart types and customization options that can bring any data set to life.

Features That Make Waves

Syncfusion EJ2 React Charts comes packed with features that set it apart:

  • A wide array of chart types, from basic line and bar charts to complex financial and statistical charts
  • Responsive design that adapts to various screen sizes and devices
  • Interactive elements like zooming, panning, and tooltips
  • Customizable axes, legends, and data labels
  • Support for real-time data updates
  • Exportation capabilities to various formats

Setting Sail: Installation and Setup

Before we dive into the deep waters of charting, let’s get our ship ready. Install the @syncfusion/ej2-react-charts package using npm or yarn:

npm install @syncfusion/ej2-react-charts
# or
yarn add @syncfusion/ej2-react-charts

Once installed, you’ll need to import the necessary modules and CSS in your React application:

import { ChartComponent } from '@syncfusion/ej2-react-charts';
import '@syncfusion/ej2-react-charts/styles/material.css';

Charting Your First Course: Basic Usage

Let’s start with a simple line chart to visualize some data:

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

const App: React.FC = () => {
  const primaryxAxis = { valueType: 'DateTime', title: 'Years' };
  const primaryyAxis = { title: 'Sales in $' };

  const chartData = [
    { x: new Date(2015, 0, 1), y: 21 },
    { x: new Date(2016, 0, 1), y: 24 },
    { x: new Date(2017, 0, 1), y: 36 },
    { x: new Date(2018, 0, 1), y: 38 },
    { x: new Date(2019, 0, 1), y: 54 },
    { x: new Date(2020, 0, 1), y: 57 },
    { x: new Date(2021, 0, 1), y: 70 }
  ];

  return (
    <ChartComponent primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title="Yearly Sales Analysis">
      <Inject services={[LineSeries, DateTime, Legend, Tooltip]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y' name='Sales' type='Line' />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
};

export default App;

This code creates a line chart showing yearly sales data. The ChartComponent is the main container, while SeriesCollectionDirective and SeriesDirective define the data series to be plotted.

Multiple Series and Chart Types

Syncfusion EJ2 React Charts allows you to combine multiple series and chart types in a single visualization:

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

const App: React.FC = () => {
  const primaryxAxis = { valueType: 'Category', title: 'Months' };
  const primaryyAxis = { title: 'Sales in $' };

  const chartData = [
    { month: 'Jan', sales: 35, profit: 7 },
    { month: 'Feb', sales: 28, profit: 5 },
    { month: 'Mar', sales: 34, profit: 6 },
    { month: 'Apr', sales: 32, profit: 6 },
    { month: 'May', sales: 40, profit: 8 },
    { month: 'Jun', sales: 32, profit: 7 },
    { month: 'Jul', sales: 35, profit: 7 }
  ];

  return (
    <ChartComponent primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title="Sales and Profit Analysis">
      <Inject services={[LineSeries, ColumnSeries, Category, Legend, Tooltip]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='month' yName='sales' name='Sales' type='Column' />
        <SeriesDirective dataSource={chartData} xName='month' yName='profit' name='Profit' type='Line' />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
};

export default App;

This example combines a column chart for sales with a line chart for profit, providing a comprehensive view of the business performance.

Customizing Chart Appearance

Syncfusion EJ2 React Charts offers extensive customization options. Let’s enhance our chart with some styling:

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

const App: React.FC = () => {
  const primaryxAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
  const primaryyAxis = { title: 'Sales in $', rangePadding: 'None', minimum: 0, maximum: 100, interval: 20 };

  const chartData = [
    { x: new Date(2015, 0, 1), y: 21 },
    { x: new Date(2016, 0, 1), y: 24 },
    { x: new Date(2017, 0, 1), y: 36 },
    { x: new Date(2018, 0, 1), y: 38 },
    { x: new Date(2019, 0, 1), y: 54 },
    { x: new Date(2020, 0, 1), y: 57 },
    { x: new Date(2021, 0, 1), y: 70 }
  ];

  const marker = { visible: true, width: 10, height: 10, shape: 'Diamond' };
  const tooltipSettings = { enable: true, format: '${x} : ${y}' };

  return (
    <ChartComponent
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title="Yearly Sales Analysis"
      legendSettings={{ visible: true, position: 'Top' }}
      tooltip={tooltipSettings}
    >
      <Inject services={[LineSeries, DateTime, Legend, Tooltip, DataLabel]} />
      <SeriesCollectionDirective>
        <SeriesDirective
          dataSource={chartData}
          xName='x'
          yName='y'
          name='Sales'
          type='Line'
          width={3}
          marker={marker}
          dataLabel={{ visible: true, position: 'Top' }}
        />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
};

export default App;

This customized chart features diamond-shaped markers, data labels, a formatted tooltip, and a legend positioned at the top.

Implementing Interactivity

One of the strengths of Syncfusion EJ2 React Charts is its interactive features. Let’s add zooming and selection capabilities:

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

const App: React.FC = () => {
  // ... (previous axis and data definitions)

  const zoomSettings = {
    enableSelectionZooming: true,
    mode: 'X',
    enablePan: true
  };

  const selectionSettings = {
    mode: 'Point'
  };

  return (
    <ChartComponent
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title="Yearly Sales Analysis"
      legendSettings={{ visible: true, position: 'Top' }}
      tooltip={tooltipSettings}
      zoomSettings={zoomSettings}
      selectionMode='Point'
      selectionPattern='Pattern1'
    >
      <Inject services={[LineSeries, DateTime, Legend, Tooltip, DataLabel, Zoom, Selection]} />
      <SeriesCollectionDirective>
        <SeriesDirective
          dataSource={chartData}
          xName='x'
          yName='y'
          name='Sales'
          type='Line'
          width={3}
          marker={marker}
          dataLabel={{ visible: true, position: 'Top' }}
        />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
};

export default App;

This enhanced chart now allows users to zoom in on specific date ranges and select individual data points for more detailed information.

Charting Your Own Course

Syncfusion EJ2 React Charts provides a robust foundation for creating sophisticated data visualizations in React applications. From basic line charts to complex multi-series visualizations with interactive features, this library offers the tools you need to effectively communicate your data stories.

As you continue to explore the capabilities of Syncfusion EJ2 React Charts, remember that the key to great data visualization lies not just in the tools, but in how you use them to illuminate insights within your data. With practice and creativity, you’ll be charting new courses in data visualization in no time.

Set sail on your data visualization journey with Syncfusion EJ2 React Charts, and watch as your React applications come alive with rich, interactive, and insightful charts that engage and inform your users.

Comments