CODEWITHSUNDEEP
javascriptmorris.js
pooja-bangar
pooja-bangar

Reputation: 131

Varying bar colors with morris.js bar chart?

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!

Upvotes: 11

Views: 30553

Answers (4)

Omid Moghadas
Omid Moghadas

Reputation: 347

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(',')
});

Upvotes: 0

Vutlhari Ndlovhu
Vutlhari Ndlovhu

Reputation: 11

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
                            });

Upvotes: 0

Marcelo
Marcelo

Reputation: 71

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
});

Upvotes: 7

SunilR
SunilR

Reputation: 301

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";
}
});

Upvotes: 30

Related Questions