Highcharts is equipped with a rendering module that acts as a wrapper for JavaScript access to SVG in modern browsers and VML in IE < 9. lt can be used to draw basically any custom (interactive or non-interactive) shape like line, circle, custom tooltip, label, button and more.

The Renderer can be accessed through the main Highcharts object - Highcharts.Chart.renderer - or straight from the plotted chart - chart.renderer. To draw a simple shape we need to define its path or type (with size) and coordinates.

The drawing API is documented in detail at Highcharts.SVGRenderer and Highcharts.SVGElement.

Basic Renderer usage:

A basic example of a chart created using the above tool can be seen here: https://www.highcharts.com/demo/renderer

Other basic examples can be found in the API above.

Advanced Renderer real example usage:

Let's say we have a requirement to render two buttons in the top-left corner of our chart that change the series type on click.

An example implementation of the above can be found here: https://jsfiddle.net/BlackLabel/a71jqexz

Another example of implementation of a basic custom tooltip similar to the Highcharts default one can be found here: https://jsfiddle.net/BlackLabel/bfL91kmd

As you can see, SVG Renderer is a powerful tool very useful when we need to render/add/show/implement something that is not implemented in Highcharts core.