Something is wrong with the Timeline scale. Limited drawing of grid lines to 1000 lines.

[AndreAlves10]

I'm trying to use VIS, in an angular-cli project:

os: win32 x64 @angular/common: 2.4.7 @angular/compiler: 2.4.7 @angular/core: 2.4.7 @angular/forms: 2.4.7 @angular/http: 2.4.7 @angular/platform-browser: 2.4.7 @angular/platform-browser-dynamic: 2.4.7 @angular/router: 3.4.7 @angular/cli: 1.0.0-beta.31 @angular/compiler-cli: 2.4.7

In my HTML file I have the following:

<div #schedulerElement class="scheduler"></div>

In Typescript I have this:

export class ComponentX implements OnInit {
   @ViewChild('schedulerElement') schedulerElement: ElementRef;
   ngOnInit() {
      this.setTimeline();
   }

   private setTimeline(): void {
      var vis: any = require('vis');

      // Create a DataSet (allows two way data-binding)
      var items = new vis.DataSet([
        { id: 1, content: 'item 1', start: '2014-04-20' },
        { id: 2, content: 'item 2', start: '2014-04-14' },
        { id: 3, content: 'item 3', start: '2014-04-18' },
        { id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19' },
        { id: 5, content: 'item 5', start: '2014-04-25' },
        { id: 6, content: 'item 6', start: '2014-04-27', type: 'point' }
      ]);

      // Configuration for the Timeline
      var options = {};

      console.log(this.schedulerElement.nativeElement);
      // Create a Timeline
      var timeline = new vis.Timeline(this.schedulerElement.nativeElement, items, options);
    }
}

However, I'm getting the error: "Something is wrong with the Timeline scale. Limited drawing of grid lines to 1000 lines."

Am i missing something in the code?

Thank you

[Tooa]

Can you provide a minimal example via jsbin.com that shows the issue?

[AndreAlves10]

I will try to create a jsbin. This is a screenshot of the container div and the respective error:

[AndreAlves10]

Noob mistake. I wasn't properly referencing the javascript and css files.

In angular-cli.json, I imported both files:

"styles": [
        "../node_modules/vis/dist/vis.min.css"
      ],
      "scripts": [
        "../node_modules/vis/dist/vis.min.js"
      ]

And now it is working fine.

[takato1314]

Good day, I wonder what is the status for this bug. Because it seems that somehow, the vis.css is not referenced correctly either in the npmjs library (https://www.npmjs.com/package/@types/vis) or might be some other issues. Is the temporary workaround is to explicitly include the css path globally in the angular-cli.json or index.html for Angular framework considered as the final solution?

This bug is also reported similarly for ticket #1704, #1951 and #2739 (here) with all concluded with temporary solution or added to the milestone.

[Kandarp143]

Hi all, I am using polymer. and following is my timeline polymer element code.

But when I try to use it in index.html <legacy-element></legacy-element> its give me same error. I have read all comments and issues regarding this but no success. Please help.

[ghost]

This hasn't been fixed, I suppose.

[n-sviridenko]

Yes, we are facing the same issue

[dandohotaru]

i've encountered the same issue in a plain es6 js project bundled with webpack and babel

import 'vis/dist/vis-timeline-graph2d.min.css';

it turns out i was missing the timeline css https://github.com/almende/vis/issues/1951#issuecomment-398174577

[geommr]

Make sure you're not targeting the div element(s) with extra CSS that could cause it. That was width: 100%; in my case.

[chamamme]

I fixed this issue by adding rel to both link and 'script' tags. <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js" rel="script"></script>