Skip to content

Custom HTML Templates for Annotations and Tooltips #6420

Closed
@cd-alexslater-old

Description

@cd-alexslater-old

Hello Everyone,

I've dug through the issues and can't find what I'm specifically asking for - essentially it would be great to use custom HTML in the tooltips and annotations. I know there is a hover template configurable for Plotly.js, but I'm asking for a bit more in the sense that it would be great to use whatever HTML you'd like besides a set of pre-supported tags (<br>, <b>, etc)

This seems to be done by other libraries in a number of different ways:

  • Apex Charts
    Apex charts takes a string from a callback and parses it to HTML.

  • ChartJS
    ChartJS takes a callback, passes the context, and expects the user to manage the dom element (create and attach one, etc)

  • Codepen to how it's done in FusionCharts
    (look for the 'plottooltext' attribute in the code) Another example of directly rendering the HTML

Workaround for now is probably just for me to attach and manage my own dom elements - E.g. off a plotly_hover event I place my element on the mouse position. I haven't figured out how to work around the custom annotations yet.. I'm thinking of injecting my HTML with a tag into the plotly annotations myself after render, but that's pretty dirty and probably won't work well with panning etc.

Any ideas as to how I can work around this to make plotly work in the meantime are also very welcome 👍

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions