plotly / plotly/plotly.js

add tooltip annotation feature

Open
#7,054 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature P3
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

Hi,

I would like to propose a tooltip feature.

When exploring data and presenting our findings, it is important to be able to interactively annotate data points. Most popular data analysis software allow to do that.

I wrote a code to introduce this functionality (found in this branch). The tooltip function can be activated by a new modebar button. It allows to add an annotation to every clicked point. By default, tooltips contain x and y coordinates. They can be customized to contain any additional data attached to the trace or points, which makes it a powerful tool for data exploration and presentation.

When a plot is created with editable: true, the tooltips can be dragged around for placement or deleted interactively. Their text can also be edited. To delete a tooltip, click on its text and delete it.

Tooltips can be customized with an optional tooltiptemplate (leverages existing hovertemplate code) and tooltip annotation options (leverages existing annotations code)
331887266-f7258b47-6eb2-4c3c-a3ce-f23899fe57e1
Live example

The JS version is already compatible with Dash when a figure is created with a dictionary passed to dcc.Graph (Dash demo) but not yet with Plotly.py

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked dev-tooltip branch, its README, and the live example, then review the proposed modebar button alongside the existing annotations and hovertemplate behavior. The Dash demo is in demo/dash/dash_app_with_tooltip.py. Done means the tooltip annotation behavior, customization, editing, dragging, and deletion work as described and remain compatible with existing plotly.js usage.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.