CODEWITHSUNDEEP
bar-chartmorris.js
rob
rob

Reputation: 5

how to change Morris bar color base on series key value?

I'm trying to set a custom color for the bar chart in morris.js. But in my code it only change the hover label text only.

Here is my code:

    var chart = Morris.Bar({
        element : 'morris-bar-chart',
        data : [ {y : '2006-05-01', user : 1, beed : 90 }, 
                 {y : '2006-05-01', user : 2, beed : 80 }, 
                 {y : '2006-05-01', user : 3, beed : 70 }, 
                 {y : '2006-05-02', user : 1, beed : 190}, 
                 {y : '2006-05-02', user : 1, beed : 290}, 
                 {y : '2006-05-01', user : 2, beed : 90 }, 
                 {y : '2006-05-02', user : 3,beed : 90  } ],
        barColors : function(row, series, type) {
        console.log("--> "+row.label, series, type); // output in console
            if (series.key == 'user' || series.key == 'beed') { // Doesn't work if series.key == 'beed' not included in if condition. 
                if (row.y == '1')
                    return "#1AB244"; // green
                else
                    return "#fec04c"; // orange
            }
        },
        xkey : 'y',
        ykeys : [ 'user', 'beed' ],
        labels : [ 'User: ', 'Beed: ' ],
        xLabelAngle : 45,
        hideHover : 'auto',
        resize : true,
        stacked : true
    });

I know its much easier to change the bar char color by changing xkey to value to 'user' then used the code below:

barColors: function (row, series, type) {
if(row.label == "1") return "#1AB244"; // green
else return "#fec04c"; // orange
}

But I want to change the color of whole bar chart color where 'y' is the xkey where all user equal to '1' set to green color then the rest of bar chart is set to orange color. Is this possible to achieved?

Upvotes: 0

Views: 1044

Answers (1)

Pierre
Pierre

Reputation: 1256

I suppose it is easier to define the colors array first using javascript by checking your dataset, and then apply it through the setting barColors.

Upvotes: 0

Related Questions