In each row of a vis.js timeline there is a margin of 5px. This is set as an inline style programmatically: the height of each row is specified by the library, and so is the top position and transform of each item in the row.
This means that setting these values yourself (for example, with item.style = 'top: 0') fails because they are immediately overwritten by vis.js.
How would I change this margin?
The margin option described in the vis-timeline options list at https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options can be used to adjust the margins.
For example the below sets the horizontal and vertical margins for items to 0 pixels. It also sets the axis margin to 5 pixels to place items closer to time axis.
var options = {
margin : {
item: {horizontal:0, vertical:0},
axis: 5
}
};
CSS can then be used to change the height of the items.
.vis-box {
height: 20px;
}
.vis-range {
height : 20px;
}
Full example using these settings for a compact view:
// DOM element where the Timeline will be attached
var container = document.getElementById("visualization");
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{ id: 1, content: "item 1", start: "2021-12-20" },
{ id: 2, content: "item 2", start: "2021-12-14" },
{ id: 3, content: "item 3", start: "2021-12-18" },
{ id: 4, content: "item 4", start: "2021-12-16", end: "2021-12-19" },
{ id: 5, content: "item 5", start: "2021-12-25" },
{ id: 6, content: "item 6", start: "2021-12-27", type: "point" },
]);
// Configuration for the Timeline
var options = {
margin : {
item: {horizontal:0, vertical:0},
axis: 5
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);body,
html {
font-family: sans-serif;
}
.vis-box {
height: 20px;
}
.vis-range {
height : 20px;
}
.vis-item {
font-size: 12px;
}<script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css" rel="stylesheet"/>
<div id="visualization"></div>Have you tried !important? Example: top: 0 !important;
This will ensure that this property will not be overwritten.