JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://gitcdn.xyz/repo/etpinard/ff8d940dfb831b54d41baa4e58f6af9d/raw/78394fdbd5e81db881154cf54556f1eba211a8c2/plotly-cartesian.js"></script>
<div id="plot"></div>

<p>The bins are not shared by the two traces, and the horizontal position of the second trace's bars does not make sense.</p>

<p>The appearance of the bug seems dependent on the actual data. Some other data arrays result in a correct display.</p>

<p>The bug is caused by the use of the cartesian dist release in 1.51.3. Using the full dist release of the same version works.</p>

JavaScript

var x1 = [1,3];
var x2 = [1,20];

var trace1 = {
  x: x1,
  type: "histogram",
};
var trace2 = {
  x: x2,
  type: "histogram",
};
var data = [trace1, trace2];
var layout = {barmode: "stack", height: 200, width: 400, margin: {t:30, b:30}};

Plotly.plot("plot", data, layout);