plotly / plotly/plotly.js

“Error parsing” in empty axis

Open
#6,298 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

I have a probably not common issue, but also probably easy to fix. I have also posted it in the community, and I reproduce it here.

I have a plot (that I create with Python but I edit later on the html/js) that looks like this:
6707dfe749f7dff3cada935f8145053ab34b425a

When I open the html, there are errors on the console:

Error: Problem parsing d="MNaN,NaNHNaNMNaN,NaNHNaN"
Error: Problem parsing d="MNaN,NaNHNaNMNaN,NaNHNaN"

Although the graphs look fine, these errors are annoying (as there are many graphs like this on the page, and therefore many errors).
(I have tested many versions 2.XX and it always happen, including 2.14.0).
Also, what seems to be causing this is related to the black line of xaxis2 and yaxis2 (which is the top-right graph). This is how the layout looks like for this part:

xaxis2: {
  anchor: "y2",
  domain: [0.806, 1.0],
  mirror: true,
  ticks: "",
  linecolor: "black",
  showgrid: false,
  range: [0.0, 1.0],
  fixedrange: true,
  showticklabels: false,
},
yaxis2: {
  anchor: "x2",
  domain: [0.73, 1.0],
  mirror: true,
  ticks: "",
  linecolor: "black",
  showgrid: false,
  range: [0.0, 1.0],
  fixedrange: true,
  showticklabels: false,
},

If I comment out the linecolor: "black", the errors disappear.

I have created a (somewhat) minimal example here: https://codepen.io/filipesmg/pen/ZExmorL
However, the error is not showing directly in codepen (maybe because the error is inside plotly.js?) If that code is put inside <html>(...)</html>, it shows up. The linecolor lines are 640 and 652.

Investigating the plotly.min.js file while running the code, I noticed that the error comes from this part:

(Y.attr = function (e, r) {
if (arguments.length < 2) {
(...)
}
return this.each(K(e, r));
}),

which calls the function K(e,r) that has:

function(){this.setAttribute(e,r)}}

The problem is that in my example, at some point there seems to be no argument to the function (e,r), and r is undefined. There are many times where arguments.length = 1 or 2, but there are 2 times where it is undefined. In these cases, it doesn't enter the if (arguments.length < 2) and it goes to return this.each(K(e, r)); where it gives an error in the .setAttribute(e,r). Maybe a simple if ( ! r) { return; } would solve the issue, but I can't follow more the code to know if it'd affect other things.

I'm using 12.3.1, and I this error shows up in Safari 15.4 and in Chrome 104.0.5112.79, but not on Firefox 103.0.2.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the minimal CodePen example and the generated HTML, focusing on the xaxis2/yaxis2 linecolor settings at lines 640 and 652. Trace the plotly.min.js path through the shown attr/setAttribute code and compare the two undefined-argument cases; done means the reproduced plot renders without console parsing errors while retaining the axis lines.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.