I am trying to initialise a visjs chart. I am using the testing data.
var container = document.querySelector('#chart')
var items = new vis.DataSet([
{
start: new Date(2010, 7, 15),
end: new Date(2010, 8, 2), // end is optional
content: 'Test A'
}
])
let options = {
width: '100%',
height: '200px',
}
this.timeline = new vis.Timeline(container, items, options)
console.log(this.timeline)
The chart seems to be intitalised but nothing is shown when rendering. I have installed the module through npm, do I need to import the css too?
Do I need to import the css too?
Yes, you can use a CDN link:
https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis-timeline-graph2d.min.css
Or since you're using NPM, import from the source, eg, by using vis/dist/vis.min.css
Working demo:
var container = document.querySelector('#chart');
var items = new vis.DataSet([
{
start: new Date(2010, 7, 15),
end: new Date(2010, 8, 2), // end is optional
content: 'Test A'
}
]);
let options = {
width: '100%',
height: '200px'
}
this.timeline = new vis.Timeline(container, items, options)<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis-timeline-graph2d.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js" rel="script"></script>
<div id="chart"></div>