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

<body>
  
  <div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>
var trace1 = {
  x: ['giraffes', 'orangutans', 'monkeys','giraffes', 'orangutans', 'monkeys'], 
  y: [20, 14, 23,12, 18, 29],
  width: [.1,.8,.8, .1,.7,.8],
  offset: [1,4,7,2,5,8],
  name: 'SF Zoo', 
  type: 'bar'
};



var data = [trace1];

var layout = {xaxis1: {
  type: "category"
},
  barmode: 'group'};

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.