recharts_linechart_quickstart_with_axes_tooltip_grid.ts

1import React from 'react';
2import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
3
4interface DataPoint {
5  name: string;
6  uv: number;
7  pv: number;
8  amt: number;
9}
10
11const data: DataPoint[] = [
12  { name: 'Page A', uv: 400, pv: 2400, amt: 2400 },
13  { name: 'Page B', uv: 300, pv: 1398, amt: 2210 },
14  { name: 'Page C', uv: 200, pv: 9800, amt: 2290 },
15  { name: 'Page D', uv: 278, pv: 3908, amt: 2000 },
16  { name: 'Page E', uv: 189, pv: 4800, amt: 2181 },
17];
18
19const RenderLineChart: React.FC = () => (
20  <ResponsiveContainer width="100%" height={400}>
21    <LineChart data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
22      <Line type="monotone" dataKey="uv" stroke="#8884d8" />
23      <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
24      <XAxis dataKey="name" />
25      <YAxis />
26      <Tooltip />
27    </LineChart>
28  </ResponsiveContainer>
29);
30
31export default RenderLineChart;