Geek Answers Handbook

How to define custom colors for my stack histograms in vis.js?

I use vis.js to create multiple histograms. Here is 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, I set what colors do I need for my group? Thanks!

+7
javascript
source share
1 answer

When you define a group, you can specify the className property. eg

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

You then just need a class in your css, like this:

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

More articles:


All Articles