Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

241
Views
visjs timeline - items on same line when they are in the same group

I have a simple visjs timeline instance. Is it possible to have the items related to the same group displayed on the same line?

enter image description here

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You're looking for the stack option which:

If true (default), items will be stacked on top of each other such that they do not overlap.

So you need to set it to false in your timeline options.

The example below (lifted from here) shows what happens when stack is either false or true. Noting overlapping items become tricker to manipulate (e.g. item 3 being completely hidden in the Third group):

  var groups = new vis.DataSet([
    {id: 0, content: 'First', value: 1},
    {id: 1, content: 'Third', value: 3},
    {id: 2, content: 'Second', value: 2}
  ]);

  // create a dataset with items
  // note that months are zero-based in the JavaScript Date object, so month 3 is April
  var items = new vis.DataSet([
    {id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
    {id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
    {id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
    {id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
    {id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
    {id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}
  ]);

  // create visualization
  var container1 = document.getElementById('visualization1');
  var container2 = document.getElementById('visualization2');
  var options1 = {
    // option groupOrder can be a property name or a sort function
    // the sort function must compare two groups and return a value
    //     > 0 when a > b
    //     < 0 when a < b
    //       0 when a == b
    groupOrder: function (a, b) {
      return a.value - b.value;
    },
    editable: true,
    stack: false
  };
  var options2 = Object.assign({}, options1);
  options2.stack = true;

  var timeline1 = new vis.Timeline(container1);
  timeline1.setOptions(options1);
  timeline1.setGroups(groups);
  timeline1.setItems(items);
  var timeline2 = new vis.Timeline(container2);
  timeline2.setOptions(options2);
  timeline2.setGroups(groups);
  timeline2.setItems(items);
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis-timeline-graph2d.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js" rel="script"></script>
<p><pre>stack: false</pre>
<div id="visualization1"></div>
<p><pre>stack: true</pre>
<div id="visualization2"></div>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!