Here is my quick custom for label always display but only work after hover over all point. Hope this help.
Step 1: Edit source file morris.js like this (here i use version v0.5.0):
Line.prototype.hoverContentForRow = function(index) {
var content, j, row, y, _i, _len, _ref;
row = this.data[index];
content = "<div class='morris-hover-row-label'>" + row.label + "</div>";
_ref = row.y;
for (j = _i = 0, _len = _ref.length; _i < _len; j = ++_i) {
y = _ref[j];
content += "<div class='morris-hover-point' style='color: " + (this.colorFor(row, j, 'label')) + "'>\n " + this.options.labels[j] + ":\n " + (this.yLabelFormat(y)) + "\n</div>";
}
if (typeof this.options.hoverCallback === 'function') {
//edit the line bellow right here. add new params "row._x, row._ymax"
content = this.options.hoverCallback(index, this.options, content, row.src, row._x, row._ymax);
}
return [content, row._x, row._ymax];
};
Step 2: At your define graph: Edit event 'hoverCallback' like this:
function ShowDSTheoNgay(data) {
var line = new Morris.Line({
element: 'LINECHART_DSTheoNgay',
resize: true,
data: data,
xkey: 'ngay',
ykeys: ['dsOnline', 'dsOffline'],
labels: ['Online', 'Offline'],
lineColors: ['#61af20', "#a86400"],
hideHover: false,
hoverCallback: function (index, options, content, row, x , y) {
var default_html = "<div class='morris-hover morris-default-style'> </div>";
var default_html = $(default_html).append(content);
moveTo($(default_html), $('#LINECHART_DSTheoNgay'), x, y);
return '';
}
});
}
Step 3: Add custom 'moveTo' function:
function moveTo(el, options, x, y) {
options.append(el);
var hoverHeight, hoverWidth, left, parentHeight, parentWidth, top;
parentWidth = options.innerWidth();
parentHeight = options.innerHeight();
hoverWidth = el.outerWidth();
hoverHeight = el.outerHeight();
left = Math.min(Math.max(0, x - hoverWidth / 2), parentWidth - hoverWidth);
if (y != null) {
top = y - hoverHeight - 10;
if (top < 0) {
top = y + 10;
if (top + hoverHeight > parentHeight) {
top = parentHeight / 2 - hoverHeight / 2;
}
}
} else {
top = parentHeight / 2 - hoverHeight / 2;
}
el.css({
left: left + "px",
top: parseInt(top) + "px"
});
return;
}
Note : this Code is my quick custom. I'm not focus to performance right now.