Ggtcf

Confusion about Complex Continued Fraction

Which classes are needed to have access to every spell in the PHB?

Is it possible to avoid unpacking when merging Association?

Outlet with 3 sets of wires

Rationale to prefer local variables over instance variables?

Which situations would cause a company to ground or recall a aircraft series?

Vocabulary for giving just numbers, not a full answer

What materials can be used to make a humanoid skin warm?

How to draw dashed arc of a circle behind pyramid?

Shifting between bemols (flats) and diesis (sharps)in the key signature

Giving a career talk in my old university, how prominently should I tell students my salary?

Has a sovereign Communist government ever run, and conceded loss, on a fair election?

how to modify custom status text color in UI component grid magento 2?

What do you call someone who likes to pick fights?

What will happen if my luggage gets delayed?

When a wind turbine does not produce enough electricity how does the power company compensate for the loss?

Signed and unsigned numbers

How can I manipulate the output of Information?

What stops an assembly program from crashing the operating system?

Am I understanding this Storm King's Thunder map wrong?

In the late 1940’s to early 1950’s what technology was available that could melt a LOT of ice?

How do we create new idioms and use them in a novel?

What is Tony Stark injecting into himself in Iron Man 3?

How to write a chaotic neutral protagonist and prevent my readers from thinking they are evil?

Recharts Line activeDot function breaks tooltip?

1

I'm trying to trigger a function based on the activeDot of a Line in Recharts.

With the default value of true, moving the mouse around the chart shows the default tooltip, a vertical highlighted gridline, and the dots on the line are made larger, as expected.

However, say I want to trigger an event with the payload from the activeDot:

 activeDotHandler(data) 
 this.setState( dotData: data ); // to be used in a different part of the webpage
 

 render() 
 return (
 <LineChart ...>
 <XAxis ... />
 <YAxis ... />

 <Tooltip />

 <Line activeDot=this.activeDotHandler.bind(this) ... />

 </LineChart>
 );
 

This works, but the tooltip and highlighted line no longer show up like when you have activeDot=true.

Returning true from the function also doesn't work.

I've tried things like activeDot= onMouseOver: this.activeDotHandler.bind(this) but then the mouse must be directly over the dot.

I just want the default tooltip and activeDot functionality with the addition of an event with the activeDot's payload.

Any ideas what I'm doing wrong? Thank you in advance!

EDIT: I also tried adding onMouseOver to the <LineChart> itself, which helpfully gave me an event containing the payload of the active point. However, that STILL disables the default tooltip/highlighted grid/activedot styling.

EDIT 2: Also tried returning the <circle> after this.setState(). Still same problem.

javascript reactjs recharts

share|improve this question

edited Mar 7 at 6:07

IceColdMax

asked Mar 7 at 3:15

IceColdMaxIceColdMax

62

New contributor

IceColdMax is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment | 

1

I'm trying to trigger a function based on the activeDot of a Line in Recharts.

With the default value of true, moving the mouse around the chart shows the default tooltip, a vertical highlighted gridline, and the dots on the line are made larger, as expected.

However, say I want to trigger an event with the payload from the activeDot:

 activeDotHandler(data) 
 this.setState( dotData: data ); // to be used in a different part of the webpage
 

 render() 
 return (
 <LineChart ...>
 <XAxis ... />
 <YAxis ... />

 <Tooltip />

 <Line activeDot=this.activeDotHandler.bind(this) ... />

 </LineChart>
 );
 

This works, but the tooltip and highlighted line no longer show up like when you have activeDot=true.

Returning true from the function also doesn't work.

I've tried things like activeDot= onMouseOver: this.activeDotHandler.bind(this) but then the mouse must be directly over the dot.

I just want the default tooltip and activeDot functionality with the addition of an event with the activeDot's payload.

Any ideas what I'm doing wrong? Thank you in advance!

EDIT: I also tried adding onMouseOver to the <LineChart> itself, which helpfully gave me an event containing the payload of the active point. However, that STILL disables the default tooltip/highlighted grid/activedot styling.

EDIT 2: Also tried returning the <circle> after this.setState(). Still same problem.

javascript reactjs recharts

share|improve this question

edited Mar 7 at 6:07

IceColdMax

asked Mar 7 at 3:15

IceColdMaxIceColdMax

62

New contributor

IceColdMax is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment | 

I'm trying to trigger a function based on the activeDot of a Line in Recharts.

With the default value of true, moving the mouse around the chart shows the default tooltip, a vertical highlighted gridline, and the dots on the line are made larger, as expected.

However, say I want to trigger an event with the payload from the activeDot:

 activeDotHandler(data) 
 this.setState( dotData: data ); // to be used in a different part of the webpage
 

 render() 
 return (
 <LineChart ...>
 <XAxis ... />
 <YAxis ... />

 <Tooltip />

 <Line activeDot=this.activeDotHandler.bind(this) ... />

 </LineChart>
 );
 

This works, but the tooltip and highlighted line no longer show up like when you have activeDot=true.

Returning true from the function also doesn't work.

I've tried things like activeDot= onMouseOver: this.activeDotHandler.bind(this) but then the mouse must be directly over the dot.

I just want the default tooltip and activeDot functionality with the addition of an event with the activeDot's payload.

Any ideas what I'm doing wrong? Thank you in advance!

EDIT: I also tried adding onMouseOver to the <LineChart> itself, which helpfully gave me an event containing the payload of the active point. However, that STILL disables the default tooltip/highlighted grid/activedot styling.

EDIT 2: Also tried returning the <circle> after this.setState(). Still same problem.

javascript reactjs recharts

share|improve this question

edited Mar 7 at 6:07

IceColdMax

asked Mar 7 at 3:15

IceColdMaxIceColdMax

62

New contributor

IceColdMax is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

 activeDotHandler(data) 
 this.setState( dotData: data ); // to be used in a different part of the webpage
 

 render() 
 return (
 <LineChart ...>
 <XAxis ... />
 <YAxis ... />

 <Tooltip />

 <Line activeDot=this.activeDotHandler.bind(this) ... />

 </LineChart>
 );
 

share|improve this question

edited Mar 7 at 6:07

IceColdMax

asked Mar 7 at 3:15

IceColdMaxIceColdMax

62

New contributor

IceColdMax is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

share|improve this question

edited Mar 7 at 6:07

IceColdMax

asked Mar 7 at 3:15

IceColdMaxIceColdMax

62

New contributor

IceColdMax is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

asked Mar 7 at 3:15

IceColdMaxIceColdMax

62

New contributor

IceColdMax is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

asked Mar 7 at 3:15

IceColdMaxIceColdMax

62