DEV Community

Eric Lewis
Eric Lewis

Posted on

Getting Started with DevExtreme React Chart: Creating Charts in React

#react #webdev #tutorial #beginners

DevExtreme React Chart is a comprehensive charting library for React that provides a wide range of chart types and features. It offers a declarative API for creating interactive, responsive charts with extensive customization options. This guide walks through setting up and creating charts using DevExtreme React Chart with React, from installation to a working implementation.

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 DevExtreme React Chart and required dependencies:

npm install @devextreme/runtime devextreme-react
Enter fullscreen mode Exit fullscreen mode

Or with yarn:

yarn add @devextreme/runtime devextreme-react
Enter fullscreen mode Exit fullscreen mode

Or with pnpm:

pnpm add @devextreme/runtime devextreme-react
Enter fullscreen mode Exit fullscreen mode

After installation, your package.json should include:

{
  "dependencies": {
    "@devextreme/runtime": "^3.0.0",
    "devextreme-react": "^23.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

Project Setup

Import DevExtreme CSS in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'devextreme/dist/css/dx.light.css';
import App from './App';

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

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 { Chart, Series, CommonSeriesSettings, Legend, ValueAxis, ArgumentAxis, Tooltip } from 'devextreme-react/chart';

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 DevExtreme Chart Example</h2>
      <Chart dataSource={data}>
        <ArgumentAxis argumentField="month" />
        <ValueAxis />
        <Series
          valueField="sales"
          argumentField="month"
          type="line"
        />
        <Legend visible={false} />
        <Tooltip enabled={true} />
      </Chart>
    </div>
  );
}

export default ChartExample;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

This creates a basic line chart with monthly sales data.

Understanding the Basics

DevExtreme React Chart provides composable chart components:

  • Chart: Main chart container
  • Series: Data series component
  • ArgumentAxis: X-axis component
  • ValueAxis: Y-axis component
  • Legend: Chart legend
  • Tooltip: Interactive tooltips
  • CommonSeriesSettings: Shared settings for all series

Key concepts:

  • dataSource prop: Array of data objects
  • valueField: Property name for Y-axis values
  • argumentField: Property name for X-axis values
  • type prop: Chart type (line, bar, area, pie, etc.)
  • Composable: Build charts by composing components

Here's an example with multiple chart types:

// src/MultipleChartsExample.jsx
import React from 'react';
import { Chart, Series, ArgumentAxis, ValueAxis, Legend, Tooltip } from 'devextreme-react/chart';

function MultipleChartsExample() {
  const lineData = [
    { day: 'Mon', value: 120 },
    { day: 'Tue', value: 132 },
    { day: 'Wed', value: 101 },
    { day: 'Thu', value: 134 },
    { day: 'Fri', value: 90 }
  ];

  const barData = [
    { product: 'Product A', revenue: 120 },
    { product: 'Product B', revenue: 200 },
    { product: 'Product C', revenue: 150 }
  ];

  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>Line Chart</h3>
          <Chart dataSource={lineData}>
            <ArgumentAxis argumentField="day" />
            <ValueAxis />
            <Series
              valueField="value"
              argumentField="day"
              type="line"
            />
            <Tooltip enabled={true} />
          </Chart>
        </div>
        <div>
          <h3>Bar Chart</h3>
          <Chart dataSource={barData}>
            <ArgumentAxis argumentField="product" />
            <ValueAxis />
            <Series
              valueField="revenue"
              argumentField="product"
              type="bar"
            />
            <Tooltip enabled={true} />
          </Chart>
        </div>
      </div>
    </div>
  );
}

export default MultipleChartsExample;
Enter fullscreen mode Exit fullscreen mode

Practical Example / Building Something Real

Let's build a comprehensive dashboard with multiple charts:

// src/DashboardCharts.jsx
import React, { useState } from 'react';
import { Chart, Series, ArgumentAxis, ValueAxis, Legend, Tooltip, CommonSeriesSettings } from 'devextreme-react/chart';

