Repeating values on x-axis Morris.js line chart

Question

I'm trying to display line chart with daily stats. But the dates on X- axis seem to be repeating.

Link to image

Here is the code for line chart:

    new Morris.Line({
  element: 'chart',
  data: [ @foreach($Data as $data)
        { date: '{{$data['date']}}', value: {{$data['diff']}}},
        @endforeach
    ],
   xkey: ['date'],
   xLabelFormat: function(date) {
      return date.getFullYear() + '/' + (date.getMonth()+1)+ '/' + date.getDate(); 
      },
   xLabelAngle : 50,
   ykeys: ['value'],
   labels: ['Value'],
   resize: true,
   smooth: true,
   lineColors: ['#9ec628'],
  dateFormat: function(date) {
  date = new Date(date);
        return date.getFullYear()+ '/' + (date.getMonth()+1)+ '/' + date.getDate(); 
            },

}); 

I also tried parseTime: false but that's not helping.

Answer 1

The solution is to add the option xLabels: 'day' to your config, then only 1 value in x-axis per day would be displayed. I found that option in the documentation http://morrisjs.github.io/morris.js/lines.html