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:
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:
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.