Chart.js React Tutorial

What is Chart.js

Chart.js is known for its simplicity and ease of use. It creates responsive charts out-of-the-box and will look good on most devices natively. Chart.js uses HML5 canvas elements, which is more scalable than an SVG rendering approach. it is well documented with good community support. Chart.js isn't as highly customizable as other options on the market, which can be a negative for those looking to fully customize their end experience.

What is React?

React is a popular JavaScript library for building user interfaces, particularly single-page applications where dynamic content needs to be updated without reloading the page. Developed by Facebook (now Meta Platforms), React has grown in popularity due to its simplicity, efficiency, and scalability. It allows developers to build large web applications that can change data without reloading the page, offering a responsive and fluid user experience. React has a virtual DOM for faster manipulation, a component based architecture, and a great community for support. It is efficient, flexible, and widely used in the market.

Chart.js React Code Example

This example demonstrates how to use Chart.js with React to create dynamic and interactive charts. We'll be building a simple line chart that visualizes data over time. To get started, you need to have Chart.js and React Chart.js 2 installed in your project.

Step 1: Install the necessary packages

npm install chart.js react-chartjs-2


Step 2: Import the components

In your React component file, import Line from react-chartjs-2 and Chart from chart.js/auto to have Chart.js automatically register its elements.

import { Line } from 'react-chartjs-2';
import 'chart.js/auto';


Step 3: Define your chart data and options

Create an object for your data and another for the chart configuration (options). Here’s an example:

const data = {
 labels: ['January', 'February', 'March', 'April', 'May'],
 datasets: [
   {
     label: 'Monthly Sales',
     data: [65, 59, 80, 81, 56],
     fill: false,
     borderColor: 'rgb(75, 192, 192)',
     tension: 0.1
   }
 ]
};

const options = {
 scales: {
   y: {
     beginAtZero: true
   }
 },
 maintainAspectRatio: false
};


Step 4: Render the chart

Now, use the Line component from react-chartjs-2 and pass in your data and options. Here's how to render the chart within a React component:

const MyLineChart = () => {
 return (
   <div style={{ height: '400px', width: '600px' }}>
     <Line data={data} options={options} />
   </div>
 );
}

export default MyLineChart;


Note: The example above hard-codes the chart size via inline styles. For a responsive chart, consider other styling approaches that better suit your application's needs.

That's it! You've now created a simple line chart using Chart.js in a React application. The Line component can be replaced with other chart types (e.g., Bar, Doughnut) available in react-chartjs-2, and you can customize the chart further by exploring more options provided by Chart.js documentation.