Plotly.js: Extra bar traces show up in stacked bar chart in relative barmode in >=1.48.0

[linusmarco]

For stacked bar charts with barmode='relative', super-thin bar traces show up on the plot when the bar height should be zero:
https://codepen.io/anon/pen/xoZOxP

This bug was introduced in 1.48.0 it seems, as the plot renders as expected in 1.47.4:
https://codepen.io/anon/pen/dBBJxW

This issue occurs in Chrome and Edge. I have not tried FF, but given the nature of the bug (extra path elements), I imagine this will occur on any browser.

[archmoj]

This is the desirable behaviour in respect to https://github.com/plotly/plotly.js/issues/3797.

[linusmarco]

Thanks, @archmoj for the response. This happens even if I set line width to 0, though:

var trace2 = {
  x: [1, 2, 3, 4],
  y: [0, 0, 0, 16],
  name: 'Trace2',
  type: 'bar',
  marker: {
    color: 'hotpink',
    line: {width: 0}
  }
};

[linusmarco]

Also, if that is the desired behavior, then there is a problem that the behavior does not occur with certain plot dimensions, e.g. 700x700 in the example I linked above (note that this doesn't appear to just a a "square" thing, that's just the first set of dims I found)

[archmoj]

You may consider passing null values instead of zeros, if you would like to skip them.
Here is an example.

[linusmarco]

Okay, I can do that as a workaround. There's no way to pass 0 and not have a visible trace render, though?

And per my previous comment, it seems that you actually may have a bug that's the exact opposite of what I originally reported (for certain plot dimensions)

[linusmarco]

Also, looking at this a bit more, null really isn't a viable workaround. When I use null instead of zero, the tooltip for the zero (now null) value doesn't show up. This actually makes a lot of sense to me: null and zero are conceptually different: null is the absence of a value (e.g. 10 people from this group were surveyed and nobody gave a response), whereas zero is a value with zero magnitude (e.g. 10 people from this group were surveyed and 0 answered 'yes'). So this still leaves me with no good solution for zero values in a stacked bar chart unless there is another workaround other than setting the value to null.

[archmoj]

What about using color arrays there?
Here is a codepen.

[etpinard]

Thanks for writing in @linusmarco !

This is a bug. We should not draw an outline when marker.line.width is set or coerced to 0.

[etpinard]

It is a little hard to see sometimes, but that pink line is clearly appended into the DOM

Try

var trace1 = {
  x: [1, 2, 3, 4],
  y: [1, -4, 0, 0],
  name: 'Trace1',
  type: 'bar',
  marker: {
    color: 'limegreen'
  }
};
var trace2 = {
  x: [1, 2, 3, 4],
  y: [0, 0, 0, 16],
  name: 'Trace2',
  type: 'bar',
  marker: {
    color: 'hotpink'
  }
};

var data = [trace1, trace2];
var layout = {
  barmode: 'relative',
  width: 700,
  yaxis: {range: [-6, 20]},
  height: 500
};
Plotly.newPlot('graph', data, layout, {showSendToCloud:true});

gd._fullData.map(t => t.marker.line.width)
// => [0, 0]

[archmoj]

@etpinard just to double check the marker should not be drawn when marker.line.color is zero?

[etpinard]

We should not draw bars that have size=0 and marker.line.width=0

[linusmarco]

Thanks for tackling this @archmoj and @etpinard! Let me know if you need anything else from me.