Skip to content

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

@dangrussell

Description

@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:
hover

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

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

Reproduction Link

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingheatmap

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions