CodePen Embed - Plotly.js Stacked Bar Chart

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

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

var trace1 = {
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [20, 14, 23],
  name: 'SF Zoo',
  type: 'bar',
  marker: {
    pattern: {
      shape: "+"
  }
  }
};

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

var data = [trace1, trace2];

var layout = {barmode: 'stack', barnorm: 'percent'};

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

Run Pen

This Pen is owned by Oren Pinsky on CodePen.

See more by @opinsky on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.