<div id="bar-chart"></div>
body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 300;
  text-align: center;
}

#line-chart {
  margin: 0 auto;
  height: 450px;
}
var barDiv = document.getElementById('bar-chart');

var primaryGDP = {
  x: ["United States", "China", "Japan", "Germany", "United Kingdom", "France", "India", "Italy"],
  y: [215364, 964772, 56764, 27959, 18549, 47277, 391672, 37050],
  type: 'bar',
  name: 'Agricultural Sector'
};

var secondaryGDP = {
  x: ["United States", "China", "Japan", "Germany", "United Kingdom", "France", "India", "Italy"],
  y: [3427876, 4464876, 1300833, 982067, 556477, 455355, 580755, 448305],
  type: 'bar',
  name: 'Industrial Sector'
};

var tertiaryGDP = {
  x: ["United States", "China", "Japan", "Germany", "United Kingdom", "France", "India", "Italy"],
  y: [14303756, 5788633, 3377434, 2484874, 2074864, 1985647, 1280813, 1367145],
  type: 'bar',
  name: 'Service Sector'
};

var data = [primaryGDP, secondaryGDP, tertiaryGDP];

var layout = {
  title:'Nominal GDP Sector Composition of Top 8 Countries',
  barmode: 'stack'
};

Plotly.plot( barDiv, data, layout );

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

  1. https://cdn.plot.ly/plotly-latest.min.js