How can I integrate a chart library into my React app?

How can I integrate a chart library into my React app?

You can integrate a chart library like Chart.js or Recharts by installing the library and importing it into your components.

What are the steps to install Chart.js?

First, run npm install chart.js in your project directory. Then, import it in your component using import { Chart } from 'chart.js';.

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

Sure! Here's a basic example:

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

const data = {
  labels: ['January', 'February', 'March', 'April'],
  datasets: [{
    label: 'My First dataset',
    data: [65, 59, 80, 81],
    fill: false,
    backgroundColor: 'rgb(75, 192, 192)',
    borderColor: 'rgba(75, 192, 192, 0.2)',
  }],
};

<Line data={data} />

What other chart libraries can I use with React?

You can also use libraries like Recharts, Victory, and Nivo, which are all great for React applications.