When you want to visualize trends over time in a React application, a line chart is often the best choice. The LineChart component from Recharts allows you to render a clean, interactive line graph with minimal setup. To get started, you need to provide at least two required props: width and height to specify the chart’s dimensions, and a data prop that holds the array of data points. Each data point is typically an object with keys representing the x-axis and y-axis values.

Here is a basic example of how to render a simple line chart using Recharts. The data array contains objects, each with a name (for the x-axis, like a date or label) and a value (for the y-axis, such as a measurement or count):

import { LineChart, Line, XAxis, YAxis, CartesianGrid } from "recharts";

const data = [
  { name: "Jan", value: 30 },
  { name: "Feb", value: 45 },
  { name: "Mar", value: 60 },
  { name: "Apr", value: 50 }
];

<LineChart width={400} height={300} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <Line type="monotone" dataKey="value" stroke="#8884d8" />
</LineChart>

In this example, the LineChart component receives the data prop and dimensions. The XAxis and YAxis components specify how to map the data for the chart axes. The Line component draws the actual line, with dataKey="value" indicating which property to plot on the y-axis. The stroke prop changes the color of the line.

To further customize your line chart, you can adjust the appearance and behavior of axes, grid, and the line itself using props and child components. The XAxis and YAxis components accept props like tick, label, and type to control tick formatting and axis labels. The CartesianGrid component, when included as a child, adds grid lines to the chart for better readability. You can customize the grid’s appearance using props like stroke and strokeDasharray.

The Line component offers several customization options. You can change the line’s color with the stroke prop, adjust the thickness using strokeWidth, and control the shape of the line with the type prop (like "monotone" for smooth curves or "linear" for straight lines). You can also set dot={false} to remove data point markers, or provide a custom dot renderer for more advanced visuals.

By combining these props and components, you can tailor the look and feel of your line chart to match your application’s needs and make your data easier to interpret.