How to color a bar with Morris.js when the value is higher or lower then 70

Question

I founded this question here on stackoverflow: Varying bar colors with morris.js bar chart?

I want if the data in bar B is higher or lower then 70 to change it color.

I only can't figure out what I am doing wrong over here to make it work?

here is my code:

new Morris.Bar({
element: 'bar-example',
gridTextColor: '#00ff55',
data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75,  b: 65 },
    { y: '2008', a: 50,  b: 40 },
    { y: '2009', a: 75,  b: 65 },
    { y: '2010', a: 50,  b: 40 },
    { y: '2011', a: 75,  b: 65 },
    { y: '2012', a: 100, b: 90 }
],
barColors : function(row, series, type) {
    if(data.b <70) return ['black', 'white'];
    else if(data.b >= 70) return ['white', 'black'];
},
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});

`varColors` -> `barColors` ? You might also consider using `>= 70`, just in case `data.b` is equal to `70`. Also wrap `#00ff55` in quotes. — blex, Jul 03 '15 at 21:50
I did what your suggestions where but it looks like I can't acces the data b colom? I was playing with it on: http://jsbin.com/cekecowiti/edit?html,js,console,output — StuiterSlurf, Jul 04 '15 at 08:07

score 3 · Accepted Answer · answered Jul 20 '15 at 17:06

In the barColors function, you need to look at the series.key value to determine which bar you are dealing with. After that, you can return values as needed. Let's say you want bars in series B to be red if they are below 70, otherwise blue. Bars in series A are always green. Your barColors function then would look something like this:

barColors: function(row, series, type) {
  if(series.key == 'b')
  {
    if(row.y < 70)
      return "red";
    else
      return "blue";  
  }
  else
  {
    return "green";
  }
}

See this jsbin for an illustration of this.

How to color a bar with Morris.js when the value is higher or lower then 70

1 Answers1