Horizontal Bar Charts in JavaScript

How to make a D3.js-based hortizontal bar chart in JavaScript.


New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

var data = [{
  type: 'bar',
  x: [20, 14, 23],
  y: ['giraffes', 'orangutans', 'monkeys'],
  orientation: 'h'
}];

Plotly.newPlot('myDiv', data);
Click to copy
05101520giraffesorangutansmonkeys
var trace1 = {
  x: [20, 14, 23],
  y: ['giraffes', 'orangutans', 'monkeys'],
  name: 'SF Zoo',
  orientation: 'h',
  marker: {
    color: 'rgba(55,128,191,0.6)',
    width: 1
  },
  type: 'bar'
};

var trace2 = {
  x: [12, 18, 29],
  y: ['giraffes', 'orangutans', 'monkeys'],
  name: 'LA Zoo',
  orientation: 'h',
  type: 'bar',
  marker: {
    color: 'rgba(255,153,51,0.6)',
    width: 1
  }
};

var data = [trace1, trace2];

var layout = {
  title: {
    text: 'Colored Bar Chart'
  },
  barmode: 'stack'
};

Plotly.newPlot('myDiv', data, layout);
Click to copy
01020304050giraffesorangutansmonkeys
LA ZooSF ZooColored Bar Chart
var xSavings = [1.3586, 2.2623000000000002, 4.9821999999999997, 6.5096999999999996,
  7.4812000000000003, 7.5133000000000001, 15.2148, 17.520499999999998
];

var xNetworth = [93453.919999999998, 81666.570000000007, 69889.619999999995, 78381.529999999999, 141395.29999999999, 92969.020000000004, 66090.179999999993, 122379.3];

var ySavings = ['Japan', 'United Kingdom', 'Canada', 'Netherlands', 'United States', 'Belgium', 'Sweden', 'Switzerland'];

var yNetworth = ['Japan', 'United Kingdom', 'Canada', 'Netherlands', 'United States', 'Belgium', 'Sweden', 'Switzerland'];

var trace1 = {
  x: xSavings,
  y: ySavings,
  xaxis: 'x1',
  yaxis: 'y1',
  type: 'bar',
  marker: {
    color: 'rgba(50,171,96,0.6)',
    line: {
      color: 'rgba(50,171,96,1.0)',
      width: 1
    }
  },
  name: 'Household savings, percentage of household disposable income',
  orientation: 'h'
};

var trace2 = {
  x: xNetworth,
  y: yNetworth,
  xaxis: 'x2',
  yaxis: 'y1',
  mode: 'lines+markers',
  line: {
    color: 'rgb(128,0,128)'
  },
  name: 'Household net worth, Million USD/capita'
};

var data = [trace1, trace2];

var layout = {
  title: {
    text: 'Household Savings & Net Worth for Eight OECD Countries'
  },
  xaxis1: {
    range: [0, 20],
    domain: [0, 0.5],
    zeroline: false,
    showline: false,
    showticklabels: true,
    showgrid: true
  },
  xaxis2: {
    range: [25000, 150000],
    domain: [0.5, 1],
    zeroline: false,
    showline: false,
    showticklabels: true,
    showgrid: true,
    side: 'top',
    dtick: 25000
  },
  legend: {
    x: 0.029,
    y: 1.238,
    font: {
      size: 10
    }
  },
  margin: {
    l: 100,
    r: 20,
    t: 200,
    b: 70
  },
  width: 600,
  height: 600,
  paper_bgcolor: 'rgb(248,248,255)',
  plot_bgcolor: 'rgb(248,248,255)',
  annotations: [
    {
      xref: 'paper',
      yref: 'paper',
      x: -0.2,
      y: -0.109,
      text: 'OECD ' + '(2015), Household savings (indicator), ' + 'Household net worth (indicator). doi: ' + '10.1787/cfc6f499-en (Accessed on 05 June 2015)',
      showarrow: false,
      font:{
        family: 'Arial',
        size: 10,
        color: 'rgb(150,150,150)'
      }
    }
  ]
};

for ( var i = 0 ; i < xSavings.length ; i++ ) {
  var result = {
    xref: 'x1',
    yref: 'y1',
    x: xSavings[i]+2.3,
    y: ySavings[i],
    text: xSavings[i] + '%',
    font: {
      family: 'Arial',
      size: 12,
      color: 'rgb(50, 171, 96)'
    },
     showarrow: false,
  };
  var result2 = {
    xref: 'x2',
    yref: 'y1',
    x: xNetworth[i] - 20000,
    y: yNetworth[i],
    text: xNetworth[i] + ' M',
    font: {
      family: 'Arial',
      size: 12,
      color: 'rgb(128, 0, 128)'
    },
     showarrow: false
  };
  layout.annotations.push(result, result2);
}

Plotly.newPlot('myDiv', data, layout);
Click to copy
05101520JapanUnited KingdomCanadaNetherlandsUnited StatesBelgiumSwedenSwitzerland25k50k75k100k125k150k
Household savings, percentage of household disposable incomeHousehold net worth, Million USD/capitaHousehold Savings & Net Worth for Eight OECD CountriesOECD (2015), Household savings (indicator), Household net worth (indicator). doi: 10.1787/cfc6f499-en (Accessed on 05 June 2015)1.3586%93453.92 M2.2623%81666.57 M4.9822%69889.62 M6.5097%78381.53 M7.4812%141395.3 M7.5133%92969.02 M15.2148%66090.18 M17.5205%122379.3 M