Multi gauges overlapping one over the other

plotly.js
1

Greetings

I have the following in an attempt to plot multiple gauges. but they are overlapping one over the other. Can someone please guide me.

import Plotly from 'plotly.js-dist-min';

const data = [
  {
    type: "indicator",
    mode: "gauge+number",
    value: 65,
    title: { text: "Gauge 1" },
    gauge: {
      axis: { range: [null, 100] },
      bar: { color: "#ff0000" },
    }
  },
  {
    type: "indicator",
    mode: "gauge+number",
    value: 80,
    title: { text: "Gauge 2" },
    gauge: {
      axis: { range: [null, 100] },
      bar: { color: "#00ff00" },
    }
  },
  {
    type: "indicator",
    mode: "gauge+number",
    value: 45,
    title: { text: "Gauge 3" },
    gauge: {
      axis: { range: [null, 100] },
      bar: { color: "#0000ff" },
    }
  }
];

const layout = {
  grid: { rows: 1, columns: 3, pattern: 'independent' },
  width: 1000,
  height: 500
};

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

Thanks!