logo studio roma
EN / ES

Back to Blog

Chart Js con React

Pablo Romera foto

Pablo Romera 

/

 January 20, 2024 / 4 min read

Pablo Romera foto

Visualiza datos con Chart.js y React

Descubre cómo integrar Chart.js con React puede revolucionar el diseño y desarrollo web de tu negocio, ofreciendo visualización de datos dinámica que cautiva e informa.


Introducción

En el mundo digital de ritmo rápido de hoy, la capacidad de presentar datos complejos en un formato fácilmente digerible es invaluable. Aquí es donde entra en juego la sinergia entre Chart.js y React, ofreciendo una integración sin fisuras para los desarrolladores que buscan elevar el diseño y desarrollo web de su negocio. A través de este artículo, nos embarcaremos en un viaje para explorar los entresijos de cómo empezar con Chart.js y React, asegurando que estés bien equipado para llevar tu visualización de datos al siguiente nivel.

Chart.js y React.js

Cuando hablamos de Chart.js y React.js, estamos discutiendo una poderosa combinación que trae simplicidad, elegancia y funcionalidad al frente del desarrollo web. Chart.js es una biblioteca de JavaScript versátil para crear gráficos interactivos impresionantes con facilidad, mientras que React.js es renombrado por su eficiencia en la construcción de interfaces de usuario. La integración de estas dos tecnologías permite a los desarrolladores construir gráficos dinámicos dentro de aplicaciones React, mejorando la experiencia del usuario a través de presentaciones de datos visualmente atractivas.

Comenzando con Chart.js en React

Integrar Chart.js con React podría parecer desalentador al principio, pero es bastante sencillo una vez que te acostumbras. El primer paso es instalar Chart.js y el envoltorio de React para Chart.js, asegurando que estas herramientas estén listas para trabajar su magia en tu aplicación React.

Instalación y Configuración

Para comenzar, necesitarás agregar Chart.js y su envoltorio de React a tu proyecto. Esto se puede lograr con un simple comando npm:

npm install react-chartjs-2 chart.js

Este comando obtiene todo lo que necesitas para comenzar a crear gráficos hermosos. A continuación, profundicemos en cómo puedes incorporar un gráfico en tu componente React.

Creando un Componente de Gráfico en React

Imagina que tienes la tarea de mostrar las tendencias de precios de un producto a lo largo del tiempo. Así es como puedes crear un gráfico de línea responsive usando Chart.js y React:

import { Line } from "react-chartjs-2";
import { Chart as ChartJS } from "chart.js/auto";

import styles from "@/styles/ChartView.module.scss";

const ChartView = ({ product }) => {
  const chartData = {
    labels: product.dates,
    datasets: [
      {
        label: "prices",
        data: product.prices,
        backgroundColor: "#e2e4ef",
        borderColor: "#e2e4ef",
      },
    ],
  };
  ChartJS.defaults.color = "#8f99b2";

  return (
    <div className={styles.main}>
      <h3 className={styles.productName}>{product.name}</h3>
      <Line className={styles.lineChart} data={chartData} />
    </div>
  );
};

export default ChartView;

En este fragmento, ChartView es un componente React funcional que toma un objeto product como prop, conteniendo arreglos de dates y prices. Estos arreglos poblán las etiquetas y conjuntos de datos del gráfico, respectivamente. El componente Line de react-chartjs-2 se utiliza para renderizar el gráfico de línea, estilizado con módulos CSS para un aspecto pulido.

chartData: Este objeto configura los datos y la apariencia del gráfico. labels se utilizan para denotar los puntos del eje x, que en este caso, son fechas. El arreglo datasets contiene objetos que describen la serie de datos. Para cada conjunto de datos, especificamos la etiqueta (mostrada en la leyenda y las herramientas de ayuda), los puntos de datos reales (precios) y opciones de estilo como backgroundColor y borderColor para la línea y el área debajo de la curva.

ChartJS.defaults.color: Esto establece un color de fuente predeterminado para todos los gráficos en la aplicación, proporcionando un esquema de colores consistente. Esta configuración afecta a las herramientas de ayuda, el texto de la leyenda y las etiquetas de los ejes, mejorando la legibilidad y manteniendo un tema visual cohesivo.

Conclusión

Integrar Chart.js y React no solo mejora el aspecto visual de tus aplicaciones web sino que también realza la experiencia del usuario en general. Los gráficos y diagramas pueden transformar páginas estáticas en interfaces dinámicas, haciendo que conjuntos de datos complejos sean comprensibles a simple vista.