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?
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.
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…
-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)?
@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?