Varying bar colors with morris.js bar chart?

Question

I'm a JavaScript beginner using morris.js to create a bar chart where I need each bar containing a y value to be a different color. The code below shows what I've done so far

Morris.Bar({
element: 'calls-made',
data: [
{ y: 'Person A', a: 10 },
{ y: 'Person B', a: 15 },
{ y: 'Person C', a: 12 },
{ y: 'Person D', a: 20 }
],
xkey: 'y',
ykeys: ['a'],
labels: ['Calls'],
barColors: ["#B21516", "#1531B2", "#1AB244", "#B29215"],
hideHover: 'always',
});

I would like the bar for 'Person A' to be one color and then 'Person B' to be another color and so on, but at the moment all bars are being displayed as the first color in the array. Does anyone know if there is a way to do this? Many thanks!

Dichlamydeous

Answer 1

Morris.Bar({
element: 'bar-example',
data: [
{ y: 'Person A', a: 10 },
{ y: 'Person B', a: 15 },
{ y: 'Person C', a: 12 },
{ y: 'Person D', a: 20 }
],
xkey: 'y',
ykeys: ['a'],
labels: ['Calls'],
hideHover: 'always',
barColors: function (row, series, type) {
console.log("--> "+row.label, series, type);
if(row.label == "Person A") return "#AD1D28";
else if(row.label == "Person B") return "#DEBB27";
else if(row.label == "Person C") return "#fec04c";
else if(row.label == "Person D") return "#1AB244";
}
});

Bleach

Answer 2

I did something similar, but with dynamic items.

var $arrColors = ['#34495E', '#26B99A',  '#666', '#3498DB'];
Morris.Bar({
    element: 'div-bars',
    data: [
        {ITENS-DYNAMIC-HERE}
    ],
    xkey: 'item',
    ykeys: ['value'],
    labels: ['Atendimentos'],
    barColors: function (row, series, type) {
        return $arrColors[row.x];
    }, 
    hideHover: 'auto',
    resize: true
});

Clodhopping

Answer 3

I found a way to change the colors even if the list is more that four values. If anyone ever comes this way looking for an answer

var barColorsArray = ['#3498DB', '#34495E','#26B99A', '#DE8244'];
var colorIndex = 0;

                            Morris.Bar({
                              element: 'graph_bar',
                              data: [DYNAMIC_VALUES_HERE]
                                ,
                              xkey: 'groupedBy',
                              ykeys: ['Numbers' ],
                              labels: ['Names'],
                              barRatio: 0.4,
                              barColors: function () {
                                  if(colorIndex < 4)
                                    return barColorsArray[++colorIndex];
                                  else{
                                      colorIndex = 0;
                                      return barColorsArray[++colorIndex];
                                  }
                                },
                              xLabelAngle: 35,
                              hideHover: 'auto',
                              resize: true
                            });

Minaminabe

Answer 4

maybe this site be helpful you: https://styleguide.getopensocial.com/item-javascript-morrisjs-barchart.html

add this property on your id in Morris chart

<div id="morris-bar-chart" style="height: 200px" data-  colors="#29abe2,#ffc142,#1ab394"></div>

and in your JS file do same this:

var labelColor = jQuery('#morris-bar-chart').css('color');
Morris.Bar({
  element: 'morris-bar-chart',
  data: [
    { y: '2012', 6: 257,790, 7: 517,920, 8: 0 },
    { y: '2013', 6: 234,696, 7: 732,660, 8: 0 },
    { y: '2014', 6: 172,186, 7: 964,016, 8: 0 },
    { y: '2015', 6: 124,448, 7: 1,127,621, 8: 44,335 },
    { y: '2016', 6: 86,839, 7: 994,627, 8: 116,559 }
  ],
  xkey: 'y',
  ykeys: ['6', '7', '8'],
  labels: ['Drupal 6', 'Drupal 7', Drupal, 8],
  gridTextColor: labelColor,
  barColors: jQuery('#morris-bar-chart').data('colors').split(',')
});

Lotta