Search code examples
javascriptbar-chartmorris.js

Change Default Colors Of Morris.js Bar Chart


I've just started working with the Morris.js bar chart source and am having a small issue trying to get the bars to have different colors for the two different Y keys. But for some reason the results I'm getting is it it's only setting the one color it's not running the else.

<script>
    new Morris.Bar({
        element: 'bar-chart',
        data: [
            { day: 'Day 1', amount1: 1, amount2: 1 },
            { day: 'Day 2', amount1: 2, amount2: 1 },
            { day: 'Day 3', amount1: 3, amount2: 2 },
            { day: 'Day 4', amount1: 4, amount2: 2 },
            { day: 'Day 5', amount1: 5, amount2: 3 },
            { day: 'Day 6', amount1: 6, amount2: 3 },
            { day: 'Day 7', amount1: 7, amount2: 4 }
        ],
        xkey: 'day',
        ykeys: ['amount1', 'amount2'],
        labels: ['Amount One', 'Amount Two'],

        hideHover: 'auto',

        barColors: function(row,series,type){
            if(row.ykeys=='amount1'){
                return "#9b5cd4";
            } 
            else {
                return "#5e2590";
            }
        }

    });
</script>

Solution

  • I am not sure why you want to use a function for this, in my opinion you can just set the option barColors with a simple array like this:

    barColors:['#9b5cd4', '#5e2590'],