Search code examples
javascriptcsstimelinevis.js

How can you make all groups the same height in a vis.js timeline?

In vis.js, it seems that if you display your data in groups without stacking, then the last group is taller than the others by 5px. There doesn't seem to be an obvious way to change this: it isn't a question of styling the items, since it's the row itself that's taller for some reason. How would I make all rows the same height?

Example: https://jsfiddle.net/6czo14pg/

Solution

  • This is due to the margin on the timeline axis. It can be adjusted with the margin axis option described at https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options.

    Setting it to 5 in your example makes all the rows the same height.

    var options = {
  groupOrder: "content",
  stack: false,
  margin: { axis: 5 }
};