Stacked bar chart overlapping in plotly js

I am building a stacked bar chart from an external database. Along the x axis I have the month and year and along the y axis is an integer. I have written code to build traces which results in the following data objects below.

However, when these bar charts are rendered they end up overlapping each other resulting in a single bar chart drawing over others. If you hover over different regions of a bar chart you will notice that the hover text appears to change from one category to another. Disabling traces from the legend on the left will show other hidden bar charts.

Is there any way I can resolve this rendering issue? https://codepen.io/Duzhla/pen/WNzEMdJ

var data = [
  {
    "x": [
      "Apr-2022",
      "May-2022",
      "Jun-2022",
      "Jul-2022",
      "Aug-2022"
    ],
    "y": [
      1338.84,
      1258.28,
      0,
      1331.68,
      1331.68
    ],
    "type": "bar",
    "orientation": "v",
    "name": "Wood"
  },
  {
    "x": [
      "Apr-2022",
      "May-2022",
      "Jun-2022",
      "Jul-2022",
      "Aug-2022"
    ],
    "y": [
      -416.67,
      -416.67,
      0,
      0,
      -416.67
    ],
    "type": "bar",
    "orientation": "v",
    "name": "Vegetables"
  },
  {
    "x": [
      "Apr-2022",
      "May-2022",
      "Jun-2022",
      "Jul-2022",
      "Aug-2022"
    ],
    "y": [
      -1116,
      -2220.75,
      0,
      -200,
      0
    ],
    "type": "bar",
    "orientation": "v",
    "name": "Steel Waste"
  },
  {
    "x": [
      "Apr-2022",
      "May-2022",
      "Jun-2022",
      "Jul-2022",
      "Aug-2022"
    ],
    "y": [
      -505.04,
      2910.9,
      0,
      0,
      0
    ],
    "type": "bar",
    "orientation": "v",
    "name": "Starch"
  },
  {
    "x": [
      "Apr-2022",
      "May-2022",
      "Jun-2022",
      "Jul-2022",
      "Aug-2022"
    ],
    "y": [
      10596.16,
      11112.87,
      0,
      10258.64,
      11540.97
    ],
    "type": "bar",
    "orientation": "v",
    "name": "Polythene"
  }
];

var layout = {barmode: 'stack'};

Plotly.newPlot('myDiv', data, layout);

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-2.12.1.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

Solution

The problem was fixed by setting "barmode" to "relative" in layout options. It appears that plotly wasn't sure how to draw negative values, so it bundled them all on the positive y axis.

References: https://community.plotly.com/t/stacked-bar-with-positive-and-negative-values/920/5 http://codepen.io/etpinard/pen/mPGLrY

var data = [
  {
    "x": [
      "Apr-2022",
      "May-2022",
      "Jun-2022",
      "Jul-2022",
      "Aug-2022"
    ],
    "y": [
      1338.84,
      1258.28,
      0,
      1331.68,
      1331.68
    ],
    "type": "bar",
    "orientation": "v",
    "name": "Wood"
  },
  {
    "x": [
      "Apr-2022",
      "May-2022",
      "Jun-2022",
      "Jul-2022",
      "Aug-2022"
    ],
    "y": [
      -416.67,
      -416.67,
      0,
      0,
      -416.67
    ],
    "type": "bar",
    "orientation": "v",
    "name": "Vegetables"
  },
  {
    "x": [
      "Apr-2022",
      "May-2022",
      "Jun-2022",
      "Jul-2022",
      "Aug-2022"
    ],
    "y": [
      -1116,
      -2220.75,
      0,
      -200,
      0
    ],
    "type": "bar",
    "orientation": "v",
    "name": "Steel Waste"
  },
  {
    "x": [
      "Apr-2022",
      "May-2022",
      "Jun-2022",
      "Jul-2022",
      "Aug-2022"
    ],
    "y": [
      -505.04,
      2910.9,
      0,
      0,
      0
    ],
    "type": "bar",
    "orientation": "v",
    "name": "Starch"
  },
  {
    "x": [
      "Apr-2022",
      "May-2022",
      "Jun-2022",
      "Jul-2022",
      "Aug-2022"
    ],
    "y": [
      10596.16,
      11112.87,
      0,
      10258.64,
      11540.97
    ],
    "type": "bar",
    "orientation": "v",
    "name": "Polythene"
  }
];

var layout = {barmode: 'relative'};

Plotly.newPlot('myDiv', data, layout);

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-2.12.1.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>