BUG in stacked area show/hide items

I have a stacked area chart with about 10 lines made using plotly python. When using a combination of click and double click on the legend items to show/hide the lines, the lines don’t always reshow correctly. I have not changed the function of click or double click.

Setup

  • I am using plotly v5.6.0.
  • I am embedding the figure as an iframe using plotly.offline.plot with output_type='div', include_plotlyjs=False
  • I am then inserting the resulting html in a django html template and including the javascript using <script src="https://cdn.plot.ly/plotly-2.10.0.min.js"></script>

I can replicate the problem consistently by:

  • Double clicking a legend item to isolate that line
  • Single clicking the same legend item to hide all lines
  • Double clicking any legend item to reshow all lines

image

It gets even worse if I then

  • Single click the original legend item to hide it
  • Single click the original legend item to show it again

image

Is this a plotly bug or have I done something wrong?

Update: this is definitely a plotly bug. Go to plotly’s simple chart codepen A Pen by plotly (codepen.io) and add “stackgroup: ‘one’” to the options to replicate.

var trace1 = {
  x: [1, 2, 3, 4], 
  y: [10, 15, 13, 17], 
  type: 'scatter',
  stackgroup: 'one'
};
var trace2 = {
  x: [1, 2, 3, 4], 
  y: [16, 5, 11, 9], 
  type: 'scatter',
  stackgroup: 'one'
};
var trace3 = {
  x: [1, 2, 3, 4], 
  y: [16, 5, 11, 9], 
  type: 'scatter',
  stackgroup: 'one'
};
var data = [trace1, trace2, trace3];
var layout = {
  title: "<b>This is a sample graph</b>",
  "titlefont": {
    "size": 36,
  },
  xaxis: {
    title: 'x Axis',
    titlefont: {
      family: 'Courier New, monospace',
      size: 18,
      color: '#7f7f7f'
    }
  },
  yaxis: {
    title: 'y Axis',
    titlefont: {
      family: 'Courier New, monospace',
      size: 18,
      color: '#7f7f7f'
    }
  },
}
Plotly.newPlot('myDiv', data, layout);

I’ve raised an issue here BUG: Show/hide legend items does not work for stacked area chart · Issue #6138 · plotly/plotly.js (github.com)

1 Like

The issue has not been solved still. Using Plotly 6.0.1
Image from a Dash interface:

.

However, when the image is downloaded using the controls on the graph, the issue is not there, which could mean that the problme is coming from the display functions (?) only

Same image when downloaded