Hi,
A part of my React.js+plotly.js web app is a scatter plot of a time series. I want to have movable vertical lines for controlling some behavior of the app. I can draw the lines using shapes, but don’t know how to move them using the mouse. Is there a way to do this?
You can find an example in https://codepen.io/fingerpori/pen/GGLWoz. I want to be able to move the red and green vertical lines left or right.
Thanks, now I can move the shapes (the green and red lines). Still two problems: 1) I would like to limit the movement to left and right, no up and down and 2) How can my code react to the movement of the shapes? I did not find any related events in the documentation.
We don’t expose a way to restrict edit-mode motions at the moment
Simply listen to plotly_relayout
Thank you very much, you saved my day (or actually night)! I cancel the up-down movements in the event listener by forcing the line back to the same vertical position.
Hi @fingerpori, I’m trying to achieve the same as you (move a shape but only to the left-right)… Which event did you use ?? would you mind to share your code ?. Thanks!
Edit: what I’m trying to achieve is to have a vertical line bar that I could move to another position. I was previously using Jqplot, and now migrating all my charts to plotly. In Jqplot moving a line only in one direction vertical/horizontal is straightforward…
I have code implemented in plotly to move points to a mouse.x mouse.y position (coordinates in pixels related to the chart), but that does not reflect on the data assigned to the plot object.
Example of what I want to achieve (already done in jqplot)
After some work, I figured it out to make something similar…
Basically:
-A line shape in my chart
-Disable the dragging events for the boundaries of the shape (in CSS). This only allows dragging the bar vertically/horizontally.
-Create the vertical line greater than required (use a custom multiplier -10/10 based on min/max values of data). If you adjust it nicely, your vertical bar never gets out of the chart.
-yaxis range set to min/max values of data. This way, chart is focused on the data, not on the bigger vertical shape we’ve created.
-Attached a function in the ‘plotly_afterplot’ to: retrieve the new line position, and redraw it again to adjust its vertical values to its original values (this is just in case, the user moved the shape vertically)
One more question: I have moving shapes now working by listening to onRelayout as you suggested. Now I want a different activity for just clicking on a shape. I tried to listen onClick, but it does nothing. Is the relayout listener somehow overriding the click listener and what should I do to catch clicks (maybe a different mode in my app for this activity)?
[Edited]
To experiment, I forked plotly.js and added an attribute ‘editable’ to shapes. If the plot is editable, you can still have some uneditable shapes by setting attribute editable: false in the definition of the shape. This way I can get the behavior I wanted. See https://github.com/eskonuutila/plotly.js. The fork does minor changes to three files src/components/shapes/attributes.js, src/components/shapes/defaults.js, and src/components/shapes/draw.js.
This feature could be useful to some other users of plotly.js too.
Esko
Hi @fingerpori.
Thanks a lot for sharing those files.
I don’t need that feature right now, but maybe in the future, who knows 
About clicking on a shape, my shapes are editable (draggable), so a click event, as far as I know, it’s impossible
Best Regards.
Javier
Hi @fjrial can you please tell me how did you do this
“Disable the dragging events for the boundaries of the shape (in CSS). This only allows dragging the bar vertically/horizontally.”
by setting editable true , its also allowing me to edit labels.
@fingerpori I think i need to use your fork. My use case is that I want some shapes to editable and others not. After quite a research I was not able to figure out if this level of customization is doable or not. Reading this, I could find that you are allow for some shapes to editable, which means others will be locked.
If this is the case, what is the best way to use this fork? do i have to replace those files (attributes.js, defaults.js & draw.js) into my npm package? I don’t think this is ideal since other developers might accidentally update ploty-dist npm and this will have your fork changes overwritten. What is the best way to use your fork if this level of customization is available in it?
Thanks,
@fjrial How did you disable the dragging events for the boundaries of the shape (in CSS). ?
Hi @josevera
use this CSS and modify it accordingly (this is for “circle”)
/** restrick pointer events to avoid shapes being dragged using its boundaries */
circle {
pointer-events: none !important;
}
Hi Fijral,
If you could please share your codepen, it would be great.
I would also appreciate you sharing the code. I am trying to get a similar behaviour.
At the moment, there are two ways to make shapes editable at the moment.
shape.editable: true in layout for a particular shapeconfig.editable: true useful for editing all shapes, titles, etc.Though there is no further capability to control the direction of movements etc, right? Any input on how this may be possible?