apexcharts.js icon indicating copy to clipboard operation
apexcharts.js copied to clipboard

Bullet is not centered in the heatmap legend

Open felipefialho opened this issue 7 months ago • 3 comments

Description

When using type="heatmap" in the chart, the legend bullet appears slightly misaligned — it's not vertically centered. This seems to be due to an unnecessary top: 2px style, which is applied [here in the code](https://github.com/apexcharts/apexcharts.js/blob/05fa8e54b9ab9123619bb312f8159a2009d30f36/src/modules/legend/Legend.js#L90).

Steps to Reproduce

  1. Create a chart with type="heatmap".
  2. Observe the legend bullet.

Expected Behavior

The bullet should be vertically centered within the legend item.

Image Image

Actual Behavior

The bullet appears slightly offset due to the top: 2px adjustment.

Image Image

felipefialho avatar Apr 17 '25 19:04 felipefialho

Please provide the require reproduction link or we'll need to close this issue.

Thanks

brianlagunas avatar Apr 17 '25 20:04 brianlagunas

Never mind, this is visible on all existing samples. Thanks for reporting it.

brianlagunas avatar Apr 18 '25 14:04 brianlagunas

@brianlagunas Can you point out where do you see this? I am unable to verify the issue on my end. @felipefialho It would be better if you can provide a codepen

junedchhipa avatar Apr 25 '25 10:04 junedchhipa