¿Cómo crear un gráfico de barras 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 barras: un gráfico de barras es una representación pictórica de datos que presenta datos categóricos con barras rectangulares con alturas o longitudes proporcionales a los valores que representan. En otras palabras, es la representación pictórica del conjunto de datos. Estos conjuntos de datos contienen los valores numéricos de las variables que representan la longitud o la altura.

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,
  BarSeries,
} from '@devexpress/dx-react-chart-material-ui';
  
  
const App = () => {
  
// Sample data
const data = [
  { argument: 'Monday', value: 30 },
  { argument: 'Tuesday', value: 20 },
  { argument: 'Wednesday', value: 10 },
  { argument: 'Thursday', value: 50 },
  { argument: 'Friday', value: 60 },
];
return (
    <Paper>
    <Chart
      data={data}
    >
      <ArgumentAxis />
      <ValueAxis />
  
      <BarSeries valueField="value" argumentField="argument" />
    </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