function DashboardCharts() {
  const [selectedPeriod, setSelectedPeriod] = useState('monthly');

  const monthlyData = [
    { 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 quarterlyData = [
    { quarter: 'Q1', sales: 97, target: 113 },
    { quarter: 'Q2', sales: 106, target: 116 },
    { quarter: 'Q3', sales: 112, target: 120 },
    { quarter: 'Q4', sales: 120, target: 125 }
  ];

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

  const categoryData = [
    { product: 'Product A', value: 35 },
    { product: 'Product B', value: 28 },
    { product: 'Product C', value: 34 },
    { product: 'Product D', value: 32 }
  ];

  const currentData = selectedPeriod === 'monthly' ? monthlyData : quarterlyData;
  const argumentField = selectedPeriod === 'monthly' ? 'month' : 'quarter';

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Sales Dashboard</h1>
      <div style={{ marginBottom: '20px', textAlign: 'center' }}>
        <button
          onClick={() => setSelectedPeriod('monthly')}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: selectedPeriod === 'monthly' ? '#007bff' : '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Monthly
        </button>
        <button
          onClick={() => setSelectedPeriod('quarterly')}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: selectedPeriod === 'quarterly' ? '#007bff' : '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Quarterly
        </button>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <div>
          <h2>Sales vs Target</h2>
          <Chart dataSource={currentData}>
            <ArgumentAxis argumentField={argumentField} />
            <ValueAxis />
            <CommonSeriesSettings argumentField={argumentField} type="line" />
            <Series valueField="sales" name="Sales" />
            <Series valueField="target" name="Target" />
            <Legend visible={true} />
            <Tooltip enabled={true} />
          </Chart>
        </div>
        <div>
          <h2>Quarterly Revenue</h2>
          <Chart dataSource={revenueData}>
            <ArgumentAxis argumentField="quarter" />
            <ValueAxis />
            <Series
              valueField="revenue"
              argumentField="quarter"
              type="bar"
            />
            <Tooltip enabled={true} />
          </Chart>
        </div>
        <div>
          <h2>Product Distribution</h2>
          <Chart dataSource={categoryData}>
            <Series
              valueField="value"
              argumentField="product"
              type="pie"
            />
            <Legend visible={true} />
            <Tooltip enabled={true} />
          </Chart>
        </div>
      </div>
    </div>
  );
}

export default DashboardCharts;
Enter fullscreen mode Exit fullscreen mode

Now create an interactive chart with custom styling:

// src/InteractiveChart.jsx
import React from 'react';
import { Chart, Series, ArgumentAxis, ValueAxis, Tooltip, Legend } from 'devextreme-react/chart';

function InteractiveChart() {
  const data = [
    { 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 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Interactive Chart</h2>
      <Chart dataSource={data}>
        <ArgumentAxis argumentField="month" />
        <ValueAxis />
        <Series
          valueField="sales"
          argumentField="month"
          type="line"
          name="Sales"
          color="#1f77b4"
        />
        <Series
          valueField="target"
          argumentField="month"
          type="line"
          name="Target"
          color="#ff7f0e"
        />
        <Legend visible={true} />
        <Tooltip enabled={true} />
      </Chart>
    </div>
  );
}

export default InteractiveChart;
Enter fullscreen mode Exit fullscreen mode

Update your App.jsx:

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

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

export default App;
Enter fullscreen mode Exit fullscreen mode

This example demonstrates:

  • Multiple chart types
  • Dashboard layout
  • Multiple series
  • Interactive features
  • Dynamic data updates
  • Custom styling

Common Issues / Troubleshooting

  1. Chart not displaying: Make sure you've imported the CSS file. DevExtreme requires CSS for proper styling.

  2. Data format error: Ensure dataSource is an array of objects with consistent property names. Check that valueField and argumentField match your data properties.

  3. Styling issues: Import the theme CSS file. Available themes include 'dx.light.css', 'dx.dark.css', etc.

  4. Series not showing: Check that valueField and argumentField props match your data property names. Ensure the type prop is set correctly.

  5. Axis not configured: Add ArgumentAxis and ValueAxis components. Configure them with appropriate argumentField and settings.

  6. Performance: For large datasets, consider data sampling or pagination. DevExtreme handles large datasets well, but optimization may be needed for very large datasets.

Next Steps

Now that you have a basic understanding of DevExtreme React Chart:

Summary

You've successfully set up DevExtreme React Chart in your React application and created line charts, bar charts, pie charts, and dashboard visualizations. DevExtreme React Chart provides a comprehensive solution for creating professional data visualizations with extensive customization options.

SEO Keywords

devextreme-react-chart
React DevExtreme Chart
devextreme-react-chart tutorial
React data visualization
devextreme-react-chart installation
React chart library
devextreme-react-chart example
React DevExtreme charts
devextreme-react-chart setup
React interactive charts
devextreme-react-chart customization
React chart component
devextreme-react-chart dashboard
React chart visualization
devextreme-react-chart getting started

Top comments (0)