Black Lives Matter. Please consider donating to Black Girls Code today.

Update Filled Area till the x position of a draggable line shape

Hi:

I have a chart with a ‘filledtoy’ line, and also a line shape that is draggable.

I want to update the filledarea till the x value of the line shape after it’s been dragged.

I attached and event to ‘plotly_afterplot’ to adjust the data belonging to the filled area
I almost have it, but, the problem I’m having is that the update only occurs after I dragged the vertical line twice

Please, take a look at this example with my current code
https://codepen.io/anon/pen/varNpv?editors=1010

Anyone faced this problem or knows a way to fix this code ??

Thanks!!

You’re not using relayout as intended. Relayout expects an update object that modifies the layout, calling Plotly.relayout(graphDiv) won’t do anything by itself. As you’re mutating some internal fields (it’s probably always a bad idea to play around with gd._fullData by the way), the graph eventually updates, but you shouldn’t count on that.

If you prefer updating your graph, by first mutating the data/state yourself, I’d recommend using Plotly.react. More info: https://plot.ly/javascript/plotlyjs-function-reference/#plotlyreact

Thanks @etienne

Will try and will update my post to reflect the changes in my code, just in case, someone faces/or tries to achieve something similar

code fixed and working fine!!

Thanks a lot @etienne

Updated my previous pen to reflect the changes… (sorry for the dirty code… didnt have the time to cleanup :stuck_out_tongue: ) Hope it helps someone

https://codepen.io/anon/pen/varNpv?editors=1010