Creating a Smooth Chart with Natural Curves

Illustrate how to implement a natural curve type in React Charts for a smoother and more visually appealing representation of data trends.

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

Imports React and necessary components from Recharts.

const data = [
  { name: 'Page A', uv: 4000, pv: 2400 },
  { name: 'Page B', uv: 3000, pv: 1398 },
  { name: 'Page C', uv: 2000, pv: 9800 },
  { name: 'Page D', uv: 2780, pv: 3908 },
  { name: 'Page E', uv: 1890, pv: 4800 },
  { name: 'Page F', uv: 2390, pv: 3800 },
  { name: 'Page G', uv: 3490, pv: 4300 },
];

Defines the data to be used in the chart. Each object represents a point in the chart.

const SmoothLineChart = () => (
  <ResponsiveContainer width='100%' height={300}>
    <LineChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
      <CartesianGrid strokeDasharray='3 3' />
      <XAxis dataKey='name' />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line type='monotone' dataKey='pv' stroke='#8884d8' activeDot={{ r: 8 }} />
      <Line type='monotone' dataKey='uv' stroke='#82ca9d' />
    </LineChart>
  </ResponsiveContainer>
);

Creates a LineChart component with smooth lines. The 'monotone' type prop on the Line component ensures the lines are smooth and curved.

export default SmoothLineChart;

Exports the SmoothLineChart component for use in other parts of the application.