Adjusting Curve Tension for a Customized Look

Show how to adjust the tension of curve types like 'natural' or 'monotone' to customize the stretch and compress of the curve in relation to data points.

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

const data = [
  { name: 'Page A', value: 400 },
  { name: 'Page B', value: 300 },
  { name: 'Page C', value: 200 },
  { name: 'Page D', value: 278 },
  { name: 'Page E', value: 189 }
];

This code imports necessary components from Recharts and defines a dataset. The data array consists of objects with 'name' and 'value' fields, which will be used to plot points on the chart.

<LineChart width={600} height={300} data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Line type="monotone" dataKey="value" stroke="#8884d8" dot={{ stroke: '#8884d8', strokeWidth: 2 }} activeDot={{ r: 8 }} />
</LineChart>

Here we're creating a LineChart with our data. The 'monotone' type for the Line component gives us a smooth curve through our data points. The 'dot' and 'activeDot' properties allow customization of the curve's appearance at data points.