Custom HTML Templates for Annotations and Tooltips

[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 👍

[cd-alexslater-old]

As a quick and dirty POC I've stuffed some HTML code inside a tag inside of the annotation container, using my own D3 code. It will restuff the html in there every time plotly_afterplot is called. I also used aurelia.enhance to setup some dynamic view model type functionality on the HTML, and I manually manage the lifecycles to prevent memory leaks:

I enabled annotation position editing and you can drag it around just fine, and I'm looking into ways to make panning work (need to hook up the right event because it rerenders the HTML when you pan).

You'll notice a custom tooltip working there too, but that was done myself using plotly_hover. I imagine there is space for this to be done within the graph but a tooltip doesn't have to be internal to work so I didn't bother.