Mixing styles in Vis.js charts

Question

I am trying to create a 2D chart with a mix of bar graphs and line graphs using Vis.js timeline (graph2d).

I have tried using groups to define the different graphs, which works fine as long as the groups are of the same style.

Specifying the style of each group by adding the style as an option to each group, as shown below, does nothing.

var groups = new vis.DataSet();
groups.add({ id: 0, content: 'group0', options: { style: 'bar' }});
groups.add({ id: 1, content: 'group1', options: { style: 'line' }});

The style of all groups in the chart is the same and seems to be only defined by the style attribute specified directly in the options passed to the graph2d constructor.

I have searched around (Google, SO, the Vis.js Github page, etc.), but it does not seem like an issue anyone else has - or no one is using mixed charts, which I doubt).

Is this not possible with Vis.js (old documentation and examples suggests that it has been possible)?

Answer 1

Try to set the group's id as strings, not as numbers

var groups = new vis.DataSet();
groups.add({ id: '0', content: 'group0', options: { style: 'bar' }});
groups.add({ id: '1', content: 'group1', options: { style: 'line' }});