Vis.js Timeline plug in (Gant chart) questions, could not figure out how to use option to adjust the heights of timeline

#1

so, when i try to make Gant chart inside my Tiddlywiki, i found this great plugin: vis.js Timeline. demo

reading the instruction, it do have option to use “config” to set customer height as below screen shot.

image
image1351×78 16.8 KB

so , i create a tiddlyer “configtimeline” and put below in it.

var options = {
  width: '100%',
  height: '30px',
  margin: {
    item: 20
  }
};

and then use conifg attribute

config="configtimeline"

but it does not change the timeline heights, what i did wrong?

#2

That is the wrong format. That is presumably the format for the configuration of some underlying JS library. In TiddlyWiki you would only use the contents in your tiddler. And you would do it in JSON format. So the body of configtimeline would presumably look like this:

{
  "width": "100%",
  "height": "30px",
  "margin": {
    "item": 20
  }
}

However, this is still not going to be enough, as the documentation says

Notes about the config attribute

for the sake of integration, not all the options are available, please see the whitelist;

where that whitelist contains,

{
    "whitelist": ["align","clickToUse","end","format","hiddenDates","margin","max","min",
                  "moveable","orientation","showCurrentTime","showMajorLabels","showMinorLabels",
                  "stack","start","timeAxis","zoomable","zoomMin","zoomMax"],
    "navbarReactOptions": ["clickToUse","max","min","zoomMin","zoomMax"]
}

Notably, there’s no mention of height or width in there.

And looking at the developer’s console, I can see that the generated code is full of style attributes with height and width values, so it may be quite difficult to override them. But I’ve never used the plugin, so I’m not really sure.

#3

oh, thanks very much, so this means i might can’t adjust the heights.

this is a really good plugin, i couldn’t find other Gant chart plug in for Tiddlywiki.