chartjs / chartjs/Chart.js

Hover features are not compatible with css zoom property

Open
#11,900 0 comments 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### Expected behavior

When I'm using the CSS property zoom: 2; the hover elements of my canvas should take in account the current placement of the canvas element.
![issue](https://github.com/user-attachments/assets/5be49e95-c44a-4b54-bab7-72dfae6a339e)

The zoom property is part of the Baseline 2024.
Since May 2024, this feature works across the latest devices and browser versions.
It should be taken in account.

### Current behavior

If I'm applying zoom:2; to the chart or any parent element, the hover is desynchronized from the canvas element.
It takes in account the placement of the canvas' elements without the zoom.

![issue](https://github.com/user-attachments/assets/5be49e95-c44a-4b54-bab7-72dfae6a339e)
With the image above, you can see the tooltip opened is march instead of febuary. With the image below, you can see the chart without zoom above the actual display. The moose placement is does not take in account the zoom.
![issue2](https://github.com/user-attachments/assets/d92f6122-996a-4c25-b425-55abff7eae9b)

### Reproducible sample

https://www.chartjs.org/docs/latest/samples/bar/floating.html

### Optional extra steps/info to reproduce

1. Generate your Chart graphic
2. Add to the container the css property: "zoom: 2;"
3. Hover the different parts of the canvas to constat the hover is calculated with the unzoomed chart, which is not what you can see.

### Possible solution

_No response_

### Context

_No response_

### chart.js version

4.4.2

### Browser name and version

_No response_

### Link to your project

_No response_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.