React Recharts LineChart未渲染求助：参数设置是否存在问题？

嘿，我看了你的代码，发现两个关键问题导致图表没显示出来：

1. 缺少必要的坐标轴组件 #

Recharts的LineChart需要搭配XAxis和YAxis才能正确渲染（它们负责构建图表的基础坐标系），你的代码里只引入了Line组件，没有添加坐标轴，所以图表无法正常渲染。

2. 未指定LineChart的尺寸 #

LineChart需要明确的width和height属性来确定渲染区域的大小，默认情况下如果不设置，可能会因为尺寸为0而完全看不到内容。

修正后的完整代码 #

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

const data = [
  { name: "Jan", value: 400 },
  { name: "Feb", value: 300 },
  { name: "Mar", value: 200 },
  { name: "Apr", value: 278 },
  { name: "May", value: 189 }
];

export default function App() {
  return (
    <div className="App">
      {/* 给LineChart设置明确的宽高，同时引入必要的坐标轴组件 */}
      <LineChart width={600} height={300} data={data}>
        <XAxis dataKey="name" /> {/* 绑定数据中的name字段作为横轴标签 */}
        <YAxis /> {/* 自动处理纵轴数值范围 */}
        <Tooltip /> {/* 可选：添加后鼠标悬停可查看数据详情，提升交互体验 */}
        <Line 
          type="monotone" 
          dataKey="value" 
          stroke="#8884d8" 
          strokeWidth={2} {/* 可选：让线条更清晰 */}
        />
      </LineChart>
    </div>
  );
}

关键修改说明 #

• 给LineChart添加width和height属性：你可以根据页面布局需求调整这两个数值；
• 引入并添加XAxis和YAxis：这是LineChart渲染的基础，没有它们图表无法构建坐标系；
• 可选添加Tooltip：让用户能更直观地查看每个数据点的具体数值；
• 优化Line的strokeWidth：让线条更显眼，提升视觉效果。

这样修改后，图表应该就能正常显示了。另外也可以确认下Recharts依赖是否正确安装（比如通过npm install recharts或yarn add recharts），不过从你的代码来看依赖应该是没问题的。

内容的提问来源于stack exchange，提问作者Stéphane Joos