Chart.js React Tutorial

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.