How do I define custom colors for my stacked bar charts in vis.js?

Question

I am using the vis.js to make some stacked bar charts. Here's the code I have:

var barGraphDiv = document.createElement('div');
barGraphCombinedDiv.appendChild(barGraphDiv);
var groups = new vis.DataSet();
groups.add({id: 0, content: "group0", color:{'background': 'red'}})
groups.add({id: 1, content: "group1", color:{'background': 'green'}})
groups.add({id: 2, content: "group2", color:{'background': 'blue'}})

var items = [
    {x: '2014-06-11', y: 10, group:0},
    {x: '2014-06-12', y: 25, group:0},
    {x: '2014-06-13', y: 30, group:0},
    {x: '2014-06-14', y: 10, group:0},
    {x: '2014-06-15', y: 15, group:0},
    {x: '2014-06-16', y: 30, group:0},
    {x: '2014-06-11', y: 12, group:1},
    {x: '2014-06-12', y: 15, group:1},
    {x: '2014-06-13', y: 34, group:1},
    {x: '2014-06-14', y: 24, group:1},
    {x: '2014-06-15', y: 5,  group:1},
    {x: '2014-06-16', y: 12, group:1},
    {x: '2014-06-11', y: 22, group:2},
    {x: '2014-06-12', y: 14, group:2},
    {x: '2014-06-13', y: 24, group:2},
    {x: '2014-06-14', y: 21, group:2},
    {x: '2014-06-15', y: 30, group:2},
    {x: '2014-06-16', y: 18, group:2}
];

var dataset = new vis.DataSet(items);
var options = {
    style:'bar',
    stack:true,
    barChart: {width:50, align:'center', sideBySide:true},
    drawPoints: false,
    dataAxis: {
        icons:true
    },
    orientation:'top',
    start: '2014-06-10',
    end: '2014-06-18',
    groups: {
        0: {color:{background:'red'}},
        1: {color:{background:'green'}},
        2: {color:{background:'blue'}},
    }
};
var graph2d = new vis.Graph2d(barGraphDiv, items, groups, options);

So h ow do I set what colors I want my group to be? Thanks!

Luettaluevano

Answer 1

When you define the group you can specify a className property. e.g.

groups.add({id: 0, content: "group0", className: "group0Style"});

You then just need the class in your css like this:

.group0Style {
  fill: #f2ea00;
  fill-opacity:0;
  stroke-width:2px;
  stroke: #b3ab00;
}

Burgett