Optimizing Render Performance with Monotone Curves

Provide an example of using a monotone curve to balance visual smoothness and rendering performance in large datasets.

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

Import necessary components from Recharts.

const data = Array.from({ length: 1000 }, (_, index) => ({
  name: `Point ${index}`, value: Math.sin(index / 100) * 100 + 150
}));

Generate a large dataset for demonstration. Here, we're simulating a sine wave.

const PerformanceOptimizedLineChart = () => (
  <LineChart width={730} height={250} 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" />
  </LineChart>
);

This is the LineChart component. The 'monotone' type for the <Line /> component ensures that the line is smooth, which is visually pleasing but also optimized for performance on large datasets by reducing the complexity of the path calculation.

export default PerformanceOptimizedLineChart;

Export the chart component for usage in your application.