Highcharts: How to add HTML inside of chart area

Question

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.

Answer 1

You will have to use Highcharts Renderer API.

You can refer this JSFIDDLE working demo

it works like:

var chart = new Highcharts.Chart({
....
.....
......
}, function(chart) { // on complete

    chart.renderer.text('This text is <span style="color: red">styled</span> and <a href="http://example.com">linked</a>', 150, 80)
        .css({
            color: '#4572A7',
            fontSize: '16px'
        })
        .add();

});

Answer 2

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.