Getting Started with Essential JS 2 Charts: Building Data Visualizations in React

Essential JS 2 Charts is a comprehensive charting library from Syncfusion for creating data visualizations in React applications. It provides a wide range of chart types including line, bar, pie, area, and more, with extensive customization options and interactive features. This guide walks through setting up and creating charts using Essential JS 2 Charts with React, from installation to a working implementation. This is part 70 of a series on using Essential JS 2 Charts with React.

Prerequisites

Before you begin, make sure you have:

• Node.js version 14.0 or higher installed
• npm, yarn, or pnpm package manager
• A React project (version 16.8 or higher) or create-react-app setup
• Basic knowledge of React components
• Familiarity with JavaScript/TypeScript

Installation

Install Essential JS 2 Charts using your preferred package manager:

npm install @syncfusion/ej2-react-charts

Or with yarn:

yarn add @syncfusion/ej2-react-charts

Or with pnpm:

pnpm add @syncfusion/ej2-react-charts

After installation, your package.json should include:

{
  "dependencies": {
    "@syncfusion/ej2-react-charts": "^20.0.0",
    "@syncfusion/ej2-base": "^20.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Import the required CSS files in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-react-charts/styles/material.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple line chart. Create a new file src/ChartExample.jsx:

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

function ChartExample() {
  const data = [
    { month: 'Jan', sales: 35 },
    { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 },
    { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 },
    { month: 'Jun', sales: 32 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Line Chart Example</h2>
      <ChartComponent
        id="charts"
        primaryXAxis={{ valueType: 'Category' }}
        title="Monthly Sales"
      >
        <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
        <SeriesCollectionDirective>
          <SeriesDirective
            dataSource={data}
            xName="month"
            yName="sales"
            type="Line"
          />
        </SeriesCollectionDirective>
      </ChartComponent>
    </div>
  );
}

export default ChartExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ChartExample from './ChartExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ChartExample />
    </div>
  );
}

export default App;

This creates a basic line chart displaying monthly sales data.

Understanding the Basics

Essential JS 2 Charts provides several key components:

• ChartComponent: Main chart container
• SeriesCollectionDirective: Container for chart series
• SeriesDirective: Individual data series
• Inject: Service injection for chart features
• Chart types: Line, Column, Bar, Pie, Area, etc.
• Features: Legend, Tooltip, DataLabel, Zoom, etc.

Key concepts:

• Chart structure: ChartComponent contains SeriesCollectionDirective
• Data source: Pass data through dataSource prop
• Axis configuration: Configure X and Y axes
• Series type: Specify chart type (Line, Column, etc.)
• Services: Inject required services (Legend, Tooltip, etc.)

Here's an example with multiple chart types:

// src/MultipleChartsExample.jsx
import React from 'react';
import {
  ChartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  Legend,
  Category,
  Tooltip,
  DataLabel,
  ColumnSeries,
  PieSeries
} from '@syncfusion/ej2-react-charts';

function MultipleChartsExample() {
  const columnData = [
    { month: 'Jan', sales: 35 },
    { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 },
    { month: 'Apr', sales: 32 }
  ];

  const pieData = [
    { x: 'Chrome', y: 37 },
    { x: 'Safari', y: 19 },
    { x: 'Firefox', y: 18 },
    { x: 'Edge', y: 12 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Multiple Charts Example</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <div>
          <h3>Column Chart</h3>
          <ChartComponent
            id="column-chart"
            primaryXAxis={{ valueType: 'Category' }}
            title="Monthly Sales"
          >
            <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
            <SeriesCollectionDirective>
              <SeriesDirective
                dataSource={columnData}
                xName="month"
                yName="sales"
                type="Column"
              />
            </SeriesCollectionDirective>
          </ChartComponent>
        </div>
        <div>
          <h3>Pie Chart</h3>
          <ChartComponent
            id="pie-chart"
            title="Browser Usage"
          >
            <Inject services={[PieSeries, Legend, Tooltip]} />
            <SeriesCollectionDirective>
              <SeriesDirective
                dataSource={pieData}
                xName="x"
                yName="y"
                type="Pie"
              />
            </SeriesCollectionDirective>
          </ChartComponent>
        </div>
      </div>
    </div>
  );
}

export default MultipleChartsExample;

Practical Example / Building Something Real

Let's build a comprehensive dashboard with multiple charts:

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

function DashboardCharts() {
  const salesData = [
    { month: 'Jan', sales: 35, target: 40 },
    { month: 'Feb', sales: 28, target: 35 },
    { month: 'Mar', sales: 34, target: 38 },
    { month: 'Apr', sales: 32, target: 36 },
    { month: 'May', sales: 40, target: 42 },
    { month: 'Jun', sales: 32, target: 38 }
  ];

  const revenueData = [
    { month: 'Q1', revenue: 12000 },
    { month: 'Q2', revenue: 15000 },
    { month: 'Q3', revenue: 18000 },
    { month: 'Q4', revenue: 20000 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Sales Dashboard</h1>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        {/* Sales vs Target Chart */}
        <div>
          <h2>Sales vs Target</h2>
          <ChartComponent
            id="sales-chart"
            primaryXAxis={{ valueType: 'Category' }}
            title="Monthly Sales Performance"
            legendSettings={{ visible: true }}
          >
            <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
            <SeriesCollectionDirective>
              <SeriesDirective
                dataSource={salesData}
                xName="month"
                yName="sales"
                name="Sales"
                type="Line"
              />
              <SeriesDirective
                dataSource={salesData}
                xName="month"
                yName="target"
                name="Target"
                type="Line"
              />
            </SeriesCollectionDirective>
          </ChartComponent>
        </div>

        {/* Revenue Chart */}
        <div>
          <h2>Quarterly Revenue</h2>
          <ChartComponent
            id="revenue-chart"
            primaryXAxis={{ valueType: 'Category' }}
            title="Quarterly Revenue"
            legendSettings={{ visible: true }}
          >
            <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]} />
            <SeriesCollectionDirective>
              <SeriesDirective
                dataSource={revenueData}
                xName="month"
                yName="revenue"
                type="Area"
              />
            </SeriesCollectionDirective>
          </ChartComponent>
        </div>
      </div>
    </div>
  );
}

export default DashboardCharts;

Now create a product comparison chart:

// src/ProductComparisonChart.jsx
import React from 'react';
import {
  ChartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  Legend,
  Category,
  Tooltip,
  DataLabel,
  ColumnSeries
} from '@syncfusion/ej2-react-charts';

function ProductComparisonChart() {
  const productData = [
    { product: 'Product A', q1: 120, q2: 135, q3: 150 },
    { product: 'Product B', q1: 100, q2: 110, q3: 125 },
    { product: 'Product C', q1: 90, q2: 95, q3: 105 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Product Sales Comparison</h2>
      <ChartComponent
        id="product-chart"
        primaryXAxis={{ valueType: 'Category' }}
        title="Product Sales by Quarter"
        legendSettings={{ visible: true }}
      >
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
        <SeriesCollectionDirective>
          <SeriesDirective
            dataSource={productData}
            xName="product"
            yName="q1"
            name="Q1"
            type="Column"
          />
          <SeriesDirective
            dataSource={productData}
            xName="product"
            yName="q2"
            name="Q2"
            type="Column"
          />
          <SeriesDirective
            dataSource={productData}
            xName="product"
            yName="q3"
            name="Q3"
            type="Column"
          />
        </SeriesCollectionDirective>
      </ChartComponent>
    </div>
  );
}

export default ProductComparisonChart;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import DashboardCharts from './DashboardCharts';
import ProductComparisonChart from './ProductComparisonChart';
import './App.css';

function App() {
  return (
    <div className="App">
      <DashboardCharts />
      <ProductComparisonChart />
    </div>
  );
}

export default App;

This example demonstrates:

• Multiple chart types
• Dashboard layout
• Multiple series
• Legend and tooltips
• Custom styling
• Data visualization

Common Issues / Troubleshooting

1. Chart not displaying: Make sure you've imported the CSS files. Essential JS 2 Charts requires CSS for proper rendering.

2. Services not working: Use the Inject component to inject required services. Each chart type and feature requires specific services.

3. Data not showing: Check that dataSource is properly formatted and that xName and yName match your data properties.

4. Axis not configured: Set primaryXAxis and primaryYAxis props. For category data, use valueType: 'Category'.

5. Styling issues: Import the theme CSS file. Available themes include 'material', 'fabric', 'bootstrap', etc.

6. Multiple series: Use multiple SeriesDirective components within SeriesCollectionDirective to display multiple series on the same chart.

Next Steps

Now that you have a basic understanding of Essential JS 2 Charts:

• Explore all available chart types
• Learn about advanced chart configurations
• Implement interactive features (zoom, selection)
• Add custom tooltips and labels
• Create real-time updating charts
• Learn about other chart libraries (recharts, chart.js)
• Check the official documentation: https://ej2.syncfusion.com/react/documentation/chart/getting-started/

Summary

You've successfully set up Essential JS 2 Charts in your React application and created line charts, column charts, and dashboard visualizations. Essential JS 2 Charts provides a powerful solution for creating professional data visualizations with extensive customization options.

SEO Keywords

essential js 2 charts
React Syncfusion charts
essential js 2 charts tutorial
React data visualization
essential js 2 charts installation
React chart library
essential js 2 charts example
React line chart
essential js 2 charts setup
React bar chart
essential js 2 charts customization
React pie chart
essential js 2 charts dashboard
React chart component
essential js 2 charts getting started