Vis.js Timeline - opensource, dynamic, browser-based timeline visualisation

Classnames are added to individual dataset items thus:'className': 'brand1',.
Pure colours such as .red are automatically assigned white text with a drop-shadow, whereas light colours such as .red-light are not.
If the thicker border is not wanted, add .vis-timeline-noborder e.g. #timeline-div.vis-timeline-styled.vis-timeline-noborder.

Classnames are added to individual dataset groups thus:{id: 3, content: '.red-lighter', className: 'red-lighter'},.
Items within '*-lighter' styled groups are automatically coloured to match the group's assigned style as shown above.
Such automatically styled items automatically change colour if moved to a differently coloured group (try it).

Set window from 2016-01-01 to 2016-04-01 Move to 2016-02-01 Fit all items Select & focus items 5 and 6 Focus item 2 Focus items 5 and 6 (slow and linear animation) Focus current selection

This example demonstrates the item type "background" when using groups.

• Background items having a group are displayed in that group
• Background items without a group are spread over the whole timeline
• Background items with a non-existing group are not displayed

This example shows how to use callback functions onAdd, onMove, onMoving, onUpdate, and onRemove. The onMoving function updates an item while dragging, and can be used to prevent the item from being drawn at disallowed or infeasible timeslots. In this example, the items cannot be moved outside of the month April 2013. The other callback functions are called after an add, move, update, or remove action has taken place, and can be used to cancel these actions.

This example demonstrates using templates to format item contents. In this case handlebars is used as template engine, but you can just use your favorite template engine or manually craft HTML from the data of an item.

The style of the Timeline can be fully customized via CSS, as shown below: