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.