<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-1.43.0.min.js"></script>
</head>

<body>
  
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>
var trace1 = {
  x: [
    ['SF Zoo','SF Zoo','SF Zoo'],
    ['giraffes', 'orangutans', 'monkeys']
  ], 
  y: [20, 14, 23], 
  name: 'SF Zoo', 
  type: 'bar'
};

var trace2 = {
  x: [
    ['LA Zoo','LA Zoo','LA Zoo'],
    ['giraffes', 'orangutans', 'monkeys']
  ], 
  y: [12, 18, 29], 
  name: 'LA Zoo', 
  type: 'bar'
};

var data = [trace1, trace2];
var layout = {
  showlegend: false,
  xaxis: {
    tickson: "boundaries",
    ticklen: 15,
    showdividers: true,
    dividercolor: 'grey',
    dividerwidth: 2
  }
};

Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.