Highcharts: How to add HTML inside of chart area

charts, graph, highcharts, javascript, jquery

Solution

Edit:

In the latests versions (v4 at least) in Renderer API methods `useHTML` argument was added, for example `renderer.text(str, x, y, useHTML)` - which will render elements as HTML and position them correctly. Of course simple shapes (`rect`, `path` etc.) are always rendered in SVG/VML.

Extra note: For `HTML` elements, to see them on exported chart, don't forget to set `exporting.allowHTML`.

Old answer:

Renderer is to render elements on SVG/VML. If you want to add HTML tags, add them the same way as is done in Highcharts - position:absolute and set left/top values to put this inside container.

Problem

Is it possible to add custom HTML (e.g. div) inside of chart area (inside of border; Highcharts Renderer does not seem to offer this option)? If yes how would one go about doing this? Any help is appreciated.

Original source