¿Cómo crear un gráfico de líneas en reaccionar usando material UI y DevExpress?

DevExpress: DevExpress es un paquete para controlar y crear la interfaz de usuario de Windows, Mobile y otras aplicaciones.

Gráficos de líneas: los gráficos de líneas se utilizan para representar la relación entre dos relaciones de datos X y relaciones Y en un eje diferente. Uno de los ejes del gráfico representa las categorías específicas que se comparan, mientras que el otro eje representa los valores medidos correspondientes a esas categorías.

Pasos para crear la aplicación React y el módulo de instalación:

• Paso 1: Cree una aplicación React usando el siguiente comando.

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

  cd foldername

• Paso 3: después de crear la aplicación ReactJS, instale los módulos necesarios con el siguiente comando.

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

Estructura del proyecto: se verá así:

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from "react";
import Paper from '@material-ui/core/Paper';
import {
  ArgumentAxis,
  ValueAxis,
  Chart,
  LineSeries,
} from '@devexpress/dx-react-chart-material-ui';
  
  
const App = () => {
  
// Sample data
const data = [
  { x: 1, y: 30 },
  { x: 2, y: 40 },
  { x: 3, y: 5 },
  { x: 4, y: 2 },
  { x: 5, y: 21 },
];
return (
    <Paper>
    <Chart
      data={data}
    >
      <ArgumentAxis />
      <ValueAxis />
  
      <LineSeries valueField="y" argumentField="x" />
    </Chart>
  </Paper>
);
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Producción