To render your first chart in a React application using Chart.js, you begin by creating a React component that manages the chart's lifecycle and ensures the chart is displayed correctly in the browser. Start by preparing a simple functional component. Inside this component, you will use a canvas element as the drawing surface for Chart.js. React manages the DOM, while Chart.js draws directly to the canvas, so you need to access the canvas DOM node using a React ref.

First, set up your component by importing React and the useRef and useEffect hooks. The useRef hook allows you to obtain a reference to the canvas element, and useEffect ensures your chart is created after the component mounts.

A basic implementation looks like this:

import React, { useRef, useEffect } from "react";
import Chart from "chart.js/auto";

function SimpleChart() {
  const canvasRef = useRef(null);

  useEffect(() => {
    const ctx = canvasRef.current.getContext("2d");
    const chartInstance = new Chart(ctx, {
      type: "bar",
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [
          {
            label: "Votes",
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)",
              "rgba(75, 192, 192, 0.2)",
              "rgba(153, 102, 255, 0.2)",
              "rgba(255, 159, 64, 0.2)",
            ],
            borderColor: [
              "rgba(255, 99, 132, 1)",
              "rgba(54, 162, 235, 1)",
              "rgba(255, 206, 86, 1)",
              "rgba(75, 192, 192, 1)",
              "rgba(153, 102, 255, 1)",
              "rgba(255, 159, 64, 1)",
            ],
            borderWidth: 1,
          },
        ],
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            display: true,
          },
        },
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      },
    });

    return () => {
      chartInstance.destroy();
    };
  }, []);

  return <canvas ref={canvasRef} />;
}

export default SimpleChart;

This code defines a SimpleChart component that creates a bar chart when the component is mounted. The chart is drawn on the canvas referenced by canvasRef. When the component is unmounted, the chart is destroyed to clean up resources.

When working with Chart.js inside React, two key objects control what and how your chart displays: the data object and the options object. The data object defines the information that will be visualized, such as labels and datasets. For example, the labels array provides the names for each category on the x-axis, while the datasets array holds the values and styling for each group of data.

The options object customizes the chart's appearance and behavior. This includes settings for responsiveness, legends, tooltips, and axis configuration. In the example above, responsive: true makes the chart resize with its container, and the scales section ensures the y-axis starts at zero. The plugins property allows you to configure built-in Chart.js plugins, such as legends and tooltips, directly in the options object.

Both the data and options objects are passed to Chart.js when you instantiate a new chart. In React, these objects are often defined within the component or passed in as props for reusability and flexibility.

React's component lifecycle plays a critical role in how you render and manage Chart.js charts. Since Chart.js draws directly to a canvas element, you must ensure the chart is only created after the canvas is mounted in the DOM. This is why the useEffect hook is used with an empty dependency array—it runs the chart creation code after the first render.

It is also important to clean up the chart instance when the component unmounts. Chart.js maintains internal state and event listeners, so failing to destroy the chart can lead to memory leaks or incorrect behavior if the component is mounted again. By returning a cleanup function in useEffect that calls chartInstance.destroy(), you ensure the chart is properly disposed of whenever the component is removed from the DOM.

Understanding this lifecycle helps you avoid issues with re-rendering and keeps your chart components efficient and bug-free.