chartjs / chartjs/Chart.js

Provide out-of-the-box HTML tooltip capability

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

Description

This issue was created after discussion on https://github.com/chartjs/Chart.js/issues/622#issuecomment-598267163. Thanks for your help with this!

## Expected Behavior
Tooltips should not get cut off/cropped.

## Current Behavior
The tooltip is rendered within the canvas element, which causes it to be cutoff if it extends beyond the canvas element. For instance, I have a horizontal bar chart with a single bar (used for status display), and the tooltip has multiple entries that are cropped out of view.

## Possible Solution
I've heard suggestions of rendering the tooltip outside of the canvas so its visible regardless of canvas sizing, but I'm not in a good position to say whether that's the best path forward.

## Steps to Reproduce (for bugs)
Here is my reproducible example: https://plnkr.co/edit/QKIivEiOLyanvis0?open=lib%2Fapp.ts&deferRun=1

Hover your cursor over the bar to see the tooltip get cutoff.

## Environment

* Chart.js version: 2.9.3
* Browser name and version: Chrome 80.0.3987.116

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.