rechart如何添加实心圆点

Question

我正在用 rechart 绘制 lineChart，当有虚线时，该图表的点也变成破折号，但我想要完整的圆圈而不是虚线圆圈怎么办？

这是我用过的代码

<LineChart width={600} height={300} data={data}
        margin={{top: 20, right: 30, left: 20, bottom: 10}}>
   <CartesianGrid strokeDasharray="3 3"/>
   <XAxis dataKey="name" height={60} />
   <YAxis/>
   <Tooltip/>
   <Legend />
   <Line type="monotone"  dataKey="pv" stroke="#8884d8" label={<CustomizedLabel />}/>
   <Line type="monotone"  strokeDasharray="3 3" dataKey="uv" stroke="red" />
  </LineChart>

并输出：

我希望红点是完整的圆而不是虚线圆，只有虚线，请有人帮忙

谢谢

Answer 1

您可以通过在 Line 组件中使用活动点属性来自定义和渲染自定义点，示例如下：

   <Line type="monotone"  strokeDasharray="3 3" dataKey="uv" stroke="red" 
   dot={{ stroke: 'red', strokeWidth: 1, r: 4,strokeDasharray:''}}
   />

这里是recharts官方文档中自定义dot的另一个例子： https://recharts.org/en-US/examples/CustomizedDotLineChart

这是对您的代码的改编： https://jsfiddle.net/ys6zwjaL/#&togetherjs=0jVcg5yr0N

rechart如何添加实心圆点

How to add solid round dot in rechart

reactjs

recharts