Need help with angular-visjs?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

129 Stars 64 Forks MIT License 114 Commits 35 Opened issues


AngularJS directive module for vis.js components

Services available


Need anything else?

Contributors list

AngularJS - VisJS

Development and documentation is in progress.

NOTE: This library is currently being refactored. The intention is make the directives simpler, removing the additional 'non-vis.js' related directives (such as time-board and time-navigation), and bring the DataSet factory in-line with the vis.DataSet such that the documentation for vis is fully (hopefully) applicable and consistent.

Stay tuned, but expect changes!

UPDATE The initial refactoring is complete, but documentation is slightly inconsistent. Generally, the standard visjs documentation should be used. Take a look at the example where there is also the beginning of the updated documentation.


Note that this is out of date and will be removed shortly It's just retained for information while the directive is updated.



  $ = vis.DataSet({
     "1": {
       "id": 1,
       "content": " item 1",
       "start": "2014-09-01T17:59:13.706Z",
       "className": "magenta",
       "type": "box"
     "2": {
       "id": 2,
       "content": "",
       "start": "2014-09-02T17:59:13.706Z",
       "type": "box"
     "3": {
       "id": 3,
       "content": "item 3",
       "start": "2014-08-29T17:59:13.706Z",
       "type": "box"
     "4": {
       "id": 4,
       "content": "item 4",
       "start": "2014-09-01T17:59:13.706Z",
       "end": "2014-09-03T17:59:13.706Z",
       "type": "range"
     "5": {
       "id": 5,
       "content": "item 5",
       "start": "2014-08-30T17:59:13.706Z",
       "type": "point"
     "6": {
       "id": 6,
       "content": "item 6",
       "start": "2014-09-04T17:59:13.706Z",
       "type": "point"
     "7": {
       "id": 7,
       "content": " item 7",
       "start": "2014-08-28T17:59:13.706Z",
       "end": "2014-08-29T17:59:13.706Z",
       "type": "range",
       "className": "orange"


  $scope.options = {
   "align": "center",
   "autoResize": true,
   "editable": true,
   "selectable": true,
   "orientation": "bottom",
   "showCurrentTime": true,
   "showCustomTime": true,
   "showMajorLabels": true,
   "showMinorLabels": true

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.