Heatmap: val attribute in apexcharts-heatmap-rect svg rects is incorrect; breaks legend hover

[dangrussell]

Description

I noticed that hovering over the legend produced strange results across color ranges. After some exploration, I found that the hover ranges are created using the value of the SVG rectangle. Then, I noticed that the SVG rect values in the first and last rows of the grid appear to be swapped.

Steps to Reproduce

1. Create a data series with 7 rows (Sunday thru Saturday), and 24 columns (12AM thru 11PM)
2. Use this data series in a Heatmap
3. The value val of attribute of cells in the first row ("Sunday"), are actually the values for the last row of data ("Saturday")

Expected Behavior

The value val of attribute of cells in the first row ("Sunday"), are the values for the first row of data ("Sunday")

Actual Behavior

The value val of attribute of cells in the first row ("Sunday"), are actually the values for the last row of data ("Saturday")

Screenshots

Buggy hover:

Compare the first row (Sunday) to the last row (Saturday):

All other rows (like Wednesday, for example) are correct:

Reproduction Link

https://codepen.io/dangrussell/pen/BavMbXN

[dangrussell]

Further testing seems to indicate this is may be caused by this plotOptions property:

yaxis: {
  reversed: true,
},

If this is removed or set to false, the issue is not present.