How to add solid round dot in rechart

Question

I'm plotting lineChart with rechart, and when there is dashed line, dot of that chart also becoming dash, but I want full circle instead of dashed circle how to do that?

This is the code I've used

<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>

And output:

I want red dot to be fully circle instead of dotted circle, only line shouid be dashed,Please someone help

Thanks

Answer 1

You can customize and render custom dot by using active dot property inside Line component, here is example :

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

here is another example of customizing dot in the official documentation of recharts : https://recharts.org/en-US/examples/CustomizedDotLineChart

here is an adaptation of your code: https://jsfiddle.net/ys6zwjaL/#&togetherjs=0jVcg5yr0N