Timeline with VIS.js

http://visjs.org/

HTML

<script src="http://visjs.org/dist/vis.js"></script>
<link rel="stylesheet" href="http://visjs.org/dist/vis.css">
<div id="mytimeline"></div>

CSS

body, html {
    font-family: sans-serif;
}

.vis-content .vis-foreground .vis-group .vis-item{
  height: 20px !important;
}

  .vis-item {
      border-color: rgb(41, 182, 246);
     background: rgb(41, 182, 246);
  }
  
  .vis-time-axis .vis-grid.vis-minor {
    border-color: #fff;
}

.vis-labelset .vis-label {
    border-bottom: #fff;
}

.vis-foreground .vis-group {
    border-bottom:  #fff;
}
.vis-time-axis .vis-grid.vis-major {
    border-color: #ddd;
}

.vis-timeline {
  border-radius: 10px;
}

.vis-panel.vis-center {
  border-bottom-style: hidden;
}

.vis-panel.vis-left {
  border-bottom-style: hidden;
}

.vis-time-axis .vis-text {
  font-size: 10px;
}

JavaScript

var container = document.getElementById('mytimeline');

var group =[
    {id: 0, content: 'xxxxxxx', value: 1},
    {id: 1, content: 'xxxxxxx', value: 3},
    {id: 2, content: 'xxxxxxx', value: 2}
  ];

var data = [
    {id: 1, group:0, content: '', start: '2012-04', end: '2015-04'},
    {id: 2, group:1,content: '', start: '2015-04', end: '2017-06'},
    {id: 3, group:2,content: '', start: '2017-06', end: '2018-05'}
  ];
  
var options = {
		moveable: false,
    start: '2012-01',
		min: '2012-01',
    max: '2018-06',
    width: '100%',
    align: 'right',
    stack: true,
    showMinorLabels: true,
    selectable: true,
    editable: false,
    orientation: {
    	axis: 'top'
		},
    onUpdate: function (item, callback) {
        item.content = prompt('Edit items text:', item.content);
        if (item.content != null) {
          callback(item); // send back adjusted item
        }
        else {
          callback(null); // cancel updating the item
        }
    },
	showMinorLabels: false,
	timeAxis: {
    scale: 'month',
    step: 1
  },
};
var timeline = new vis.Timeline(container, data, group, options);