Search code examples
javascripthtmlcssvis.jsvis.js-timeline

How to get a decent last-row height in vis.js?


I'm new to this vis.js library (timeline module) and I'm trying to draw a timeline with some blocks. The problem is the height of the last row / group; as you can see in the picture, it's just too high compared to the other rows in the timeline.

The height of these rows are calculated by the library so I can't just give it a styling.

screenshot

Javascript code to initiate the timeline:

var groups = new vis.DataSet(
    unitsData.map(function(unit) {

        return {
            id: unit.id,
            content: unit.name,
        };
    })
);

var items = new vis.DataSet(
    shiftsData.map(function(s) {
        return {
            id: s.Id,
            group: s.UnitId,
            content: s.ShiftTypeName,
            start: moment(s.Start),
            end: moment(s.End),
        }
    })
);

// Configuration for the Timeline
var options = {
    stack: false,
};

// Create a Timeline
var timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);

Solution

  • You can set the configuration option {margin: { axis: 0}} for that, see docs for more information.