How to change the x-axis precision with morris.js

graphmorris.js

I have a graph that plots dates along the x-axis and hours slept on the y-axis.

If I display 7 days of data the x-axis displays each date and graph looks good:

enter image description here

When I toss 8 weeks worth of data into the graph, morris.js auto-adjusts the precision of the x-axis labels to show fewer dates (great!) but doesn't do the same adjustment for the plot points, so the graph looks like this:

enter image description here

How do I make it so morris.js only places plot points at each label interval?

Here's the code that displays the graph:

$ ->
  new Morris.Line(
    element: 'naps_chart',
    data: $('#naps_chart').data('naps'),
    xkey: 'happened_at',
    ykeys: ['time'],
    labels: ['Hours']
  );

Best Answer

The easiest/best solution I found to this problem is to set pointSize: 0 and just smooth the graph. It still shows the plot points on hover and looks much better.

enter image description here

Related Topic