CODEWITHSUNDEEP
javascriptcssmorris.js
Mario
Mario

Reputation: 520

Morris bar chart, show 2 colors in 1 line, negative and positive

I have a Morris bar chart that show positive and negative results.

What do i want to achieve is to make 2 colors, one for negative and one for positive results like on a images below.

I looked into documentation and didn't find any solution to this.

Is this possible or not ?

Here is a current code:

var positiveColor = 'orange';   //'#32CD32';
var negativeColor = 'grey';     //'#FF6347';

Morris.Bar({
  element: 'morris-bar2',
  barColors: [positiveColor, negativeColor],
  data: <?php echo $json_data2; ?>,
  stacked: false,
  resize: true,
  xkey: 'y',
  ykeys: ['a'],
  labels: ['Total', ''],
  hideHover: false,
  gridTextColor: '#4F5F6F',
  gridTextSize: '12'
});

Examples:

Current bar color enter image description here

Need to be like

enter image description here

Upvotes: 1

Views: 1566

Answers (2)

Jerodev
Jerodev

Reputation: 33196

according to one of the examples on GitHub, you can use a callback for the barColors property.

So, you could do something like this:

barColors: function (row, series, type) {
    if (row.y < 0)
        return "grey";
    return "orange";
}

Upvotes: 5

WanHazyan
WanHazyan

Reputation: 257

Well, you can always use this code

 ykeys: ['positive', 'negative'],
 barColors: ['#00cccc', '#3300cc'],

and it just an example

complete example of what I have;

var bar = new Morris.Bar({
  element: 'chart',
  resize: true,
  data:[<?php echo $chart_data; ?>],
  barColors: ['#00cccc', '#3300cc'],
  xkey: 'date',
  ykeys: ['Positive', 'Negative'],
  labels: ['Positive Value', 'Negative Value '],
  hideHover: 'auto'
});

Upvotes: 0

Related Questions