<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 lightGreen = 'rgba(0,255,50,0.6)';
var redShade   = 'rgba(255,50,0,0.6)';

var traceA = {
  x: ["Car A", "Car B", "Car C", "Car D", "Car E", "Car F", "Car G", "Car H"],
  y: [100, 80, 40, 160, 75, 93, 8, 125],
  type: 'bar',
  text: ['','','','Overspeeding','','Overspeeding','','Overspeeding'],
  textposition: 'inside',
  width: 0.8,
  base: [-40, 10, 50, -45, 0, 15, 60, -20],
  marker: {
    color: [lightGreen, lightGreen, lightGreen, redShade, lightGreen, redShade, lightGreen, redShade],
    line: {
      color: 'black',
      width: 1
    }
  }
};

var data = [traceA];

var layout = {
  title:'Speed of Cars (km/hr)',
  yaxis: {
    dtick: 15
  }
};

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