You're looking for the stack option which:
If true (default), items will be stacked on top of each other such that they do not overlap.
So you need to set it to false in your timeline options.
The example below (lifted from here) shows what happens when stack is either false or true. Noting overlapping items become tricker to manipulate (e.g. item 3 being completely hidden in the Third group):
var groups = new vis.DataSet([
{id: 0, content: 'First', value: 1},
{id: 1, content: 'Third', value: 3},
{id: 2, content: 'Second', value: 2}
]);
// create a dataset with items
// note that months are zero-based in the JavaScript Date object, so month 3 is April
var items = new vis.DataSet([
{id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
{id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
{id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
{id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
{id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
{id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}
]);
// create visualization
var container1 = document.getElementById('visualization1');
var container2 = document.getElementById('visualization2');
var options1 = {
// option groupOrder can be a property name or a sort function
// the sort function must compare two groups and return a value
// > 0 when a > b
// < 0 when a < b
// 0 when a == b
groupOrder: function (a, b) {
return a.value - b.value;
},
editable: true,
stack: false
};
var options2 = Object.assign({}, options1);
options2.stack = true;
var timeline1 = new vis.Timeline(container1);
timeline1.setOptions(options1);
timeline1.setGroups(groups);
timeline1.setItems(items);
var timeline2 = new vis.Timeline(container2);
timeline2.setOptions(options2);
timeline2.setGroups(groups);
timeline2.setItems(items);
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis-timeline-graph2d.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js" rel="script"></script>
<p><pre>stack: false</pre>
<div id="visualization1"></div>
<p><pre>stack: true</pre>
<div id="visualization2"></div>