Ufdjrw

Mimic lecturing on blackboard, facing audience

What the heck is gets(stdin) on site coderbyte?

How do you justify more code being written by following clean code practices?

How to test the sharpness of a knife?

Why didn't Voldemort know what Grindelwald looked like?

How to make money from a browser who sees 5 seconds into the future of any web page?

Did I make a mistake by ccing email to boss to others?

Why is the Sun approximated as a black body at ~ 5800 K?

Giving feedback to someone without sounding prejudiced

What (the heck) is a Super Worm Equinox Moon?

Can I say "fingers" when referring to toes?

Is there a way to play vibrato on the piano?

How to make a list of partial sums using forEach

Would this string work as string?

Grepping string, but include all non-blank lines following each grep match

Can I cause damage to electrical appliances by unplugging them when they are turned on?

Proving an identity involving cross products and coplanar vectors

Do I have to know the General Relativity theory to understand the concept of inertial frame?

"Oh no!" in Latin

El Dorado Word Puzzle II: Videogame Edition

How many people need to be born every 8 years to sustain population?

Do you waste sorcery points if you try to apply metamagic to a spell from a scroll but fail to cast it?

How to leave product feedback on macOS?

Animation: customize bounce interpolation

Recharts Line activeDot function breaks tooltip?

Is there an “exists” function for jQuery?var functionName = function() vs function functionName() Set a default parameter value for a JavaScript functionHow to break/exit from a each() function in JQuery?Short circuit Array.forEach like calling breakWhat does the exclamation mark do before the function?How do I pass command line arguments to a Node.js program?Is there a standard function to check for null, undefined, or blank variables in JavaScript?Chart.js ungroup data in tooltip with multiple linesHow to get xAxis correct on LineChart?

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

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

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

 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

share|improve this question

edited Mar 7 at 6:07

IceColdMax

asked Mar 7 at 3:15

IceColdMaxIceColdMax

62

asked Mar 7 at 3:15

IceColdMaxIceColdMax

62

asked Mar 7 at 3:15

IceColdMaxIceColdMax

62