Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Recharts: How to format the solid vertical line (when hovering over a data point)?

Tags:

recharts

The Recharts docs describe how to format the style of a data point during hover, as well as the tooltip.

However during a hover, the solid vertical line that appears does not seem to be described in the docs (unless I'm missing it).

Is there a prop that allows for formatting that line?

(If you don't know what I'm talking about, it's the solid vertical line above "Nov-14" in my example image)

This is my line chart and the result:

                     <ResponsiveContainer>
                        <LineChart data={this.props.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                            <CartesianGrid strokeDasharray="3 3" />
                            <XAxis dataKey="date" tickFormatter={xFormatter}/>
                            <YAxis dataKey="value" tickFormatter={yFormatter}/>
                            <Tooltip />
                            <Line type="monotone" dataKey="value" stroke="#4F80E4" strokeWidth={2}/>
                        </LineChart>
                    </ResponsiveContainer>

like image 751
Wills Manley Avatar asked Sep 05 '25 03:09

Wills Manley


2 Answers

You will need to edit the cursor :)

<Tooltip cursor={false}/>
like image 89
Renaldo Balaj Avatar answered Sep 07 '25 23:09

Renaldo Balaj


Try it like this

<Tooltip cursor={{ stroke: "#29BDAD", strokeDasharray: 5 }} />
like image 21
Fabricio Cunha Avatar answered Sep 08 '25 00:09

Fabricio Cunha