Highcharts library is equipped with a powerful rendering module that acts as a wrapper for JavaScript access to SVG in modern browsers and VML in IE < 9. It can be used to draw any custom (interactive or non-interactive) shape like circle, line, rectangle, label and more. It’s quite simple to use. Let’s take a look at a few examples.

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 changes the series type on click.

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

Another approach to using Renderer in a more advanced way could be to connect the top edges of columns. It’s possible thanks to the path() method.

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

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.