I am trying to edit shape in plotly js, but getting an error like this
issue is not there when I try to add new shape
please help,
thanks
I am trying to edit shape in plotly js, but getting an error like this
issue is not there when I try to add new shape
please help,
thanks
I recently encountered a similar error in my app, so I’m going to explain how I solved it and explain the cause, hoping that someone from the Plotly team will read it and fix it in future versions.
You don’t give much context on how you get the error, you only mention that when trying to edit the shape, but I don’t know if it’s when editing it manually because the shape is editable or because you’re modifying it through some Plotly function (update, relayout); in my case the error occurs when trying to update the graph through Plotly.update
We start by tracing the error from the most internal function which in this case is the drawShape function and we also see that the error is that it generates the shape path wrong, reviewing the function it calls another function called getPathString which is responsible for calculating the shape path and it receives two parameters, the gd which is the container layer and options which contains all the shape parameters, when reviewing the options I noticed that the x0 and x1 parameters or the xanchor had the undefined value and that is why the function that calculates the path returns an erroneous value, but the question was why the x0, x1 and xanchor parameters were undefined and all related to the x-axis values
Reviewing the error I see that it started from Plotly.update which updates the graph, not the shape, and this is the code that is executed
for(const trend in this.trends)
Plotly.update(this.kl.layer, this.trends[trend].layer, this.trends[trend].layout || {}, this.trends[trend].index)
Actually the graph, not the shape, is made up of two graphs so that I can put a different color to the ascending and descending movements of the same, that is why I have the for(), but since the first graph does not have a layout it passes an empty object to the update function and the second graph passes the following in the layout
{
"xaxis.type": "date",
"xaxis.range": this.kl.range.x
}
I do this because of another problem in Plotly, when updating a graph the x-axis values lose the date format and show milliseconds but these are only passed in the update of the last graph, well it seems that the problem occurs in the first update since nothing happened in the layout and for some reason Plotly deletes all the values related to the x-axis, that is why the values of x0, x1 and xanchor are undefined so the solution is to pass the values that I pass from the layout in the second graph also in the first one so my code that updates the graph is as follows
for(const trend in this.trends)
Plotly.update(this.kl.layer, this.trends[trend].layer, {
"xaxis.type": "date",
"xaxis.range": this.kl.range.x
}, this.trends[trend].index)