How to set bigger negative value to display a shorter bar in morris bar chart?

Question

Take a look at this jsfiddle link

I am going to use this chart to display under-purchase quantity, so how do I set -20 has a shorter bar than -50 in the chart?

-60 is not even displaying on the chart.

If I un-comment //,{ material: '', value: 0, vendor: '' }, then the chart display correctly according to my requirement, but this is not the fix I am looking for.

My chart will contains negative values only, how can I fix this?

new Morris.Bar({
    // ID of the element in which to draw the chart.
    element: 'myfirstchart',
    // Chart data records -- each entry in this array corresponds to a point on
    // the chart.
    data: [
        { material: 'aaa', value: -20, vendor: 'aaa' },
        { material: 'bbb', value: -30, vendor: 'bbb' },
        { material: 'ccc', value: -40, vendor: 'ccc' },
        { material: 'ddd', value: -50, vendor: 'ddd' },
        { material: 'eee', value: -60, vendor: 'eee' }
        //,{ material: '', value: 0, vendor: '' }
    ],
    hoverCallback: function(index, options, content) {
        var row = options.data[index]; 
        return(row.value + "<br>" + row.vendor);
    },
    // The name of the data record attribute that contains x-values.
    xkey: 'material',
    // A list of names of data record attributes that contain y-values.
    ykeys: ['value'],
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: ['not in use']
});

Answer 1

Set the ymax property to 0:

Please try the following snippet:

new Morris.Bar({
  element: 'myfirstchart',
  data: [
    { material: 'aaa', value: -20, vendor: 'aaa' },
    { material: 'bbb', value: -30, vendor: 'bbb' },
    { material: 'ccc', value: -40, vendor: 'ccc' },
    { material: 'ddd', value: -50, vendor: 'ddd' },
    { material: 'eee', value: -60, vendor: 'eee' }
  ],
	hoverCallback: function(index, options, content) {
  	var row = options.data[index]; 
		return(row.value + "<br>" + row.vendor);
	},
  xkey: 'material',
  ykeys: ['value'],
  labels: ['not in use'],
  ymax: 0
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>

<div id="myfirstchart"></div>