CODEWITHSUNDEEP
javascripttimelinevis.js
User1438379837
User1438379837

Reputation: 11

Vis.js timeline item align property not working

I have a timeline written in JS using the Vis.js library

I want some specific items on the timeline to be aligned on the left of the line and some on the right side.

Due to the documentation for Vis.js timeline, property align of item should override the global align property of options for timeline. But it does not.

item example:

var items = [];

var item = {
  align: "left"
  date: "20.09.2019"
  eventId: 440
  heading: "Event"
  id: "86ad4f21-6235-46e0-b5c9-29a6d2c16f50"
  nodeType: "single-node"
  start: "2019-09-20T04:00:00"
}

items.push(item);

// create dataset
var dataset = new vis.DataSet(items);

timeline options:

var options = {
  orientation: 'top',
  min: "2019-09-20T04:00:00",
  max: "2019-09-25T04:00:00",
  start: "2019-09-20T04:00:00",
  end: "2019-09-25T04:00:00",
  align: 'left'
}

here is how i update the item align property after calling the vis.Timeline constructor:

var visualization = document.getElementById('visualization');

var timeline = new vis.Timeline(visualization, dataset, options);

timeline.itemsData.forEach(function(dataItem) {
  if (dataItem.eventId === 440) {
    dataItem.align = 'right';
    timeline.itemsData.update(dataItem, {
      fieldId: "eventId"
    })
  }
})

Thanks for any advice :-)

EDIT:

Fixed in https://github.com/visjs/vis-timeline/pull/205

Upvotes: 0

Views: 1589

Answers (1)

Enirdas
Enirdas

Reputation: 129

Works for me, See https://codepen.io/Enirdas/pen/rNaKxOz

the global Option is set to align:'left'.

Item 2 align option is set to 'right' and it overwrides the global option. The right end of item 2 content is aligned with the date. (feb 11, 1990)

var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, align:'left', content: 'Poland withdraws from Warsaw Pact', start: new Date(1990, 00,01),type:'box'},
    {id: 2, align:'right', content: 'Nelson Mandela released after 27 years imprisonment in South Africa', start: new Date(1990, 01,11),type:'box'},
  ]);

  // Configuration for the Timeline

var options = {
  start: '1990-01-01',
  min: '1988-01-01',
  max: '2015-01-01',
  width: '100%',
  height: '230px',
  zoomMax: 31536000000000,
  zoomMin: 4233600000, 
  align:'left',
  margin: {
    item: 20
  }
};
  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);

Upvotes: 1

Related Questions