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