En nuestra aplicación React, a veces queremos mostrar una representación BarChart de un dato en particular. Podemos usar el módulo react-chartjs-2 y chart.js en ReactJS para mostrar información en formato BarCharts. Los siguientes son algunos pasos simples para hacerlo:
Paso 1: Cree una aplicación React usando el siguiente comando.
npx create-react-app BARCHART_REACT
Paso 2: después de crear la carpeta de su proyecto, es decir , BARCHART_REACT , acceda a ella con el siguiente comando.
cd BARCHART_REACT
Paso 3: después de crear la aplicación ReactJS, instale los módulos react-chartjs-2 y chart.js con el siguiente comando.
npm install --save react-chartjs-2 chart.js
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.
App.js
import { Bar } from "react-chartjs-2";
function App() {
return (
<div className="App">
<h1>GEEKSFORGEEKS BAR CHART REACTJS</h1>
<div style={{ maxWidth: "650px" }}>
<Bar
data={{
// Name of the variables on x-axies for each bar
labels: ["1st bar", "2nd bar", "3rd bar", "4th bar"],
datasets: [
{
// Label for bars
label: "total count/value",
// Data or value of your each variable
data: [1552, 1319, 613, 1400],
// Color of each bar
backgroundColor: ["aqua", "green", "red", "yellow"],
// Border color of each bar
borderColor: ["aqua", "green", "red", "yellow"],
borderWidth: 0.5,
},
],
}}
// Height of graph
height={400}
options={{
maintainAspectRatio: false,
scales: {
yAxes: [
{
ticks: {
// The y-axis value will start from zero
beginAtZero: true,
},
},
],
},
legend: {
labels: {
fontSize: 15,
},
},
}}
/>
</div>
</div>
);
}
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:
