Line paths are not correctly computed when their points are well-beyond the axis ranges

[ifll]

When building a scatter plot with both x and y logarithmic axis there is an error when placing a line shape on the plot.

The line is sometimes well displayed but when trying to zoom it disappears or appears not well placed.

The code used for displaying the line is the following:

• inside the layout variable for the plot making place the following:

var layout2 = {
.
.
.
shapes: [

                //line 45º

                {
                  type: 'line',
                  xref: 'x',
                  yref: 'y',
                  x0: 0.0001,
                  y0: 0.0001,
                  x1: 10000,
                  y1: 10000,
                  line: {
                    color: 'rgb(0, 0, 0)',
                    width: 1
                  }
                },



                   ],

              .
              .
              .
        };

there are around 1000 points to be displayed on the scatter plot

Do any of you know if this is a bug or if is is not the proper way to place a line on the plot and there is another method which could work?

Thank you.

[etpinard]

Thanks for writing in.

Can you elaborate on what you mean by not well-placed ?

Looks like log shapes are behavior as expected when no data is present: http://codepen.io/etpinard/pen/NxYyzL

Could you share the data you're using?

[ifll]

Unfortunately data I am using is not sharable...

Even though, within the example you have posted in your answer there appears the same problem I have been encountering on my plot, as when you zoom on the plotly plot around the line shape created it disappears (it might be that 2 or 3 zooms are required to check this problem).

Besides this, by non-well displayed I mean what I have explained in the previous paragraph of this answer. Also another effect of "non-well displayed" is that the line shape is displayed not complete but for a small range of its completion, or even that it is displayed not where it should be placed.

Hope this helps to understand the problem I have been encountering and thank you very much for your help.

[etpinard]

I can't replicate it.

Could you at least share a screenshot of the not-well-displayed line?

[etpinard]

Moreover, what browser are you using?

[ifll]

Here you can see some images of the problem I have reported and obtained from the link you have posted on your first answer on this chat.

This images are a followup of zooming on the plot created on the link you have posted.

As you would be able to see on the first image the line is well displayed. On the second one you can check the zoom I make, and on the 3rd image you can see the result of the zoom (which the line can still bee seen but it is not well paced, as it should be more diagonal). Finally another zoom is made in the forth image and in the last one the line is no longer visible.

Besides this, I am using mozilla firefox version 43.0.4 for Ubuntu 14.04 LTS

• image1:
  
• image2:
  
• image3:
  
• image4:
  
• image5:
  

[etpinard]

@ifll Thank you very much.

I can replicate this bug in FF 43 also. Chrome 48 behaves as expected though.

Thank you very much for reporting!

[ifll]

Thank you very much for your attention and support on this problem.

Do you know if this bug will be solved for mozilla firefox in a close future? Besides this, do you know if this bug is also happening in other webbrowsers such as "opera", "explorer", "safari" or "edge"? (I am building a web application and would be great to know if it happens in other browsers)

Thank you very much for your help!

[etpinard]

Do you know if this bug will be solved for mozilla firefox in a close future

In all honesty, browser-specific rendering bugs are rarely a priority for our (small) team of full-time maintainers.

Have you tried plotting your line as a data scatter trace with mode 'lines' instead? You could turn off hover text by setting hoverinfo to 'none'. Data lines are of course a more robust feature than shapes.

Besides this, do you know if this bug is also happening in other webbrowsers such as "opera", "explorer", "safari" or "edge"

I just tried in IE11 and everything works OK. I'll ask my colleagues to try it out on Safari. I'd would not recommend using plotly.js on Opera.

[ifll]

Ok, thank you very much.

I already tried doing what you purpose to create a new trace variable with the lines mode and the problem was the same... then was when I tried to post it here in github.

Thank you very much for your help and support, even though the bug is there for FF I can carry on working with chrome webbrowser and add an alert on the display advising to use chrome or explorer

[etpinard]

create a new trace variable with the lines mode and the problem was the same.

Very interesting. This bumps up the priority of this issue.

[ifll]

// var trace4 = {
// mode: 'lines+markers',
// x: {{ x_line45 }},
// y: {{ y_line45 }},
// line: {
// color: 'rgb(0, 0, 0)',
// width: 1,
// }
// };

This is the code I have used to do it on FF. The "x_line45" and "y_line45" are variables containing identic arrays of length 1000. I have used "lines+markers" as with only "lines" there was the same problem I have reported with the "shape" option of the layout, and I wanted to check if it was a mistake that the points were not displayed.

With the "lines+markers" option the markers were displayed but when zooming in the line disapeared or was missplaced as in the answer I have posted previously with the pictures of the bug found on FF.

[etpinard]

The problem is much more generalized than originally thought. Looks like all 2d svg line paths (traces and shapes) on any type of axes are not computed correctly when the line points are well-beyond the axis ranges. The problem does not only occur on zoom events. All browsers seems to be affected.

This codepen may help: http://codepen.io/etpinard/pen/NxYBNJ investigate the problem.