How can I create responsive charts in React using Chart.js?

How can I create responsive charts in React using Chart.js?

You can use the 'react-chartjs-2' library, which is a wrapper for Chart.js in React. It allows you to create responsive charts easily.

What are the steps to install 'react-chartjs-2'?

First, you need to install Chart.js and react-chartjs-2 using npm or yarn. Run: npm install chart.js react-chartjs-2.

Can you show me a simple example of a responsive chart?

Sure! Here's a basic example:

import { Bar } from 'react-chartjs-2';

const data = {
  labels: ['Red', 'Blue', 'Yellow'],
  datasets: [{
    label: '# of Votes',
    data: [12, 19, 3],
    backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
  }],
};

const MyChart = () => <Bar data={data} options={{ responsive: true }} />;

How do I customize the chart options?

You can customize the chart options by passing an options prop to the chart component. For example:

<Bar data={data} options={{ responsive: true, maintainAspectRatio: false }} />