Vis js timeline range element custom draw

Question

I have found vis.js extremely useful but now need to add custom 'symbols' (up indicator, down indicator, etc) to the edges (start / end) of a range element used in a timeline.

I can add separate elements to precede / succeed other elements but this involves quite a bit more effort and stacking is affected etc. Or... I can place html text / symbols inside a table with css forcing it to the start / end of the element but this does not seem to display correctly always.

What would be the suggested approach to resolve this?

Mike Scotty Mike Scotty · Accepted Answer · 2019-07-02T10:48:20

You should provide a template function in the options that will render your range item.

The content returned by your template function may be any valid HTML, so it's up to you to use a div, table, ... whatever to add and position your extra symbols.

Docs:

https://visjs.org/docs/timeline/#Templates

Timeline supports templates to format item contents. Any template engine (such as handlebars or mustache) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as the first argument, the item element as the second argument and the edited data as the third argument, and outputs formatted HTML.

Example:

var options = {
  template: function (item, element, data) {
    return '<h1>' + item.header + data.moving?' '+ data.start:'' + '</h1><p>' + item.description + '</p>';
  },
  onMoving: function (item, callback) {
    item.moving = true;
  }
};

Vis js timeline range element custom draw

1 Answers