logo studio roma
EN / ES

Back to Blog

Chart Js in React

Pablo Romera foto

Pablo Romera 

/

 January 20, 2024 / 3 min read

Pablo Romera foto

Visualize data with Chart.js and React

Discover how integrating Chart.js with React can revolutionize your business web design and development, offering dynamic data visualization that captivates and informs.


Introduction

In today's fast-paced digital world, the ability to present complex data in an easily digestible format is invaluable. This is where the synergy between Chart.js and React comes into play, offering a seamless integration for developers looking to elevate their business web design and development. Through this article, we'll embark on a journey to explore the nuts and bolts of getting started with Chart.js and React, ensuring that you're well-equipped to bring your data visualization to the next level.

Chart Js and React Js

When we talk about Chart.js and React.js, we're discussing a powerful combination that brings simplicity, elegance, and functionality to the forefront of web development. Chart.js is a versatile JavaScript library for creating stunning, interactive charts with ease, while React.js is renowned for its efficiency in building user interfaces. The integration of these two technologies allows developers to construct dynamic charts within React applications, enhancing the user experience through visually appealing data presentations.

Getting Started with Chart.js in React

Integrating Chart.js with React might seem daunting at first, but it's quite straightforward once you get the hang of it. The first step is to install Chart.js and the React wrapper for Chart.js, ensuring that these tools are ready to work their magic in your React app.

Installation and Setup

To kick things off, you'll need to add Chart.js and its React wrapper to your project. This can be achieved with a simple npm command:

npm install react-chartjs-2 chart.js

This command fetches everything you need to start crafting beautiful charts. Next, let's delve into how you can incorporate a chart into your React component.

Crafting a Chart Component in React

Imagine you're tasked with displaying the price trends of a product over time. Here's how you can create a responsive line chart using Chart.js and 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;

In this snippet, ChartView is a functional React component that takes a product object as a prop, containing dates and prices arrays. These arrays populate the chart's labels and datasets, respectively. The Line component from react-chartjs-2 is used to render the line chart, styled with CSS modules for a polished look.

chartData: This object configures the data and appearance of the chart. labels are used to denote the x-axis points, which in this case, are dates. The datasets array contains objects that describe the data series. For each dataset, we specify the label (shown in the legend and tooltips), the actual data points (prices), and styling options such as backgroundColor and borderColor for the line and the area under the curve.

ChartJS.defaults.color: This sets a default font color for all charts in the application, providing a consistent color scheme. This setting affects tooltips, legend text, and axis labels, enhancing readability and maintaining a cohesive visual theme.

Conclusion

Integrating Chart.js and React not only improves the visual aspect of your web applications but also enhances the overall user experience. Charts and graphs can transform static pages into dynamic interfaces, making complex data sets comprehensible at a glance.