Search code examples
javascripttimelinevis.js

vis.js timeline items at wrong position

I'm using vis.js to create a timeline, but I'm having a weird issue. I'm using the same code to create all the timelines, but on some it positions the items almost a month too early. I've checked and the dates are entered correctly (and the tooltips are right), but for some reason the positioning is wrong.

I've added the images below to show both results when it behaves as expected (first one), and when I have positioning issues (second one). I removed some info but the dates and items are still there to show the behavior. Both timelines use the exact same code, only the data fed to it is different.

Case where it seems correct: Normal behavior

Case with wrong positioning: Strange behavior

I was wondering if the css I added to te vis timeline (margins, or paddings...) was causing an issue, but removing it didn't solve anything.

Is there a known issue about this? Could it be linked to the greater number of items or some css somewhere on the page? I couldn't seem to find anything online about positioning issues.

If it helps, here's an example of the js code I used for some of the elements (others are similar):

var date = new Date(parseInt(item.Date.substr(6))); //date is in json with a format like /Date(xxxxx)/
        list.push({
            id: index++,
            content: item.Label, 
            type: "box",
            start: date,
            title: "<p class='timeline-tooltip'><b>" + dateToString(date) + "</b><br/>" + item.AmountLabel + "</p>"
        }); 

//... later ...// 
var items = new vis.DataSet(list);

Thanks in advance for your help!

Solution

  • This bug is resolved in the new version 4.20.1 released in July 2017.