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

<body>
  <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body> 
</html>
var data = [
  {
    x: [
      "2021-11-18 0:10:30",
      "2021-11-18 0:11:04",
      "2021-11-18 0:11:22",
      "2021-11-18 0:12:41"
    ],
    y: [
      "Department 1",
      "Department 2",
      "Department 3",
      "Department 4"
    ],
    name: "Average Response Time",
    type: "bar",
    orientation: "h",
    text: ["00:10:30", "00:11:04", "00:11:22", "00:12:41"],
    hoverinfo: "none",
    visible: true,
    marker: { color: "#C2185B" },
    // legendgroup: "Average Response Time",
    // showlegend: false,
    // cliponaxis: false,
    // width: "",
    // offset: "",
    textposition: "outside"
  }
];
var layout = {
  shapes: [],
  showlegend: false,
  autosize: true,
  barmode: "stack",
  margin: { l: 1, t: 1, b: 1, r: 1, pad: 5 },
  bargap: 0.5,
  dragmode: false,
  showspikes: false,
  bargroupgap: "",
  xaxis: {
    offset: true,
    // rangemode: "tozero",
    showticklabels: true,
    showgrid: false,
    // zeroline: true,
    showcrossline: true,
    automargin: true,
    side: "top",
    tickprefix: "",
    ticksuffix: " seconds",
    tickfont: { color: "#1d2124", family: "", size: "auto" },
    tickformat: "%X",
    // range: [-1, 5],
    type: "datetime",
    // tick0: '2021-11-18 00:00:00',
    range: ['2021-11-18 0:00:00', "2021-11-18 0:13:41"],
    // autorange: true
  },
  yaxis: {
    showticklabels: true,
    showdividers: true,
    dividercolor: "block",
    dividerwidth: 1,
    automargin: true,
    tickfont: { family: "", size: "auto" },
    type: "category",
    dtick: 1,
    // range: [-0.9, 4],
    tickvals: [
      "Department 1",
      "Department 2",
      "Department 3",
      "Department 4"
    ],
    ticktext: [
      "Department 1",
      "Department 2",
      "Department 3",
      "Department 4"
    ]
  },
  xaxis2: {
    showticklabels: false,
    showgrid: false,
    zeroline: true,
    showcrossline: true,
    automargin: true,
    overlaying: "x",
    side: "bottom",
    tickfont: { color: "#1d2124", family: "", size: "auto" },
    tickprefix: "",
    ticksuffix: " "
  },
  annotations: "",
  height: 252,
  hovermode: "y"
};
Plotly.newPlot("myDiv", data, layout);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.