How to prevent a Vis.js Timeline from resizing “unnecessarily”?

Question

Does anyone know how to prevent a Vis.js Timeline from resizing "unnecessarily"? By "unnecessarily" I of course mean relative to a visual context not the "code context". In the screengrab below, I understand that the code is "doing its job", as it were, but the visual result is not acceptable.

I've tried all the various settings I could find under the setup options but they didn't help. It is a huge codebase and I'd rather not muck around with it, if I can help it.

Answer 1

I had similar issues so I thought I would post a response here in the event someone else is experiencing the same problems I had. Changing the CSS didn't work for me. This just created gaps on the Y Axis inside the first or last group item and pushed the timeline items out of whack. There's an option called 'stack' which I had overlooked. For items that overlap slightly their corresponding group will expand in height to accommodate them. In my case I had an item that ended at 16:00 and the item directly after this would have a start time of 16:00. This was causing some overlap but I did not want the height of the group to expand. Setting 'stack: false' in the options prevented the expanding effect. There was still some minor expanding in the region of a couple of pixles but nowhere near the height issues I was having with multiple items sharing the same start/end times.

Answer 2

While you can't configure it in the javascript, a bit of css can do the trick for you :)

.vis-label .vis-inner {
    min-height: 200px;
}