En cada fila de una línea de tiempo de vis.js hay un margen de 5px. Esto se establece como un estilo en línea mediante programación: la biblioteca especifica la height de cada fila, al igual que la posición top y la transform de cada elemento de la fila.
Esto significa que la configuración de estos valores usted mismo (por ejemplo, con item.style = 'top: 0' ) falla porque vis.js los sobrescribe inmediatamente.
¿Cómo cambiaría este margen?
La opción de margen descrita en la lista de opciones de vis-timeline en https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options se puede usar para ajustar los márgenes.
Por ejemplo, lo siguiente establece los márgenes horizontal y vertical de los elementos en 0 píxeles. También establece el margen del eje en 5 píxeles para colocar elementos más cerca del eje de tiempo.
var options = { margin : { item: {horizontal:0, vertical:0}, axis: 5 } };Luego se puede usar CSS para cambiar la altura de los elementos.
.vis-box { height: 20px; } .vis-range { height : 20px; }Ejemplo completo usando esta configuración para una vista compacta:
// 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>¿Has probado !important ? Ejemplo: top: 0 !important;
Esto asegurará que esta propiedad no se sobrescriba.