Area chart hover reversed

[atimmer]

When displaying an area chart using morris the order of the labels in the hover is reversed in comparison to the actual data. So the item provided first in the ykeys and labels is at the top of the hover and at the bottom of the chart, they misalign.

For an example you can look at: http://wpcentral.io/version-usage/

A possible workaround would be using the hoverCallback to reverse the order in the DOM after it has been created. But this doesn't seem like the correct way to get this behaviour.

Is this a bug, or is this intended behaviour?

[JelteF]

This is probably a bug, you can fix it with a pull request if you want.
On Dec 6, 2014 4:57 PM, "Anton Timmermans" [email protected] wrote:

When displaying an area chart using morris the order of the labels in the
hover is reversed in comparison to the actual data. So the item provided
first in the ykeys and labels is at the top of the hover and at the
bottom of the chart, they misalign.

For an example you can look at: http://wpcentral.io/version-usage/

A possible workaround would be using the hoverCallback to reverse the
order in the DOM after it has been created. But this doesn't seem like the
correct way to get this behaviour.

Is this a bug, or is this intended behaviour?

—
Reply to this email directly or view it on GitHub
#534.

[pierresh]

I solved this issue by modifying the file morris.js as follow (starting from line 942):

Line.prototype.hoverContentForRow = function(index) {
  var content, j, jj, row, y, _i, _len, _ref;
  row = this.data[index];
  content = $("<div class='morris-hover-row-label'>").text(row.label);
  content = content.prop('outerHTML');
  _ref = row.y;
  // for (j = _i = 0, _len = _ref.length; _i < _len; j = ++_i) {
  for (jj = _i = 0, _len = _ref.length; _i < _len; jj = ++_i) {
    j = _len - 1 - jj;

And for stacked bar charts (starting from line 1798):

Bar.prototype.hoverContentForRow = function(index) {
  var content, j, jj, row, x, y, _i, _len, _ref;
  row = this.data[index];
  content = $("<div class='morris-hover-row-label'>").text(row.label);
  content = content.prop('outerHTML');
  _ref = row.y;
  for (jj = _i = 0, _len = _ref.length; _i < _len; jj = ++_i) {
    j = _len - 1 - jj;

[Demitrius]

Stacked bar looks good, but Line charts hover label order broken :(

Also, possible manually set lines "z order"? When two lines on the same position, one line color will above, second line will under.
Now this order depend on sequence colors/data in options, but I need choose my custom sequence.