X key format in Morris Chart to be represent as DD-MM-YYYY

Question

Can a X axis format in Morris chart be changed from YYYY-MM-DD to DD-MM-DD?

Answer 1

Use the xLabelFormat function to achieve that:

xLabelFormat: function (d) {
    return ("0" + d.getDate()).slice(-2) + '-' + ("0" + (d.getMonth() + 1)).slice(-2) + '-' + d.getFullYear();
}

Morris.Area({
  element: 'chart',
  data: [
    { y: '2015-01-01', a: 1, b: 2 },
    { y: '2015-01-02', a: 2,  b: 3 },
    { y: '2015-01-02', a: 2,  b: 2 },
    { y: '2015-01-03', a: 1,  b: 4 },
    { y: '2015-01-04', a: 2,  b: 5 },
    { y: '2015-01-05', a: 3,  b: 3 },
    { y: '2015-01-06', a: 1, b: 2 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Individual Score', 'Team Score'],
  fillOpacity: 0.4,
  hideHover: 'auto',
  behaveLikeLine: true,
  resize: true,
  xLabelFormat: function (d) {
    return ("0" + d.getDate()).slice(-2) + '-' + ("0" + (d.getMonth() + 1)).slice(-2) + '-' + d.getFullYear();
  },
  pointFillColors: ['#ffffff'],
  pointStrokeColors: ['black'],
  lineColors: ['red', 'blue'],
});

<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="chart"></div>