2015-08-07-barchart-direct-labels.html

---
name: Bar Chart with Direct Labels
language: plotly_js
suite: bar
order: 5
sitemap: false
arrangement: horizontal
---

var xValue = ['Product A', 'Product B', 'Product C'];

var yValue = [20, 14, 23];

var trace1 = {
  x: xValue,
  y: yValue,
  type: 'bar',
  text: yValue.map(String),
  textposition: 'auto',
  hoverinfo: 'none',
  marker: {
    color: 'rgb(158,202,225)',
    opacity: 0.6,
    line: {
      color: 'rgb(8,48,107)',
      width: 1.5
    }
  }
};

var data = [trace1];

var layout = {
  title: {
    text: 'January 2013 Sales Report'
  },
  barmode: 'stack'
};

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