Morris.js xKey adding nonsense values

Question

I have been struggling with this issue for an hour, and I can't figure out why Morris chart put some kind of time values into the X axe.

First of all, my JSON is the following:

{"data":[{"date":"2015-06-08","payed":"18.08","to_pay":"18.08"},
         {"date":"2015-06-11","payed":"70.24","to_pay":"108.24"}]}

And I'm creating the chart this way:

var json = JSON.parse(response);

Morris.Line({
    element: 'recebimentos-chart',
    data: json.data,
    xkey: 'date',
    ykeys: ['to_pay', 'payed'],
    labels: ['To pay', 'Payed'],
    gridTextColor: '#000',
    lineColors: ['#EA8A67', '#22aa22'],
});

And now the problem: why in god's heaven is the X axe writing the values that the image shows?

As you can see in my JSON there's two different dates. If I only have one date (no matter which one) the chart works good (it output in the X axe the date value), for example:

{"data":[{"date":"2015-06-11","payed":"18.08","to_pay":"18.08"},
         {"date":"2015-06-11","payed":"70.24","to_pay":"108.24"}]}

EDIT 1: While trying in JSFiddle I found out that the problem is the width of the chart. With a small width the chart presents the dates correctly, with a large width it presents hours (??)

The problem is that I need to present a large chart..

Answer 1

Try this : http://jsfiddle.net/z97z2Lam/1/

Their doc says about the xLabels property:

Sets the x axis labelling interval. By default the interval will be automatically computed. The following are valid interval strings:
"decade"
"year"
"month"
"week"
"day"
"hour"
"30min"
"15min"
"10min"
"5min"
"minute"
"30sec"
"15sec"
"10sec"
"5sec"
"second"