React Chart - Getting Started

Project status: Beta


The DevExtreme React Chart is a data visualization component that provides different series types, including bar, line, area, scatter, pie, and so on. It can function in uncontrolled and controlled state modes. In uncontrolled mode, the UI plugins manage the state internally. In controlled mode, the state is managed externally via plugin props. The DevExtreme React Chart has a composable and extendable architecture in which plugins provide additional elements (such as a legend, grid, and axes). It also supports Twitter Bootstrap and Material-UI rendering and theming.


Install the dx-react-chart package and its dependencies using the following command:

npm i --save @devexpress/dx-react-core @devexpress/dx-react-chart

This package does not contain visual components. In the examples below, visual components are rendered using the Material-UI package. However, you can use any of the following:

  • Material-UI

    npm i --save @devexpress/dx-react-chart-material-ui

    Make sure that the Material-UI dependencies are installed and properly configured. Check the Material-UI’s Getting Started article for configuration details.

  • Bootstrap 4

    npm i --save @devexpress/dx-react-chart-bootstrap4

    Make sure that the OpenIconic icons are installed and properly configured.

    Add the DevExtreme React Chart styles in the root .js file:

    import '@devexpress/dx-react-chart-bootstrap4/dist/dx-react-chart-bootstrap4.css';

    NOTE: The DevExtreme React Chart does not include Bootstrap CSS.

Supported Browsers

React Chart supports the latest stable releases of all major browsers: Google Chrome, Mozilla Firefox, Safari, Opera, and Microsoft Edge.

React Chart can work in other browsers if they use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API. Some of these browsers may require adding polyfills. However, correct operation in such browsers, including Internet Explorer, is not guaranteed.


React Chart uses the latest web platform standards and does not support older browsers like IE11 and Android 4. Use the ES2015 (ES6) polyfill to support these browsers. We recommend BABEL Polyfill, but you can use an alternative.

Use the Chart Component

The Chart component’s functionality is implemented in plugins. To draw a simple chart, use the ArgumentAxis and ValueAxis plugins and one of the series plugins. The following code shows how to configure a simple line chart:

import { Chart, ArgumentAxis, ValueAxis, LineSeries } from "@devexpress/dx-react-chart-material-ui";
// import { Chart, ArgumentAxis, ValueAxis, LineSeries } from "@devexpress/dx-react-chart-bootstrap4";

const App = () => (
        { argument: 1, value: 10 },
        { argument: 2, value: 20 },
        { argument: 3, value: 30 }
      <ArgumentAxis />
      <ValueAxis />
      <LineSeries valueField="value" argumentField="argument" />

Try Out the React Chart

Follow the links below to try out the React Chart:


DevExtreme licensing