morris chart days customization issue

Question

I am using morris line chart i want to show 7 days clients registration in chart but MON and Tue is not displaying in my chart. Please let know how can i fix this.

I want to show weekdays like this chart.

Morris.Line({
  element: 'myfirstchart',
  data: [{
      "period": "2018-02-26",
      "total": 4
    },
    {
      "period": "2018-02-27",
      "total": 2
    },
    {
      "period": "2018-02-28",
      "total": 5
    },
    {
      "period": "2018-03-01",
      "total": 9
    },
    {
      "period": "2018-03-02",
      "total": 15
    },
    {
      "period": "2018-03-03",
      "total": 12
    }
  ],
  lineColors: ['#f5901a', '#fc8710', '#FF6541', '#A4ADD3', '#766B56'],
  xkey: 'period',
  ykeys: ['total'],
  labels: ['Total'],
  xLabels: 'day',
  xLabelAngle: 90,
  xLabelFormat: function(d) {
    var weekdays = new Array(7);
    weekdays[0] = "MON";
    weekdays[1] = "TUE";
    weekdays[2] = "WED";
    weekdays[3] = "THU";
    weekdays[4] = "FRI";
    weekdays[5] = "SAT";
    weekdays[6] = "SUN";

    return weekdays[d.getDay() - 1] + '-' +
      ("0" + (d.getMonth() + 1)).slice(-2) + '-' +
      ("0" + (d.getDate())).slice(-2);
  },
  resize: true
});

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/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>

<div id="chart_div" style="width: 100%; height: 300px;">
  <div class="chart-title">Client Registrations</div>
  <div id="myfirstchart" style="height: 250px;"></div>
</div>

It's because `getDay()` returns `1` for Monday, not `0`. So you need to do `weekdays[d.getDay() - 1] + ...` — Rory McCrossan, Feb 26 '18 at 14:23
That's due to the angle, and there simply not being enough space. If you set `xLabelAngle: 90` it appears. If you just display the abbreviated day name horizontally, as per your design, it should work fine — Rory McCrossan, Feb 26 '18 at 14:32
You can also try to set xLabelMargin = 0, this would give more space to display X axis values (default value is 24 for Line charts, 50 for Bar charts) — Pierre, Feb 28 '18 at 07:52

Rory McCrossan · Accepted Answer · 2018-02-26T14:55:35.270

Firstly note that getDay() starts at 0 for Sunday, so your array of day names should do the same to keep it consistent.

As for the actual issue, that's because you've set the labels to display at an angle and there is physically not enough space on the left to show one.

To solve this you can remove the angle and amend the JS to display only the abbreviated day name, as per the design in your image:

var weekdays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];

Morris.Line({
  element: 'myfirstchart',
  data: [{
      "period": "2018-02-26",
      "total": 4
    },
    {
      "period": "2018-02-27",
      "total": 2
    },
    {
      "period": "2018-02-28",
      "total": 5
    },
    {
      "period": "2018-03-01",
      "total": 9
    },
    {
      "period": "2018-03-02",
      "total": 15
    },
    {
      "period": "2018-03-03",
      "total": 12
    }, {
      "period": "2018-03-04",
      "total": 12
    }
  ],
  lineColors: ['#f5901a', '#fc8710', '#FF6541', '#A4ADD3', '#766B56'],
  xkey: 'period',
  ykeys: ['total'],
  labels: ['Total'],
  xLabels: 'day',
  xLabelFormat: function(d) {
    return weekdays[d.getDay()];
  },
  resize: true
});

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/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>

<div id="chart_div" style="width: 100%; height: 300px;">
  <div class="chart-title">Client Registrations</div>
  <div id="myfirstchart" style="height: 250px;"></div>
</div>

Ah yes, that was because the array of day names started at Monday instead of Sunday. I've amended the answer fo ryou — Rory McCrossan, Feb 26 '18 at 14:55

morris chart days customization issue

1 Answers1