highcharts 6.1.1 → 6.2.0

package/js/es-modules/parts/SvgRenderer.js

@@ -1,13 +1,261 @@
 /**
- * (c) 2010-2017 Torstein Honsi
+ * (c) 2010-2018 Torstein Honsi
  *
  * License: www.highcharts.com/license
  */
 
+/**
+ * Options to align the element relative to the chart or another box.
+ *
+ * @typedef Highcharts.AlignObject
+ *
+ * @property {string} [align='left']
+ *           Horizontal alignment. Can be one of `left`, `center` and
+ *           `right`.
+ *
+ * @property {string} [verticalAlign='top']
+ *           Vertical alignment. Can be one of `top`, `middle` and `bottom`.
+ *
+ * @property {number} [x=0]
+ *           Horizontal pixel offset from alignment.
+ *
+ * @property {number} [y=0]
+ *           Vertical pixel offset from alignment.
+ *
+ * @property {boolean} [alignByTranslate=false]
+ *           Use the `transform` attribute with translateX and translateY
+ *           custom attributes to align this elements rather than `x` and
+ *           `y` attributes.
+ */
+
+/**
+ * Bounding box of an element.
+ *
+ * @typedef Highcharts.BBoxObject
+ *
+ * @property {number} height
+ *           Height of the bounding box.
+ *
+ * @property {number} width
+ *           Width of the bounding box.
+ *
+ * @property {number} x
+ *           Horizontal position of the bounding box.
+ *
+ * @property {number} y
+ *           Vertical position of the bounding box.
+ */
+
+/**
+ * A clipping rectangle that can be applied to one or more
+ * {@link SVGElement} instances. It is instanciated with the
+ * {@link SVGRenderer#clipRect} function and applied with the
+ * {@link SVGElement#clip} function.
+ *
+ * @example
+ * var circle = renderer.circle(100, 100, 100)
+ *     .attr({ fill: 'red' })
+ *     .add();
+ * var clipRect = renderer.clipRect(100, 100, 100, 100);
+ *
+ * // Leave only the lower right quarter visible
+ * circle.clip(clipRect);
+ *
+ * @typedef {Highcharts.SVGElement} Highcharts.ClipRectElement
+ */
+
+/**
+ * The font metrics.
+ *
+ * @typedef Highcharts.FontMetricsObject
+ *
+ * @property {number} b
+ *           The baseline relative to the top of the box.
+ *
+ * @property {number} h
+ *           The line height.
+ *
+ * @property {number} f
+ *           The font size.
+ */
+
+/**
+ * Gradient options instead of a solid color.
+ *
+ * @example
+ * // Linear gradient used as a color option
+ * color: {
+ *     linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
+ *         stops: [
+ *             [0, '#003399'], // start
+ *             [0.5, '#ffffff'], // middle
+ *             [1, '#3366AA'] // end
+ *         ]
+ *     }
+ * }
+ *
+ * @private
+ * @typedef Highcharts.GradientColorObject
+ *
+ * @property {Highcharts.LinearGradientColorObject} linearGradient
+ *           Holds an object that defines the start position and the end
+ *           position relative to the shape.
+ *
+ * @property {Highcharts.RadialGradientColorObject} radialGradient
+ *           Holds an object that defines the center position and the
+ *           radius.
+ *
+ * @property {Array<Array<number|string>>} stops
+ *           The first item in each tuple is the position in the gradient,
+ *           where 0 is the start of the gradient and 1 is the end of the
+ *           gradient. Multiple stops can be applied. The second item is the
+ *           color for each stop. This color can also be given in the rgba
+ *           format.
+ */
+
+/**
+ * Defines the start position and the end position for a gradient relative
+ * to the shape.
+ *
+ * @private
+ * @typedef Highcharts.LinearGradientColorObject
+ *
+ * @property {number} x1
+ *           Start horizontal position of the gradient. Ranges 0-1.
+ *
+ * @property {number} x2
+ *           End horizontal position of the gradient. Ranges 0-1.
+ *
+ * @property {number} y1
+ *           Start vertical position of the gradient. Ranges 0-1.
+ *
+ * @property {number} y2
+ *           End vertical position of the gradient. Ranges 0-1.
+ */
+
+/**
+ * Defines the center position and the radius for a gradient.
+ *
+ * @private
+ * @typedef Highcharts.RadialGradientColorObject
+ *
+ * @property {number} cx
+ *           Center horizontal position relative to the shape. Ranges 0-1.
+ *
+ * @property {number} cy
+ *           Center vertical position relative to the shape. Ranges 0-1.
+ *
+ * @property {number} r
+ *           Radius relative to the shape. Ranges 0-1.
+ */
+
+/**
+ * A rectangle.
+ *
+ * @typedef Highcharts.RectangleObject
+ *
+ * @property {number} height
+ *           Height of the rectangle.
+ *
+ * @property {number} width
+ *           Width of the rectangle.
+ *
+ * @property {number} x
+ *           Horizontal position of the rectangle.
+ *
+ * @property {number} y
+ *           Vertical position of the rectangle.
+ */
+
+/**
+ * The shadow options.
+ *
+ * @typedef Highcharts.ShadowOptionsObject
+ *
+ * @property {string} [color=#000000]
+ *           The shadow color.
+ *
+ * @property {number} [offsetX=1]
+ *           The horizontal offset from the element.
+ *
+ * @property {number} [offsetY=1]
+ *           The vertical offset from the element.
+ *
+ * @property {number} [opacity=0.15]
+ *           The shadow opacity.
+ *
+ * @property {number} [width=3]
+ *           The shadow width or distance from the element.
+ */
+
+/**
+ * Serialized form of an SVG definition, including children. Some key
+ * property names are reserved: tagName, textContent, and children.
+ *
+ * @typedef Highcharts.SVGDefinitionObject
+ *
+ * @property {number|string|Array<Highcharts.SVGDefinitionObject>|undefined} [key:string]
+ *
+ * @property {Array<Highcharts.SVGDefinitionObject>} [children]
+ *
+ * @property {string} [tagName]
+ *
+ * @property {string} [textContent]
+ */
+
+/**
+ * An extendable collection of functions for defining symbol paths.
+ *
+ * @typedef Highcharts.SymbolDictionary
+ *
+ * @property {Function} [key:Highcharts.SymbolKey]
+ */
+
+/**
+ * Can be one of `arc`, `callout`, `circle`, `diamond`, `square`,
+ * `triangle`, `triangle-down`. Symbols are used internally for point
+ * markers, button and label borders and backgrounds, or custom shapes.
+ * Extendable by adding to {@link SVGRenderer#symbols}.
+ *
+ * @typedef {string} Highcharts.SymbolKey
+ *
+ * @validvalue ["arc", "callout", "circle", "diamond", "square", "triangle",
+ *             "triangle-down"]
+ */
+
+/**
+ * Additional options, depending on the actual symbol drawn.
+ *
+ * @typedef Highcharts.SymbolOptionsObject
+ *
+ * @property {number} anchorX
+ *           The anchor X position for the `callout` symbol. This is where
+ *           the chevron points to.
+ *
+ * @property {number} anchorY
+ *           The anchor Y position for the `callout` symbol. This is where
+ *           the chevron points to.
+ *
+ * @property {number} end
+ *           The end angle of an `arc` symbol.
+ *
+ * @property {boolean} open
+ *           Whether to draw `arc` symbol open or closed.
+ *
+ * @property {number} r
+ *           The radius of an `arc` symbol, or the border radius for the
+ *           `callout` symbol.
+ *
+ * @property {number} start
+ *           The start angle of an `arc` symbol.
+ */
+
 'use strict';
+
 import H from './Globals.js';
 import './Utilities.js';
 import './Color.js';
+
 var SVGElement,
     SVGRenderer,
 
@@ -47,9 +295,6 @@ var SVGElement,
     symbolSizes = H.symbolSizes,
     win = H.win;
 
-/**
- * @typedef {Object} SVGDOMElement - An SVG DOM element.
- */
 /**
  * The SVGElement prototype is a JavaScript wrapper for SVG elements used in the
  * rendering layer of Highcharts. Combined with the {@link
@@ -65,7 +310,8 @@ var SVGElement,
  * [label]{@link Highcharts.SVGRenderer#label}, [g]{@link
  * Highcharts.SVGRenderer#g} and more.
  *
- * @class Highcharts.SVGElement
+ * @class
+ * @name Highcharts.SVGElement
  */
 SVGElement = H.SVGElement = function () {
     return this;
@@ -80,21 +326,24 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * For labels, these CSS properties are applied to the `text` node directly.
      *
      * @private
-     * @type {Array<String>}
+     * @name Highcharts.SVGElement#textProps
+     * @type {Array<string>}
      */
     textProps: ['direction', 'fontSize', 'fontWeight', 'fontFamily',
         'fontStyle', 'color', 'lineHeight', 'width', 'textAlign',
-        'textDecoration', 'textOverflow', 'textOutline'],
+        'textDecoration', 'textOverflow', 'textOutline', 'cursor'],
 
     /**
      * Initialize the SVG element. This function only exists to make the
      * initiation process overridable. It should not be called directly.
      *
-     * @param  {SVGRenderer} renderer
-     *         The SVGRenderer instance to initialize to.
-     * @param  {String} nodeName
-     *         The SVG node name.
+     * @function Highcharts.SVGElement#init
      *
+     * @param {Highcharts.SVGRenderer} renderer
+     *        The SVGRenderer instance to initialize to.
+     *
+     * @param {string} nodeName
+     *        The SVG node name.
      */
     init: function (renderer, nodeName) {
 
@@ -102,9 +351,8 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
          * The primary DOM node. Each `SVGElement` instance wraps a main DOM
          * node, but may also represent more nodes.
          *
-         * @name  element
-         * @memberof SVGElement
-         * @type {SVGDOMNode|HTMLDOMNode}
+         * @name Highcharts.SVGElement#element
+         * @type {Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement}
          */
         this.element = nodeName === 'span' ?
             createElement(nodeName) :
@@ -113,9 +361,8 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
         /**
          * The renderer that the SVGElement belongs to.
          *
-         * @name renderer
-         * @memberof SVGElement
-         * @type {SVGRenderer}
+         * @name Highcharts.SVGElement#renderer
+         * @type {Highcharts.SVGRenderer}
          */
         this.renderer = renderer;
     },
@@ -123,14 +370,22 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
     /**
      * Animate to given attributes or CSS properties.
      *
-     * @param {SVGAttributes} params SVG attributes or CSS to animate.
-     * @param {AnimationOptions} [options] Animation options.
-     * @param {Function} [complete] Function to perform at the end of animation.
-     *
      * @sample highcharts/members/element-on/
      *         Setting some attributes by animation
      *
-     * @returns {SVGElement} Returns the SVGElement for chaining.
+     * @function Highcharts.SVGElement#animate
+     *
+     * @param {Highcharts.SVGAttributes} params
+     *        SVG attributes or CSS to animate.
+     *
+     * @param {Highcharts.AnimationOptionsObject} [options]
+     *        Animation options.
+     *
+     * @param {Function} [complete]
+     *        Function to perform at the end of animation.
+     *
+     * @return {Highcharts.SVGElement}
+     *         Returns the SVGElement for chaining.
      */
     animate: function (params, options, complete) {
         var animOptions = H.animObject(
@@ -152,54 +407,22 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
         return this;
     },
 
-    /**
-     * @typedef {Object} GradientOptions
-     * @property {Object} linearGradient Holds an object that defines the start
-     *    position and the end position relative to the shape.
-     * @property {Number} linearGradient.x1 Start horizontal position of the
-     *    gradient. Ranges 0-1.
-     * @property {Number} linearGradient.x2 End horizontal position of the
-     *    gradient. Ranges 0-1.
-     * @property {Number} linearGradient.y1 Start vertical position of the
-     *    gradient. Ranges 0-1.
-     * @property {Number} linearGradient.y2 End vertical position of the
-     *    gradient. Ranges 0-1.
-     * @property {Object} radialGradient Holds an object that defines the center
-     *    position and the radius.
-     * @property {Number} radialGradient.cx Center horizontal position relative
-     *    to the shape. Ranges 0-1.
-     * @property {Number} radialGradient.cy Center vertical position relative
-     *    to the shape. Ranges 0-1.
-     * @property {Number} radialGradient.r Radius relative to the shape. Ranges
-     *    0-1.
-     * @property {Array<Array<Number|String>>} stops The first item in each
-     *    tuple is the position in the gradient, where 0 is the start of the
-     *    gradient and 1 is the end of the gradient. Multiple stops can be
-     *    applied. The second item is the color for each stop. This color can
-     *    also be given in the rgba format.
-     *
-     * @example
-     * // Linear gradient used as a color option
-     * color: {
-     *     linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
-     *         stops: [
-     *             [0, '#003399'], // start
-     *             [0.5, '#ffffff'], // middle
-     *             [1, '#3366AA'] // end
-     *         ]
-     *     }
-     * }
-     */
     /**
      * Build and apply an SVG gradient out of a common JavaScript configuration
      * object. This function is called from the attribute setters. An event
      * hook is added for supporting other complex color types.
      *
      * @private
-     * @param {GradientOptions} color The gradient options structure.
-     * @param {string} prop The property to apply, can either be `fill` or
-     * `stroke`.
-     * @param {SVGDOMElement} elem SVG DOM element to apply the gradient on.
+     * @function Highcharts.SVGElement#complexColor
+     *
+     * @param {Highcharts.GradientColorObject} color
+     *        The gradient options structure.
+     *
+     * @param {string} prop
+     *        The property to apply, can either be `fill` or `stroke`.
+     *
+     * @param {Highcharts.SVGDOMElement} elem
+     *        SVG DOM element to apply the gradient on.
      */
     complexColor: function (color, prop, elem) {
         var renderer = this.renderer,
@@ -327,12 +550,9 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
 
     /**
      * Apply a text outline through a custom CSS property, by copying the text
-     * element and apply stroke to the copy. Used internally. Contrast checks
-     * at http://jsfiddle.net/highcharts/43soe9m1/2/ .
+     * element and apply stroke to the copy. Used internally. Contrast checks at
+     * {@link https://jsfiddle.net/highcharts/43soe9m1/2/}.
      *
-     * @private
-     * @param {String} textOutline A custom CSS `text-outline` setting, defined
-     *    by `width color`.
      * @example
      * // Specific color
      * text.css({
@@ -343,6 +563,12 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      *    color: '#000000', // black text
      *    textOutline: '1px contrast' // => white outline
      * });
+     *
+     * @private
+     * @function Highcharts.SVGElement#applyTextOutline
+     *
+     * @param {string} textOutline
+     *        A custom CSS `text-outline` setting, defined by `width color`.
      */
     applyTextOutline: function (textOutline) {
         var elem = this.element,
@@ -429,23 +655,6 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
         }
     },
 
-    /**
-     *
-     * @typedef {Object} SVGAttributes An object of key-value pairs for SVG
-     *   attributes. Attributes in Highcharts elements for the most parts
-     *   correspond to SVG, but some are specific to Highcharts, like `zIndex`,
-     *   `rotation`, `rotationOriginX`, `rotationOriginY`, `translateX`,
-     *   `translateY`, `scaleX` and `scaleY`. SVG attributes containing a hyphen
-     *   are _not_ camel-cased, they should be quoted to preserve the hyphen.
-     *
-     * @example
-     * {
-     *     'stroke': '#ff0000', // basic
-     *     'stroke-width': 2, // hyphenated
-     *     'rotation': 45 // custom
-     *     'd': ['M', 10, 10, 'L', 30, 30, 'z'] // path definition, note format
-     * }
-     */
     /**
      * Apply native and custom attributes to the SVG elements.
      *
@@ -456,24 +665,6 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * Attributes frequently used in Highcharts are `fill`, `stroke`,
      * `stroke-width`.
      *
-     * @param {SVGAttributes|String} hash - The native and custom SVG
-     *    attributes.
-     * @param {string} [val] - If the type of the first argument is `string`,
-     *    the second can be a value, which will serve as a single attribute
-     *    setter. If the first argument is a string and the second is undefined,
-     *    the function serves as a getter and the current value of the property
-     *    is returned.
-     * @param {Function} [complete] - A callback function to execute after
-     *    setting the attributes. This makes the function compliant and
-     *    interchangeable with the {@link SVGElement#animate} function.
-     * @param {boolean} [continueAnimation=true] Used internally when `.attr` is
-     *    called as part of an animation step. Otherwise, calling `.attr` for an
-     *    attribute will stop animation for that attribute.
-     *
-     * @returns {SVGElement|string|number} If used as a setter, it returns the
-     *    current {@link SVGElement} so the calls can be chained. If used as a
-     *    getter, the current value of the attribute is returned.
-     *
      * @sample highcharts/members/renderer-rect/
      *         Setting some attributes
      *
@@ -492,6 +683,32 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * // Get an attribute
      * element.attr('stroke'); // => 'red'
      *
+     * @function Highcharts.SVGElement#attr
+     *
+     * @param {string|Highcharts.SVGAttributes} [hash]
+     *        The native and custom SVG attributes.
+     *
+     * @param {string} [val]
+     *        If the type of the first argument is `string`, the second can be a
+     *        value, which will serve as a single attribute setter. If the first
+     *        argument is a string and the second is undefined, the function
+     *        serves as a getter and the current value of the property is
+     *        returned.
+     *
+     * @param {Function} [complete]
+     *        A callback function to execute after setting the attributes. This
+     *        makes the function compliant and interchangeable with the
+     *        {@link SVGElement#animate} function.
+     *
+     * @param {boolean} [continueAnimation=true]
+     *        Used internally when `.attr` is called as part of an animation
+     *        step. Otherwise, calling `.attr` for an attribute will stop
+     *        animation for that attribute.
+     *
+     * @return {number|string|Highcharts.SVGElement}
+     *         If used as a setter, it returns the current
+     *         {@link Highcharts.SVGElement} so the calls can be chained. If
+     *         used as a getter, the current value of the attribute is returned.
      */
     attr: function (hash, val, complete, continueAnimation) {
         var key,
@@ -571,6 +788,7 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * scale are merged in one "transform" attribute in the SVG node.
      *
      * @private
+     * @function Highcharts.SVGElement#afterSetters
      */
     afterSetters: function () {
         // Update transform. Do this outside the loop to prevent redundant
@@ -586,11 +804,17 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
     /**
      * Add a class name to an element.
      *
-     * @param {string} className - The new class name to add.
-     * @param {boolean} [replace=false] - When true, the existing class name(s)
-     *    will be overwritten with the new one. When false, the new one is
-     *    added.
-     * @returns {SVGElement} Return the SVG element for chainability.
+     * @function Highcharts.SVGElement#addClass
+     *
+     * @param {string} className
+     *        The new class name to add.
+     *
+     * @param {boolean} [replace=false]
+     *        When true, the existing class name(s) will be overwritten with
+     *        the new one. When false, the new one is added.
+     *
+     * @return {Highcharts.SVGElement}
+     *         Return the SVG element for chainability.
      */
     addClass: function (className, replace) {
         var currentClassName = this.attr('class') || '';
@@ -608,9 +832,13 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
 
     /**
      * Check if an element has the given class name.
-     * @param  {string} className
-     *         The class name to check for.
-     * @return {Boolean}
+     *
+     * @function Highcharts.SVGElement#hasClass
+     *
+     * @param {string} className
+     *        The class name to check for.
+     *
+     * @return {boolean}
      *         Whether the class name is found.
      */
     hasClass: function (className) {
@@ -622,8 +850,13 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
 
     /**
      * Remove a class name from the element.
-     * @param  {String|RegExp} className The class name to remove.
-     * @return {SVGElement} Returns the SVG element for chainability.
+     *
+     * @function Highcharts.SVGElement#removeClass
+     *
+     * @param {string|RegExp} className
+     *        The class name to remove.
+     *
+     * @return {Highcharts.SVGElement} Returns the SVG element for chainability.
      */
     removeClass: function (className) {
         return this.attr(
@@ -636,8 +869,12 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * If one of the symbol size affecting parameters are changed,
      * check all the others only once for each call to an element's
      * .attr() method
-     * @param {Object} hash - The attributes to set.
+     *
      * @private
+     * @function Highcharts.SVGElement#symbolAttr
+     *
+     * @param {Highcharts.Dictionary<number|string>} hash
+     *        The attributes to set.
      */
     symbolAttr: function (hash) {
         var wrapper = this;
@@ -671,9 +908,13 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
     /**
      * Apply a clipping rectangle to this element.
      *
-     * @param {ClipRect} [clipRect] - The clipping rectangle. If skipped, the
-     *    current clip is removed.
-     * @returns {SVGElement} Returns the SVG element to allow chaining.
+     * @function Highcharts.SVGElement#clip
+     *
+     * @param {Highcharts.ClipRectElement} [clipRect]
+     *        The clipping rectangle. If skipped, the current clip is removed.
+     *
+     * @return {Highcharts.SVGElement}
+     *         Returns the SVG element to allow chaining.
      */
     clip: function (clipRect) {
         return this.attr(
@@ -688,17 +929,17 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * Calculate the coordinates needed for drawing a rectangle crisply and
      * return the calculated attributes.
      *
-     * @param {Object} rect - A rectangle.
-     * @param {number} rect.x - The x position.
-     * @param {number} rect.y - The y position.
-     * @param {number} rect.width - The width.
-     * @param {number} rect.height - The height.
-     * @param {number} [strokeWidth] - The stroke width to consider when
-     *    computing crisp positioning. It can also be set directly on the rect
-     *    parameter.
+     * @function Highcharts.SVGElement#crisp
+     *
+     * @param {Highcharts.RectangleObject} rect
+     *        Rectangle to crisp.
+     *
+     * @param {number} [strokeWidth]
+     *        The stroke width to consider when computing crisp positioning. It
+     *        can also be set directly on the rect parameter.
      *
-     * @returns {{x: Number, y: Number, width: Number, height: Number}} The
-     *    modified rectangle arguments.
+     * @return {Highcharts.RectangleObject}
+     *         The modified rectangle arguments.
      */
     crisp: function (rect, strokeWidth) {
 
@@ -729,11 +970,17 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * native SVG and HTML elements, there are also some custom made for
      * Highcharts, like `width`, `ellipsis` and `textOverflow` for SVG text
      * elements.
-     * @param {CSSObject} styles The new CSS styles.
-     * @returns {SVGElement} Return the SVG element for chaining.
      *
      * @sample highcharts/members/renderer-text-on-chart/
      *         Styled text
+     *
+     * @function Highcharts.SVGElement#css
+     *
+     * @param {Highcharts.CSSObject} styles
+     *        The new CSS styles.
+     *
+     * @return {Highcharts.SVGElement}
+     *         Return the SVG element for chaining.
      */
     css: function (styles) {
         var oldStyles = this.styles,
@@ -836,10 +1083,17 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
     
     /**
      * Get the computed style. Only in styled mode.
-     * @param {string} prop - The property name to check for.
-     * @returns {string} The current computed value.
+     *
      * @example
      * chart.series[0].points[0].graphic.getStyle('stroke-width'); // => '1px'
+     *
+     * @function Highcharts.SVGElement#getStyle
+     *
+     * @param {string} prop
+     *        The property name to check for.
+     *
+     * @return {string}
+     *         The current computed value.
      */
     getStyle: function (prop) {
         return win.getComputedStyle(this.element || this, '')
@@ -855,15 +1109,18 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * things pixel-perfectly within the plot box.
      *
      * The common pattern when placing a shape is:
-     * * Create the SVGElement and add it to the DOM. In styled mode, it will
+     * - Create the SVGElement and add it to the DOM. In styled mode, it will
      *   now receive a stroke width from the style sheet. In classic mode we
      *   will add the `stroke-width` attribute.
-     * * Read the computed `elem.strokeWidth()`.
-     * * Place it based on the stroke width.
+     * - Read the computed `elem.strokeWidth()`.
+     * - Place it based on the stroke width.
      *
-     * @returns {Number} The stroke width in pixels. Even if the given stroke
-     * widtch (in CSS or by attributes) is based on `em` or other units, the
-     * pixel size is returned.
+     * @function Highcharts.SVGElement#strokeWidth
+     *
+     * @return {number}
+     *         The stroke width in pixels. Even if the given stroke widtch (in
+     *         CSS or by attributes) is based on `em` or other units, the pixel
+     *         size is returned.
      */
     strokeWidth: function () {
         var val = this.getStyle('stroke-width'),
@@ -892,15 +1149,22 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * Add an event listener. This is a simple setter that replaces all other
      * events of the same type, opposed to the {@link Highcharts#addEvent}
      * function.
-     * @param {string} eventType - The event type. If the type is `click`,
-     *    Highcharts will internally translate it to a `touchstart` event on
-     *    touch devices, to prevent the browser from waiting for a click event
-     *    from firing.
-     * @param {Function} handler - The handler callback.
-     * @returns {SVGElement} The SVGElement for chaining.
      *
      * @sample highcharts/members/element-on/
      *         A clickable rectangle
+     *
+     * @function Highcharts.SVGElement#on
+     *
+     * @param {string} eventType
+     *        The event type. If the type is `click`, Highcharts will internally
+     *        translate it to a `touchstart` event on touch devices, to prevent
+     *        the browser from waiting for a click event from firing.
+     *
+     * @param {Function} handler
+     *        The handler callback.
+     *
+     * @return {Highcharts.SVGElement}
+     *         The SVGElement for chaining.
      */
     on: function (eventType, handler) {
         var svgElement = this,
@@ -931,9 +1195,14 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * a shape regardless of positioning inside the chart. Used on pie slices
      * to make all the slices have the same radial reference point.
      *
-     * @param {Array} coordinates The center reference. The format is
-     *    `[centerX, centerY, diameter]` in pixels.
-     * @returns {SVGElement} Returns the SVGElement for chaining.
+     * @function Highcharts.SVGElement#setRadialReference
+     *
+     * @param {Array<number>} coordinates
+     *        The center reference. The format is `[centerX, centerY, diameter]`
+     *        in pixels.
+     *
+     * @return {Highcharts.SVGElement}
+     *         Returns the SVGElement for chaining.
      */
     setRadialReference: function (coordinates) {
         var existingGradient = this.renderer.gradients[this.element.gradient];
@@ -957,8 +1226,13 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
     /**
      * Move an object and its children by x and y values.
      *
-     * @param {number} x - The x value.
-     * @param {number} y - The y value.
+     * @function Highcharts.SVGElement#translate
+     *
+     * @param {number} x
+     *        The x value.
+     *
+     * @param {number} y
+     *        The y value.
      */
     translate: function (x, y) {
         return this.attr({
@@ -972,10 +1246,13 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * charts, where the points and graphs are drawn as if not inverted, then
      * the series group elements are inverted.
      *
-     * @param  {boolean} inverted
-     *         Whether to invert or not. An inverted shape can be un-inverted by
-     *         setting it to false.
-     * @return {SVGElement}
+     * @function Highcharts.SVGElement#invert
+     *
+     * @param {boolean} inverted
+     *        Whether to invert or not. An inverted shape can be un-inverted by
+     *        setting it to false.
+     *
+     * @return {Highcharts.SVGElement}
      *         Return the SVGElement for chaining.
      */
     invert: function (inverted) {
@@ -989,8 +1266,9 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * Update the transform attribute based on internal properties. Deals with
      * the custom `translateX`, `translateY`, `rotation`, `scaleX` and `scaleY`
      * attributes and updates the SVG `transform` attribute.
-     * @private
      *
+     * @private
+     * @function Highcharts.SVGElement#updateTransform
      */
     updateTransform: function () {
         var wrapper = this,
@@ -1050,10 +1328,13 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
     /**
      * Bring the element to the front. Alternatively, a new zIndex can be set.
      *
-     * @returns {SVGElement} Returns the SVGElement for chaining.
-     *
      * @sample highcharts/members/element-tofront/
      *         Click an element to bring it to front
+     *
+     * @function Highcharts.SVGElement#toFront
+     *
+     * @return {Highcharts.SVGElement}
+     *         Returns the SVGElement for chaining.
      */
     toFront: function () {
         var element = this.element;
@@ -1065,24 +1346,23 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
     /**
      * Align the element relative to the chart or another box.
      *
-     * @param {Object} [alignOptions] The alignment options. The function can be
-     *   called without this parameter in order to re-align an element after the
-     *   box has been updated.
-     * @param {string} [alignOptions.align=left] Horizontal alignment. Can be
-     *   one of `left`, `center` and `right`.
-     * @param {string} [alignOptions.verticalAlign=top] Vertical alignment. Can
-     *   be one of `top`, `middle` and `bottom`.
-     * @param {number} [alignOptions.x=0] Horizontal pixel offset from
-     *   alignment.
-     * @param {number} [alignOptions.y=0] Vertical pixel offset from alignment.
-     * @param {Boolean} [alignByTranslate=false] Use the `transform` attribute
-     *   with translateX and translateY custom attributes to align this elements
-     *   rather than `x` and `y` attributes.
-     * @param {String|Object} box The box to align to, needs a width and height.
-     *   When the box is a string, it refers to an object in the Renderer. For
-     *   example, when box is `spacingBox`, it refers to `Renderer.spacingBox`
-     *   which holds `width`, `height`, `x` and `y` properties.
-     * @returns {SVGElement} Returns the SVGElement for chaining.
+     * @function Highcharts.SVGElement#align
+     *
+     * @param {Highcharts.AlignObject} [alignOptions]
+     *        The alignment options. The function can be called without this
+     *        parameter in order to re-align an element after the box has been
+     *        updated.
+     *
+     * @param {boolean} [alignByTranslate]
+     *        Align element by translation.
+     *
+     * @param {string|Highcharts.BBoxObject} [box]
+     *        The box to align to, needs a width and height. When the box is a
+     *        string, it refers to an object in the Renderer. For example, when
+     *        box is `spacingBox`, it refers to `Renderer.spacingBox` which
+     *        holds `width`, `height`, `x` and `y` properties.
+     *
+     * @return {Highcharts.SVGElement} Returns the SVGElement for chaining.
      */
     align: function (alignOptions, alignByTranslate, box) {
         var align,
@@ -1162,16 +1442,21 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * a single text line of rotation 90 will report a greater height, and a
      * width corresponding to the line-height.
      *
-     * @param {boolean} [reload] Skip the cache and get the updated DOM bouding
-     *   box.
-     * @param {number} [rot] Override the element's rotation. This is internally
-     *   used on axis labels with a value of 0 to find out what the bounding box
-     *   would be have been if it were not rotated.
-     * @returns {Object} The bounding box with `x`, `y`, `width` and `height`
-     * properties.
-     *
      * @sample highcharts/members/renderer-on-chart/
      *         Draw a rectangle based on a text's bounding box
+     *
+     * @function Highcharts.SVGElement#getBBox
+     *
+     * @param {boolean} [reload]
+     *        Skip the cache and get the updated DOM bouding box.
+     *
+     * @param {number} [rot]
+     *        Override the element's rotation. This is internally used on axis
+     *        labels with a value of 0 to find out what the bounding box would
+     *        be have been if it were not rotated.
+     *
+     * @return {Highcharts.BBoxObject}
+     *         The bounding box with `x`, `y`, `width` and `height` properties.
      */
     getBBox: function (reload, rot) {
         var wrapper = this,
@@ -1188,6 +1473,7 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
             toggleTextShadowShim,
             cache = renderer.cache,
             cacheKeys = renderer.cacheKeys,
+            isSVG = element.namespaceURI === wrapper.SVG_NS,
             cacheKey;
 
         rotation = pick(rot, wrapper.rotation);
@@ -1231,7 +1517,7 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
         if (!bBox) {
 
             // SVG elements
-            if (element.namespaceURI === wrapper.SVG_NS || renderer.forExport) {
+            if (isSVG || renderer.forExport) {
                 try { // Fails in Firefox if the container has display: none.
 
                     // When the text shadow shim is used, we need to hide the
@@ -1296,14 +1582,18 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
                 // stands uncorrected, it results in more padding added below
                 // the text than above when adding a label border or background.
                 // Also vertical positioning is affected.
-                // http://jsfiddle.net/highcharts/em37nvuj/
+                // https://jsfiddle.net/highcharts/em37nvuj/
                 // (#1101, #1505, #1669, #2568, #6213).
-                if (
-                    styles &&
-                    styles.fontSize === '11px' &&
-                    Math.round(height) === 17
-                ) {
-                    bBox.height = height = 14;
+                if (isSVG) {
+                    bBox.height = height = (
+                        {
+                            '11px,17': 14,
+                            '13px,20': 16
+                        }[
+                            styles && styles.fontSize + ',' + Math.round(height)
+                        ] ||
+                        height
+                    );
                 }
 
                 // Adjust for rotated text
@@ -1336,11 +1626,15 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
     /**
      * Show the element after it has been hidden.
      *
-     * @param {boolean} [inherit=false] Set the visibility attribute to
-     * `inherit` rather than `visible`. The difference is that an element with
-     * `visibility="visible"` will be visible even if the parent is hidden.
+     * @function Highcharts.SVGElement#show
      *
-     * @returns {SVGElement} Returns the SVGElement for chaining.
+     * @param {boolean} [inherit=false]
+     *        Set the visibility attribute to `inherit` rather than `visible`.
+     *        The difference is that an element with `visibility="visible"`
+     *        will be visible even if the parent is hidden.
+     *
+     * @return {Highcharts.SVGElement}
+     *         Returns the SVGElement for chaining.
      */
     show: function (inherit) {
         return this.attr({ visibility: inherit ? 'inherit' : 'visible' });
@@ -1350,7 +1644,10 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * Hide the element, equivalent to setting the `visibility` attribute to
      * `hidden`.
      *
-     * @returns {SVGElement} Returns the SVGElement for chaining.
+     * @function Highcharts.SVGElement#hide
+     *
+     * @return {Highcharts.SVGElement}
+     *         Returns the SVGElement for chaining.
      */
     hide: function () {
         return this.attr({ visibility: 'hidden' });
@@ -1360,7 +1657,10 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * Fade out an element by animating its opacity down to 0, and hide it on
      * complete. Used internally for the tooltip.
      *
-     * @param {number} [duration=150] The fade duration in milliseconds.
+     * @function Highcharts.SVGElement#fadeOut
+     *
+     * @param {number} [duration=150]
+     *        The fade duration in milliseconds.
      */
     fadeOut: function (duration) {
         var elemWrapper = this;
@@ -1378,13 +1678,17 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
     /**
      * Add the element to the DOM. All elements must be added this way.
      *
-     * @param {SVGElement|SVGDOMElement} [parent] The parent item to add it to.
-     *   If undefined, the element is added to the {@link
-     *   Highcharts.SVGRenderer.box}.
+     * @sample highcharts/members/renderer-g
+     *         Elements added to a group
+     *
+     * @function Highcharts.SVGElement#add
      *
-     * @returns {SVGElement} Returns the SVGElement for chaining.
+     * @param {Highcharts.SVGElement|Highcharts.SVGDOMElement} [parent]
+     *        The parent item to add it to. If undefined, the element is added
+     *        to the {@link Highcharts.SVGRenderer.box}.
      *
-     * @sample highcharts/members/renderer-g - Elements added to a group
+     * @return {Highcharts.SVGElement}
+     *         Returns the SVGElement for chaining.
      */
     add: function (parent) {
 
@@ -1430,7 +1734,10 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * Removes an element from the DOM.
      *
      * @private
-     * @param {SVGDOMElement|HTMLDOMElement} element The DOM node to remove.
+     * @function Highcharts.SVGElement#safeRemoveChild
+     *
+     * @param {Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement} element
+     *        The DOM node to remove.
      */
     safeRemoveChild: function (element) {
         var parentNode = element.parentNode;
@@ -1443,7 +1750,7 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
      * Destroy the element and element wrapper and clear up the DOM and event
      * hooks.
      *
-     *
+     * @function Highcharts.SVGElement#destroy
      */
     destroy: function () {
         var wrapper = this,
@@ -1525,6 +1832,14 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
 
     
 
+    /**
+     * @private
+     * @function Highcharts.SVGElement#xGetter
+     *
+     * @param {string} key
+     *
+     * @return {number|string|null}
+     */
     xGetter: function (key) {
         if (this.element.nodeName === 'circle') {
             if (key === 'x') {
@@ -1537,12 +1852,18 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
     },
 
     /**
-     * Get the current value of an attribute or pseudo attribute, used mainly
-     * for animation. Called internally from the {@link
-     * Highcharts.SVGRenderer#attr}
-     * function.
+     * Get the current value of an attribute or pseudo attribute,
+     * used mainly for animation. Called internally from
+     * the {@link Highcharts.SVGRenderer#attr} function.
      *
      * @private
+     * @function Highcharts.SVGElement#_defaultGetter
+     *
+     * @param {string} key
+     *        Property key.
+     *
+     * @return {number|string|null}
+     *         Property value.
      */
     _defaultGetter: function (key) {
         var ret = pick(
@@ -1558,7 +1879,16 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
         return ret;
     },
 
-
+    /**
+     * @private
+     * @function Highcharts.SVGElement#dSettter
+     *
+     * @param {number|string|Highcharts.SVGPathArray} value
+     *
+     * @param {string} key
+     *
+     * @param {Highcharts.SVGDOMElement} element
+     */
     dSetter: function (value, key, element) {
         if (value && value.join) { // join path
             value = value.join(' ');
@@ -1576,16 +1906,40 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
         }
 
     },
+
     
+
+    /**
+     * @private
+     * @function Highcharts.SVGElement#alignSetter
+     *
+     * @param {"start"|"middle"|"end"} value
+     */
     alignSetter: function (value) {
         var convert = { left: 'start', center: 'middle', right: 'end' };
         this.alignValue = value;
         this.element.setAttribute('text-anchor', convert[value]);
     },
+    /**
+     * @private
+     * @function Highcharts.SVGElement#opacitySetter
+     *
+     * @param {string} value
+     *
+     * @param {string} key
+     *
+     * @param {Highcharts.SVGDOMElement} element
+     */
     opacitySetter: function (value, key, element) {
         this[key] = value;
         element.setAttribute(key, value);
     },
+    /**
+     * @private
+     * @function Highcharts.SVGElement#titleSetter
+     *
+     * @param {string} value
+     */
     titleSetter: function (value) {
         var titleNode = this.element.getElementsByTagName('title')[0];
         if (!titleNode) {
@@ -1608,6 +1962,12 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
             )
         );
     },
+    /**
+     * @private
+     * @function Highcharts.SVGElement#textSetter
+     *
+     * @param {string} value
+     */
     textSetter: function (value) {
         if (value !== this.textStr) {
             // Delete bBox memo when the text changes
@@ -1619,6 +1979,16 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
             }
         }
     },
+    /**
+     * @private
+     * @function Highcharts.SVGElement#fillSetter
+     *
+     * @param {Highcharts.Color|Highcharts.ColorString} value
+     *
+     * @param {string} key
+     *
+     * @param {Highcharts.SVGDOMElement} element
+     */
     fillSetter: function (value, key, element) {
         if (typeof value === 'string') {
             element.setAttribute(key, value);
@@ -1626,6 +1996,16 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
             this.complexColor(value, key, element);
         }
     },
+    /**
+     * @private
+     * @function Highcharts.SVGElement#visibilitySetter
+     *
+     * @param {string} value
+     *
+     * @param {string} key
+     *
+     * @param {Highcharts.SVGDOMElement} element
+     */
     visibilitySetter: function (value, key, element) {
         // IE9-11 doesn't handle visibilty:inherit well, so we remove the
         // attribute instead (#2881, #3909)
@@ -1636,6 +2016,16 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
         }
         this[key] = value;
     },
+    /**
+     * @private
+     * @function Highcharts.SVGElement#zIndexSetter
+     *
+     * @param {string} value
+     *
+     * @param {string} key
+     *
+     * @return {boolean}
+     */
     zIndexSetter: function (value, key) {
         var renderer = this.renderer,
             parentGroup = this.parentGroup,
@@ -1720,6 +2110,16 @@ extend(SVGElement.prototype, /** @lends Highcharts.SVGElement.prototype */ {
         }
         return inserted;
     },
+    /**
+     * @private
+     * @function Highcharts.SVGElement#_defaultSetter
+     *
+     * @param {string} value
+     *
+     * @param {string} key
+     *
+     * @param {Highcharts.SVGDOMElement} element
+     */
     _defaultSetter: function (value, key, element) {
         element.setAttribute(key, value);
     }
@@ -1753,24 +2153,33 @@ SVGElement.prototype.matrixSetter = function (value, key) {
  * An existing chart's renderer can be accessed through {@link Chart.renderer}.
  * The renderer can also be used completely decoupled from a chart.
  *
- * @param {HTMLDOMElement} container - Where to put the SVG in the web page.
- * @param {number} width - The width of the SVG.
- * @param {number} height - The height of the SVG.
- * @param {boolean} [forExport=false] - Whether the rendered content is intended
- *   for export.
- * @param {boolean} [allowHTML=true] - Whether the renderer is allowed to
- *   include HTML text, which will be projected on top of the SVG.
+ * @sample highcharts/members/renderer-on-chart
+ *         Annotating a chart programmatically.
+ * @sample highcharts/members/renderer-basic
+ *         Independent SVG drawing.
  *
  * @example
  * // Use directly without a chart object.
  * var renderer = new Highcharts.Renderer(parentNode, 600, 400);
  *
- * @sample highcharts/members/renderer-on-chart
- *         Annotating a chart programmatically.
- * @sample highcharts/members/renderer-basic
- *         Independent SVG drawing.
+ * @class
+ * @name Highcharts.SVGRenderer
+ *
+ * @param {Highcharts.HTMLDOMElement} container
+ *        Where to put the SVG in the web page.
  *
- * @class Highcharts.SVGRenderer
+ * @param {number} width
+ *        The width of the SVG.
+ *
+ * @param {number} height
+ *        The height of the SVG.
+ *
+ * @param {boolean} [forExport=false]
+ *        Whether the rendered content is intended for export.
+ *
+ * @param {boolean} [allowHTML=true]
+ *        Whether the renderer is allowed to include HTML text, which will be
+ *        projected on top of the SVG.
  */
 SVGRenderer = H.SVGRenderer = function () {
     this.init.apply(this, arguments);
@@ -1779,13 +2188,35 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
     /**
      * A pointer to the renderer's associated Element class. The VMLRenderer
      * will have a pointer to VMLElement here.
-     * @type {SVGElement}
+     *
+     * @name Highcharts.SVGRenderer#Element
+     * @type {Highcharts.SVGElement}
      */
     Element: SVGElement,
+
     SVG_NS: SVG_NS,
+
     /**
      * Initialize the SVGRenderer. Overridable initiator function that takes
      * the same parameters as the constructor.
+     *
+     * @function Highcharts.SVGRenderer#init
+     *
+     * @param {Highcharts.HTMLDOMElement} container
+     *        Where to put the SVG in the web page.
+     *
+     * @param {number} width
+     *        The width of the SVG.
+     *
+     * @param {number} height
+     *        The height of the SVG.
+     *
+     * @param {boolean} [forExport=false]
+     *        Whether the rendered content is intended for export.
+     *
+     * @param {boolean} [allowHTML=true]
+     *        Whether the renderer is allowed to include HTML text, which will
+     *        be projected on top of the SVG.
      */
     init: function (container, width, height, style, forExport, allowHTML) {
         var renderer = this,
@@ -1816,23 +2247,25 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
 
         /**
          * The root `svg` node of the renderer.
-         * @name box
-         * @memberof SVGRenderer
-         * @type {SVGDOMElement}
+         *
+         * @name Highcharts.SVGRenderer#box
+         * @type {Highcharts.SVGDOMElement}
          */
         this.box = element;
         /**
          * The wrapper for the root `svg` node of the renderer.
          *
-         * @name boxWrapper
-         * @memberof SVGRenderer
-         * @type {SVGElement}
+         * @name Highcharts.SVGRenderer#boxWrapper
+         * @type {Highcharts.SVGElement}
          */
         this.boxWrapper = boxWrapper;
         renderer.alignedObjects = [];
 
         /**
          * Page url used for internal references.
+         *
+         * @private
+         * @name Highcharts.SVGRenderer#url
          * @type {string}
          */
         // #24, #672, #1070
@@ -1841,7 +2274,7 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
                 doc.getElementsByTagName('base').length
             ) ?
                 win.location.href
-                    .replace(/#.*?$/, '') // remove the hash
+                    .split('#')[0] // remove the hash
                     .replace(/<[^>]*>/g, '') // wing cut HTML
                     // escape parantheses and quotes
                     .replace(/([\('\)])/g, '\\$1')
@@ -1857,9 +2290,9 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
 
         /**
          * A pointer to the `defs` node of the root SVG.
-         * @type {SVGElement}
-         * @name defs
-         * @memberof SVGRenderer
+         *
+         * @name Highcharts.SVGRenderer#defs
+         * @type {Highcharts.SVGElement}
          */
         renderer.defs = this.createElement('defs').add();
         renderer.allowHTML = allowHTML;
@@ -1898,20 +2331,24 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
             renderer.unSubPixelFix = addEvent(win, 'resize', subPixelFix);
         }
     },
+
     
+
     /**
      * General method for adding a definition to the SVG `defs` tag. Can be used
-     *   for gradients, fills, filters etc. Styled mode only. A hook for adding
-     *   general definitions to the SVG's defs tag. Definitions can be
-     *   referenced from the CSS by its `id`. Read more in
-     *   [gradients, shadows and patterns]{@link http://www.highcharts.com/docs/
-     *   chart-design-and-style/gradients-shadows-and-patterns}.
-     *   Styled mode only.
+     * for gradients, fills, filters etc. Styled mode only. A hook for adding
+     * general definitions to the SVG's defs tag. Definitions can be referenced
+     * from the CSS by its `id`. Read more in
+     * {@link https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns|gradients, shadows and patterns}.
+     * Styled mode only.
      *
-     * @param {Object} def - A serialized form of an SVG definition, including
-     *   children
+     * @function Highcharts.SVGRenderer#definition
      *
-     * @return {SVGElement} The inserted node.
+     * @param {Highcharts.SVGDefinitionObject} def
+     *        A serialized form of an SVG definition, including children.
+     *
+     * @return {Highcharts.SVGElement}
+     *         The inserted node.
      */
     definition: function (def) {
         var ren = this;
@@ -1955,6 +2392,7 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
         }
         return recurse(def);
     },
+
     
 
     
@@ -1965,7 +2403,10 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
      * needto render preliminarily in another div to get the text bounding boxes
      * right.
      *
-     * @returns {boolean} True if it is hidden.
+     * @function Highcharts.SVGRenderer#isHidden
+     *
+     * @return {boolean}
+     *         True if it is hidden.
      */
     isHidden: function () { // #608
         return !this.boxWrapper.getBBox().width;
@@ -1973,6 +2414,8 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
 
     /**
      * Destroys the renderer and its allocated members.
+     *
+     * @function Highcharts.SVGRenderer#destroy
      */
     destroy: function () {
         var renderer = this,
@@ -2006,8 +2449,13 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
      * primitive factories like {@link SVGRenderer#path}, {@link
      * SVGRenderer#rect} or {@link SVGRenderer#text}.
      *
-     * @param {string} nodeName - The node name, for example `rect`, `g` etc.
-     * @returns {SVGElement} The generated SVGElement.
+     * @function Highcharts.SVGRenderer#createElement
+     *
+     * @param {string} nodeName
+     *        The node name, for example `rect`, `g` etc.
+     *
+     * @return {Highcharts.SVGElement}
+     *         The generated SVGElement.
      */
     createElement: function (nodeName) {
         var wrapper = new this.Element();
@@ -2018,7 +2466,9 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
     /**
      * Dummy function for plugins, called every time the renderer is updated.
      * Prior to Highcharts 5, this was used for the canvg renderer.
-     * @function
+     *
+     * @deprecated
+     * @function Highcharts.SVGRenderer#draw
      */
     draw: noop,
 
@@ -2028,6 +2478,13 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
      * function.
      *
      * @private
+     * @function Highcharts.SVGRenderer#getRadialAttr
+     *
+     * @param {Array<number>} radialReference
+     *
+     * @param {Highcharts.SVGAttributes} gradAttr
+     *
+     * @return {Highcharts.SVGAttributes}
      */
     getRadialAttr: function (radialReference, gradAttr) {
         return {
@@ -2040,38 +2497,107 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
     },
 
     /**
-     * Extendable function to measure the tspan width.
+     * Truncate the text node contents to a given length. Used when the css
+     * width is set. If the `textOverflow` is `ellipsis`, the text is truncated
+     * character by character to the given length. If not, the text is
+     * word-wrapped line by line.
      *
      * @private
+     * @function Highcharts.SVGRenderer#truncate
+     *
+     * @param {Highcharts.SVGElement} wrapper
+     *
+     * @param {Highcharts.SVGDOMElement} tspan
+     *
+     * @param {string} text
+     *
+     * @param {Array.<string>} words
+     *
+     * @param {number} width
+     *
+     * @param {Function} getString
+     *
+     * @return {boolean}
+     *         True if tspan is too long.
      */
-    getSpanWidth: function (wrapper) {
-        return wrapper.getBBox(true).width;
-    },
-
-    applyEllipsis: function (wrapper, tspan, text, width) {
+    truncate: function (
+        wrapper,
+        tspan,
+        text,
+        words,
+        startAt,
+        width,
+        getString
+    ) {
         var renderer = this,
             rotation = wrapper.rotation,
-            str = text,
-            currentIndex,
-            minIndex = 0,
-            maxIndex = text.length,
+            str,
+            // Word wrap can not be truncated to shorter than one word, ellipsis
+            // text can be completely blank.
+            minIndex = words ? 1 : 0,
+            maxIndex = (text || words).length,
+            currentIndex = maxIndex,
+            // Cache the lengths to avoid checking the same twice
+            lengths = [],
             updateTSpan = function (s) {
-                tspan.removeChild(tspan.firstChild);
+                if (tspan.firstChild) {
+                    tspan.removeChild(tspan.firstChild);
+                }
                 if (s) {
                     tspan.appendChild(doc.createTextNode(s));
                 }
             },
+            getSubStringLength = function (charEnd, concatenatedEnd) {
+                // charEnd is useed when finding the character-by-character
+                // break for ellipsis, concatenatedEnd is used for word-by-word
+                // break for word wrapping.
+                var end = concatenatedEnd || charEnd;
+                if (lengths[end] === undefined) {
+                    // Modern browsers
+                    if (tspan.getSubStringLength) {
+                        // Fails with DOM exception on unit-tests/legend/members
+                        // of unknown reason. Desired width is 0, text content
+                        // is "5" and end is 1.
+                        try {
+                            lengths[end] = startAt + tspan.getSubStringLength(
+                                0,
+                                words ? end + 1 : end
+                            );
+
+                        } catch (e) {}
+
+                    // Legacy
+                    } else if (renderer.getSpanWidth) { // #9058 jsdom
+                        updateTSpan(getString(text || words, charEnd));
+                        lengths[end] = startAt +
+                            renderer.getSpanWidth(wrapper, tspan);
+                    }
+                }
+                return lengths[end];
+            },
             actualWidth,
-            wasTooLong;
+            truncated;
+
         wrapper.rotation = 0; // discard rotation when computing box
-        actualWidth = renderer.getSpanWidth(wrapper, tspan);
-        wasTooLong = actualWidth > width;
-        if (wasTooLong) {
+        actualWidth = getSubStringLength(tspan.textContent.length);
+        truncated = startAt + actualWidth > width;
+        if (truncated) {
+
+            // Do a binary search for the index where to truncate the text
             while (minIndex <= maxIndex) {
                 currentIndex = Math.ceil((minIndex + maxIndex) / 2);
-                str = text.substring(0, currentIndex) + '\u2026';
-                updateTSpan(str);
-                actualWidth = renderer.getSpanWidth(wrapper, tspan);
+
+                // When checking words for word-wrap, we need to build the
+                // string and measure the subStringLength at the concatenated
+                // word length.
+                if (words) {
+                    str = getString(words, currentIndex);
+                }
+                actualWidth = getSubStringLength(
+                    currentIndex,
+                    str && str.length - 1
+                );
+
                 if (minIndex === maxIndex) {
                     // Complete
                     minIndex = maxIndex + 1;
@@ -2083,14 +2609,29 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
                     minIndex = currentIndex;
                 }
             }
-            // If max index was 0 it means just ellipsis was also to large.
+            // If max index was 0 it means the shortest possible text was also
+            // too large. For ellipsis that means only the ellipsis, while for
+            // word wrap it means the whole first word.
             if (maxIndex === 0) {
-                // Remove ellipses.
+                // Remove ellipsis
                 updateTSpan('');
+
+            // If the new text length is one less than the original, we don't
+            // need the ellipsis
+            } else if (!(text && maxIndex === text.length - 1)) {
+                updateTSpan(str || getString(text || words, currentIndex));
             }
         }
+
+        // When doing line wrapping, prepare for the next line by removing the
+        // items from this line.
+        if (words) {
+            words.splice(0, currentIndex);
+        }
+
+        wrapper.actualWidth = actualWidth;
         wrapper.rotation = rotation; // Apply rotation again.
-        return wasTooLong;
+        return truncated;
     },
 
     /**
@@ -2103,7 +2644,8 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
      * // Add support for unescaping quotes
      * Highcharts.SVGRenderer.prototype.escapes['"'] = '&quot;';
      *
-     * @type {Object}
+     * @name Highcharts.SVGRenderer#escapes
+     * @type {Highcharts.Dictionary<string>}
      */
     escapes: {
         '&': '&amp;',
@@ -2115,11 +2657,15 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
 
     /**
      * Parse a simple HTML string into SVG tspans. Called internally when text
-     *   is set on an SVGElement. The function supports a subset of HTML tags,
-     *   CSS text features like `width`, `text-overflow`, `white-space`, and
-     *   also attributes like `href` and `style`.
+     * is set on an SVGElement. The function supports a subset of HTML tags, CSS
+     * text features like `width`, `text-overflow`, `white-space`, and also
+     * attributes like `href` and `style`.
+     *
      * @private
-     * @param {SVGElement} wrapper The parent SVGElement.
+     * @function Highcharts.SVGRenderer#buildText
+     *
+     * @param {Highcharts.SVGElement} wrapper
+     *        The parent SVGElement.
      */
     buildText: function (wrapper) {
         var textNode = wrapper.element,
@@ -2129,7 +2675,7 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
             hasMarkup = textStr.indexOf('<') !== -1,
             lines,
             childNodes = textNode.childNodes,
-            wasTooLong,
+            truncated,
             parentX = attr(textNode, 'x'),
             textStyles = wrapper.styles,
             width = wrapper.textWidth,
@@ -2253,7 +2799,8 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
             // build the lines
             each(lines, function buildTextLines(line, lineNo) {
                 var spans,
-                    spanNo = 0;
+                    spanNo = 0,
+                    lineLength = 0;
                 line = line
                     // Trim to prevent useless/costly process on the spaces
                     // (#5258)
@@ -2345,88 +2892,55 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
                                 );
                             }
 
-                            /*
-                            // Experimental text wrapping based on
-                            // getSubstringLength
-                            if (width) {
-                                var spans = renderer.breakText(wrapper, width);
-
-                                each(spans, function (span) {
-
-                                    var dy = getLineHeight(tspan);
-                                    tspan = doc.createElementNS(
-                                        SVG_NS,
-                                        'tspan'
-                                    );
-                                    tspan.appendChild(
-                                        doc.createTextNode(span)
-                                    );
-                                    attr(tspan, {
-                                        dy: dy,
-                                        x: parentX
-                                    });
-                                    if (spanStyle) { // #390
-                                        attr(tspan, 'style', spanStyle);
-                                    }
-                                    textNode.appendChild(tspan);
-                                });
-
-                            }
-                            // */
-
                             // Check width and apply soft breaks or ellipsis
                             if (width) {
                                 var words = span.replace(
                                         /([^\^])-/g,
                                         '$1- '
                                     ).split(' '), // #1273
-                                    hasWhiteSpace = (
+                                    hasWhiteSpace = !noWrap && (
                                         spans.length > 1 ||
                                         lineNo ||
-                                        (words.length > 1 && !noWrap)
+                                        words.length > 1
                                     ),
-                                    tooLong,
-                                    rest = [],
-                                    actualWidth,
-                                    dy = getLineHeight(tspan),
-                                    rotation = wrapper.rotation;
+                                    wrapLineNo = 0,
+                                    dy = getLineHeight(tspan);
 
                                 if (ellipsis) {
-                                    wasTooLong = renderer.applyEllipsis(
+                                    truncated = renderer.truncate(
                                         wrapper,
                                         tspan,
                                         span,
-                                        width
-                                    );
-                                }
-
-                                while (
-                                    !ellipsis &&
-                                    hasWhiteSpace &&
-                                    (words.length || rest.length)
-                                ) {
-                                    // discard rotation when computing box
-                                    wrapper.rotation = 0;
-                                    actualWidth = renderer.getSpanWidth(
-                                        wrapper,
-                                        tspan
+                                        undefined,
+                                        0,
+                                        // Target width
+                                        Math.max(
+                                            0,
+                                            // Substract the font face to make
+                                            // room for the ellipsis itself
+                                            width - parseInt(fontSize || 12, 10)
+                                        ),
+                                        // Build the text to test for
+                                        function (text, currentIndex) {
+                                            return text.substring(
+                                                0,
+                                                currentIndex
+                                            ) + '\u2026';
+                                        }
                                     );
-                                    tooLong = actualWidth > width;
+                                } else if (hasWhiteSpace) {
 
-                                    // For ellipsis, do a binary search for the
-                                    // correct string length
-                                    if (wasTooLong === undefined) {
-                                        wasTooLong = tooLong; // First time
-                                    }
+                                    while (words.length) {
 
-                                    // Looping down, this is the first word
-                                    // sequence that is not too long, so we can
-                                    // move on to build the next line.
-                                    if (!tooLong || words.length === 1) {
-                                        words = rest;
-                                        rest = [];
+                                        // For subsequent lines, create tspans
+                                        // with the same style attributes as the
+                                        // parent text node.
+                                        if (
+                                            words.length &&
+                                            !noWrap &&
+                                            wrapLineNo > 0
+                                        ) {
 
-                                        if (words.length && !noWrap) {
                                             tspan = doc.createElementNS(
                                                 SVG_NS,
                                                 'tspan'
@@ -2442,34 +2956,48 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
                                                     styleAttribute
                                                 );
                                             }
+                                            // Start by appending the full
+                                            // remaining text
+                                            tspan.appendChild(
+                                                doc.createTextNode(
+                                                    words.join(' ')
+                                                        .replace(/- /g, '-')
+                                                )
+                                            );
                                             textNode.appendChild(tspan);
                                         }
 
-                                        // a single word is pressing it out
-                                        if (actualWidth > width) {
-                                            // one more pixel for Chrome, #3158
-                                            width = actualWidth + 1;
-                                        }
-                                    } else { // append to existing line tspan
-                                        tspan.removeChild(tspan.firstChild);
-                                        rest.unshift(words.pop());
-                                    }
-                                    if (words.length) {
-                                        tspan.appendChild(
-                                            doc.createTextNode(
-                                                words.join(' ')
-                                                    .replace(/- /g, '-')
-                                            )
+                                        // For each line, truncate the remaining
+                                        // words into the line length.
+                                        renderer.truncate(
+                                            wrapper,
+                                            tspan,
+                                            null,
+                                            words,
+                                            wrapLineNo === 0 ? lineLength : 0,
+                                            width,
+                                            // Build the text to test for
+                                            function (text, currentIndex) {
+                                                return words
+                                                    .slice(0, currentIndex)
+                                                    .join(' ')
+                                                    .replace(/- /g, '-');
+                                            }
                                         );
+
+                                        lineLength = wrapper.actualWidth;
+                                        wrapLineNo++;
                                     }
                                 }
-                                wrapper.rotation = rotation;
                             }
 
                             spanNo++;
                         }
+
                     }
+
                 });
+
                 // To avoid beginning lines that doesn't add to the textNode
                 // (#6144)
                 isSubsequentLine = (
@@ -2478,7 +3006,7 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
                 );
             });
 
-            if (ellipsis && wasTooLong) {
+            if (ellipsis && truncated) {
                 wrapper.attr(
                     'title',
                     unescapeEntities(wrapper.textStr, ['&lt;', '&gt;']) // #7179
@@ -2495,99 +3023,63 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
         }
     },
 
-
-
-    /*
-    breakText: function (wrapper, width) {
-        var bBox = wrapper.getBBox(),
-            node = wrapper.element,
-            charnum = node.textContent.length,
-            stringWidth,
-            // try this position first, based on average character width
-            guessedLineCharLength = Math.round(width * charnum / bBox.width),
-            pos = guessedLineCharLength,
-            spans = [],
-            increment = 0,
-            startPos = 0,
-            endPos,
-            safe = 0;
-
-        if (bBox.width > width) {
-            while (startPos < charnum && safe < 100) {
-
-                while (endPos === undefined && safe < 100) {
-                    stringWidth = node.getSubStringLength(
-                        startPos,
-                        pos - startPos
-                    );
-
-                    if (stringWidth <= width) {
-                        if (increment === -1) {
-                            endPos = pos;
-                        } else {
-                            increment = 1;
-                        }
-                    } else {
-                        if (increment === 1) {
-                            endPos = pos - 1;
-                        } else {
-                            increment = -1;
-                        }
-                    }
-                    pos += increment;
-                    safe++;
-                }
-
-                spans.push(
-                    node.textContent.substr(startPos, endPos - startPos)
-                );
-
-                startPos = endPos;
-                pos = startPos + guessedLineCharLength;
-                endPos = undefined;
-            }
-        }
-
-        return spans;
-    },
-    // */
-
     /**
      * Returns white for dark colors and black for bright colors.
      *
-     * @param {ColorString} rgba - The color to get the contrast for.
-     * @returns {string} The contrast color, either `#000000` or `#FFFFFF`.
+     * @function Highcharts.SVGRenderer#getContrast
+     *
+     * @param {Highcharts.ColorString} rgba
+     *        The color to get the contrast for.
+     *
+     * @return {string}
+     *         The contrast color, either `#000000` or `#FFFFFF`.
      */
     getContrast: function (rgba) {
         rgba = color(rgba).rgba;
 
         // The threshold may be discussed. Here's a proposal for adding
         // different weight to the color channels (#6216)
-        /*
         rgba[0] *= 1; // red
         rgba[1] *= 1.2; // green
-        rgba[2] *= 0.7; // blue
-        */
+        rgba[2] *= 0.5; // blue
 
-        return rgba[0] + rgba[1] + rgba[2] > 2 * 255 ? '#000000' : '#FFFFFF';
+        return rgba[0] + rgba[1] + rgba[2] > 1.8 * 255 ? '#000000' : '#FFFFFF';
     },
 
     /**
      * Create a button with preset states.
-     * @param {string} text - The text or HTML to draw.
-     * @param {number} x - The x position of the button's left side.
-     * @param {number} y - The y position of the button's top side.
-     * @param {Function} callback - The function to execute on button click or
-     *    touch.
-     * @param {SVGAttributes} [normalState] - SVG attributes for the normal
-     *    state.
-     * @param {SVGAttributes} [hoverState] - SVG attributes for the hover state.
-     * @param {SVGAttributes} [pressedState] - SVG attributes for the pressed
-     *    state.
-     * @param {SVGAttributes} [disabledState] - SVG attributes for the disabled
-     *    state.
-     * @param {Symbol} [shape=rect] - The shape type.
-     * @returns {SVGRenderer} The button element.
+     *
+     * @function Highcharts.SVGRenderer#button
+     *
+     * @param {string} text
+     *        The text or HTML to draw.
+     *
+     * @param {number} x
+     *        The x position of the button's left side.
+     *
+     * @param {number} y
+     *        The y position of the button's top side.
+     *
+     * @param {Function} callback
+     *        The function to execute on button click or touch.
+     *
+     * @param {Highcharts.SVGAttributes} [normalState]
+     *        SVG attributes for the normal state.
+     *
+     * @param {Highcharts.SVGAttributes} [hoverState]
+     *        SVG attributes for the hover state.
+     *
+     * @param {Highcharts.SVGAttributes} [pressedState]
+     *        SVG attributes for the pressed state.
+     *
+     * @param {Highcharts.SVGAttributes} [disabledState]
+     *        SVG attributes for the disabled state.
+     *
+     * @param {Highcharts.SymbolKey} [shape=rect]
+     *        The shape type.
+     *
+     * @return {Highcharts.SVGElement}
+     *         The button element.
      */
     button: function (
         text,
@@ -2665,11 +3157,16 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
     /**
      * Make a straight line crisper by not spilling out to neighbour pixels.
      *
-     * @param {Array} points - The original points on the format
-     *                       `['M', 0, 0, 'L', 100, 0]`.
-     * @param {number} width - The width of the line.
-     * @returns {Array} The original points array, but modified to render
-     * crisply.
+     * @function Highcharts.SVGRenderer#crispLine
+     *
+     * @param {Highcharts.SVGPathArray} points
+     *        The original points on the format `['M', 0, 0, 'L', 100, 0]`.
+     *
+     * @param {number} width
+     *        The width of the line.
+     *
+     * @return {Highcharts.SVGPathArray}
+     *         The original points array, but modified to render crisply.
      */
     crispLine: function (points, width) {
         // normalize to a crisp line
@@ -2688,24 +3185,34 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
     /**
      * Draw a path, wraps the SVG `path` element.
      *
-     * @param {Array} [path] An SVG path definition in array form.
+     * @sample highcharts/members/renderer-path-on-chart/
+     *         Draw a path in a chart
+     * @sample highcharts/members/renderer-path/
+     *         Draw a path independent from a chart
      *
      * @example
      * var path = renderer.path(['M', 10, 10, 'L', 30, 30, 'z'])
      *     .attr({ stroke: '#ff00ff' })
      *     .add();
-     * @returns {SVGElement} The generated wrapper element.
      *
-     * @sample highcharts/members/renderer-path-on-chart/
-     *         Draw a path in a chart
-     * @sample highcharts/members/renderer-path/
-     *         Draw a path independent from a chart
+     * @function Highcharts.SVGRenderer#path
+     *
+     * @param {Highcharts.SVGPathArray} [path]
+     *        An SVG path definition in array form.
+     *
+     * @return {Highcharts.SVGElement}
+     *         The generated wrapper element.
      *
      *//**
      * Draw a path, wraps the SVG `path` element.
      *
-     * @param {SVGAttributes} [attribs] The initial attributes.
-     * @returns {SVGElement} The generated wrapper element.
+     * @function Highcharts.SVGRenderer#path
+     *
+     * @param {Highcharts.SVGAttributes} [attribs]
+     *        The initial attributes.
+     *
+     * @return {Highcharts.SVGElement}
+     *         The generated wrapper element.
      */
     path: function (path) {
         var attribs = {
@@ -2722,17 +3229,32 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
     /**
      * Draw a circle, wraps the SVG `circle` element.
      *
-     * @param {number} [x] The center x position.
-     * @param {number} [y] The center y position.
-     * @param {number} [r] The radius.
-     * @returns {SVGElement} The generated wrapper element.
+     * @sample highcharts/members/renderer-circle/
+     *         Drawing a circle
      *
-     * @sample highcharts/members/renderer-circle/ Drawing a circle
+     * @function Highcharts.SVGRenderer#circle
+     *
+     * @param {number} [x]
+     *        The center x position.
+     *
+     * @param {number} [y]
+     *        The center y position.
+     *
+     * @param {number} [r]
+     *        The radius.
+     *
+     * @return {Highcharts.SVGElement}
+     *         The generated wrapper element.
      *//**
      * Draw a circle, wraps the SVG `circle` element.
      *
-     * @param {SVGAttributes} [attribs] The initial attributes.
-     * @returns {SVGElement} The generated wrapper element.
+     * @function Highcharts.SVGRenderer#circle
+     *
+     * @param {Highcharts.SVGAttributes} [attribs]
+     *        The initial attributes.
+     *
+     * @return {Highcharts.SVGElement}
+     *         The generated wrapper element.
      */
     circle: function (x, y, r) {
         var attribs = isObject(x) ? x : { x: x, y: y, r: r },
@@ -2748,22 +3270,44 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
 
     /**
      * Draw and return an arc.
-     * @param {number} [x=0] Center X position.
-     * @param {number} [y=0] Center Y position.
-     * @param {number} [r=0] The outer radius of the arc.
-     * @param {number} [innerR=0] Inner radius like used in donut charts.
-     * @param {number} [start=0] The starting angle of the arc in radians, where
-     *    0 is to the right and `-Math.PI/2` is up.
-     * @param {number} [end=0] The ending angle of the arc in radians, where 0
-     *    is to the right and `-Math.PI/2` is up.
-     * @returns {SVGElement} The generated wrapper element.
      *
      * @sample highcharts/members/renderer-arc/
      *         Drawing an arc
+     *
+     * @function Highcharts.SVGRenderer#arc
+     *
+     * @param {number} [x=0]
+     *        Center X position.
+     *
+     * @param {number} [y=0]
+     *        Center Y position.
+     *
+     * @param {number} [r=0]
+     *        The outer radius of the arc.
+     *
+     * @param {number} [innerR=0]
+     *        Inner radius like used in donut charts.
+     *
+     * @param {number} [start=0]
+     *        The starting angle of the arc in radians, where 0 is to the right
+     *         and `-Math.PI/2` is up.
+     *
+     * @param {number} [end=0]
+     *        The ending angle of the arc in radians, where 0 is to the right
+     *        and `-Math.PI/2` is up.
+     *
+     * @return {Highcharts.SVGElement}
+     *         The generated wrapper element.
      *//**
      * Draw and return an arc. Overloaded function that takes arguments object.
-     * @param {SVGAttributes} attribs Initial SVG attributes.
-     * @returns {SVGElement} The generated wrapper element.
+     *
+     * @function Highcharts.SVGRenderer#arc
+     *
+     * @param {Highcharts.SVGAttributes} attribs
+     *        Initial SVG attributes.
+     *
+     * @return {Highcharts.SVGElement}
+     *         The generated wrapper element.
      */
     arc: function (x, y, r, innerR, start, end) {
         var arc,
@@ -2794,25 +3338,44 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
 
     /**
      * Draw and return a rectangle.
-     * @param {number} [x] Left position.
-     * @param {number} [y] Top position.
-     * @param {number} [width] Width of the rectangle.
-     * @param {number} [height] Height of the rectangle.
-     * @param {number} [r] Border corner radius.
-     * @param {number} [strokeWidth] A stroke width can be supplied to allow
-     *    crisp drawing.
-     * @returns {SVGElement} The generated wrapper element.
+     *
+     * @function Highcharts.SVGRenderer#rect
+     *
+     * @param {number} [x]
+     *        Left position.
+     *
+     * @param {number} [y]
+     *        Top position.
+     *
+     * @param {number} [width]
+     *        Width of the rectangle.
+     *
+     * @param {number} [height]
+     *        Height of the rectangle.
+     *
+     * @param {number} [r]
+     *        Border corner radius.
+     *
+     * @param {number} [strokeWidth]
+     *        A stroke width can be supplied to allow crisp drawing.
+     *
+     * @return {Highcharts.SVGElement}
+     *         The generated wrapper element.
      *//**
      * Draw and return a rectangle.
-     * @param  {SVGAttributes} [attributes]
-     *         General SVG attributes for the rectangle.
-     * @return {SVGElement}
-     *         The generated wrapper element.
      *
      * @sample highcharts/members/renderer-rect-on-chart/
      *         Draw a rectangle in a chart
      * @sample highcharts/members/renderer-rect/
      *         Draw a rectangle independent from a chart
+     *
+     * @function Highcharts.SVGRenderer#rect
+     *
+     * @param {Highcharts.SVGAttributes} [attributes]
+     *        General SVG attributes for the rectangle.
+     *
+     * @return {Highcharts.SVGElement}
+     *         The generated wrapper element.
      */
     rect: function (x, y, width, height, r, strokeWidth) {
 
@@ -2845,12 +3408,20 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
     /**
      * Resize the {@link SVGRenderer#box} and re-align all aligned child
      * elements.
-     * @param  {number} width
-     *         The new pixel width.
-     * @param  {number} height
-     *         The new pixel height.
-     * @param  {Boolean|AnimationOptions} [animate=true]
-     *         Whether and how to animate.
+     *
+     * @sample highcharts/members/renderer-g/
+     *         Show and hide grouped objects
+     *
+     * @function Highcharts.SVGRenderer#setSize
+     *
+     * @param {number} width
+     *        The new pixel width.
+     *
+     * @param {number} height
+     *        The new pixel height.
+     *
+     * @param {boolean|Highcharts.AnimationOptionsObject} [animate=true]
+     *        Whether and how to animate.
      */
     setSize: function (width, height, animate) {
         var renderer = this,
@@ -2881,15 +3452,16 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
     /**
      * Create and return an svg group element. Child
      * {@link Highcharts.SVGElement} objects are added to the group by using the
-     * group as the first parameter
-     * in {@link Highcharts.SVGElement#add|add()}.
+     * group as the first parameter in {@link Highcharts.SVGElement#add|add()}.
      *
-     * @param {string} [name] The group will be given a class name of
-     * `highcharts-{name}`. This can be used for styling and scripting.
-     * @returns {SVGElement} The generated wrapper element.
+     * @function Highcharts.SVGRenderer#g
      *
-     * @sample highcharts/members/renderer-g/
-     *         Show and hide grouped objects
+     * @param {string} [name]
+     *        The group will be given a class name of `highcharts-{name}`. This
+     *        can be used for styling and scripting.
+     *
+     * @return {Highcharts.SVGElement}
+     *         The generated wrapper element.
      */
     g: function (name) {
         var elem = this.createElement('g');
@@ -2898,20 +3470,35 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
 
     /**
      * Display an image.
-     * @param {string} src The image source.
-     * @param {number} [x] The X position.
-     * @param {number} [y] The Y position.
-     * @param {number} [width] The image width. If omitted, it defaults to the
-     *    image file width.
-     * @param {number} [height] The image height. If omitted it defaults to the
-     *    image file height.
-     * @param {function} [onload] Event handler for image load.
-     * @returns {SVGElement} The generated wrapper element.
      *
      * @sample highcharts/members/renderer-image-on-chart/
      *         Add an image in a chart
      * @sample highcharts/members/renderer-image/
      *         Add an image independent of a chart
+     *
+     * @function Highcharts.SVGRenderer#image
+     *
+     * @param {string} src
+     *        The image source.
+     *
+     * @param {number} [x]
+     *        The X position.
+     *
+     * @param {number} [y]
+     *        The Y position.
+     *
+     * @param {number} [width]
+     *        The image width. If omitted, it defaults to the image file width.
+     *
+     * @param {number} [height]
+     *        The image height. If omitted it defaults to the image file
+     *        height.
+     *
+     * @param {Function} [onload]
+     *        Event handler for image load.
+     *
+     * @return {Highcharts.SVGElement}
+     *         The generated wrapper element.
      */
     image: function (src, x, y, width, height, onload) {
         var attribs = {
@@ -2977,23 +3564,27 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
      * It is used in Highcharts for point makers, which cake a `symbol` option,
      * and label and button backgrounds like in the tooltip and stock flags.
      *
-     * @param {Symbol} symbol - The symbol name.
-     * @param {number} x - The X coordinate for the top left position.
-     * @param {number} y - The Y coordinate for the top left position.
-     * @param {number} width - The pixel width.
-     * @param {number} height - The pixel height.
-     * @param {Object} [options] - Additional options, depending on the actual
-     *    symbol drawn.
-     * @param {number} [options.anchorX] - The anchor X position for the
-     *    `callout` symbol. This is where the chevron points to.
-     * @param {number} [options.anchorY] - The anchor Y position for the
-     *    `callout` symbol. This is where the chevron points to.
-     * @param {number} [options.end] - The end angle of an `arc` symbol.
-     * @param {boolean} [options.open] - Whether to draw `arc` symbol open or
-     *    closed.
-     * @param {number} [options.r] - The radius of an `arc` symbol, or the
-     *    border radius for the `callout` symbol.
-     * @param {number} [options.start] - The start angle of an `arc` symbol.
+     * @function Highcharts.SVGRenderer#symbol
+     *
+     * @param {symbol} symbol
+     *        The symbol name.
+     *
+     * @param {number} x
+     *        The X coordinate for the top left position.
+     *
+     * @param {number} y
+     *        The Y coordinate for the top left position.
+     *
+     * @param {number} width
+     *        The pixel width.
+     *
+     * @param {number} height
+     *        The pixel height.
+     *
+     * @param {Highcharts.SymbolOptionsObject} [options]
+     *        Additional options, depending on the actual symbol drawn.
+     *
+     * @return {Highcharts.SVGElement}
      */
     symbol: function (symbol, x, y, width, height, options) {
 
@@ -3156,16 +3747,11 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
         return obj;
     },
 
-    /**
-     * @typedef {string} Symbol
-     *
-     * Can be one of `arc`, `callout`, `circle`, `diamond`, `square`,
-     * `triangle`, `triangle-down`. Symbols are used internally for point
-     * markers, button and label borders and backgrounds, or custom shapes.
-     * Extendable by adding to {@link SVGRenderer#symbols}.
-     */
     /**
      * An extendable collection of functions for defining symbol paths.
+     *
+     * @name Highcharts.SVGRenderer#symbols
+     * @type {Highcharts.SymbolDictionary}
      */
     symbols: {
         'circle': function (x, y, w, h) {
@@ -3272,7 +3858,7 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
          * Callout shape used for default tooltips, also used for rounded
          * rectangles in VML
          */
-        callout: function (x, y, w, h, options) {
+        'callout': function (x, y, w, h, options) {
             var arrowLength = 6,
                 halfDistance = 6,
                 r = Math.min((options && options.r) || 0, w, h),
@@ -3375,10 +3961,9 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
     },
 
     /**
-     * @typedef {SVGElement} ClipRect - A clipping rectangle that can be applied
-     * to one or more {@link SVGElement} instances. It is instanciated with the
-     * {@link SVGRenderer#clipRect} function and applied with the {@link
-     * SVGElement#clip} function.
+     * Define a clipping rectangle. The clipping rectangle is later applied
+     * to {@link SVGElement} objects through the {@link SVGElement#clip}
+     * function.
      *
      * @example
      * var circle = renderer.circle(100, 100, 100)
@@ -3388,27 +3973,21 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
      *
      * // Leave only the lower right quarter visible
      * circle.clip(clipRect);
-     */
-    /**
-     * Define a clipping rectangle. The clipping rectangle is later applied
-     * to {@link SVGElement} objects through the {@link SVGElement#clip}
-     * function.
      *
-     * @param {String} id
+     * @function Highcharts.SVGRenderer#clipRect
+     *
+     * @param {string} id
+     *
      * @param {number} x
+     *
      * @param {number} y
+     *
      * @param {number} width
-     * @param {number} height
-     * @returns {ClipRect} A clipping rectangle.
      *
-     * @example
-     * var circle = renderer.circle(100, 100, 100)
-     *     .attr({ fill: 'red' })
-     *     .add();
-     * var clipRect = renderer.clipRect(100, 100, 100, 100);
+     * @param {number} height
      *
-     * // Leave only the lower right quarter visible
-     * circle.clip(clipRect);
+     * @return {Highcharts.ClipRectElement}
+     *         A clipping rectangle.
      */
     clipRect: function (x, y, width, height) {
         var wrapper,
@@ -3435,16 +4014,6 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
      * and some basic text styling of these. For more advanced features like
      * border and background, use {@link Highcharts.SVGRenderer#label} instead.
      * To update the text after render, run `text.attr({ text: 'New text' })`.
-     * @param  {String} str
-     *         The text of (subset) HTML to draw.
-     * @param  {number} x
-     *         The x position of the text's lower left corner.
-     * @param  {number} y
-     *         The y position of the text's lower left corner.
-     * @param  {Boolean} [useHTML=false]
-     *         Use HTML to render the text.
-     *
-     * @return {SVGElement} The text object.
      *
      * @sample highcharts/members/renderer-text-on-chart/
      *         Annotate the chart freely
@@ -3452,6 +4021,23 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
      *         Annotate with a border and in response to the data
      * @sample highcharts/members/renderer-text/
      *         Formatted text
+     *
+     * @function Highcharts.SVGRenderer#text
+     *
+     * @param {string} str
+     *        The text of (subset) HTML to draw.
+     *
+     * @param {number} x
+     *        The x position of the text's lower left corner.
+     *
+     * @param {number} y
+     *        The y position of the text's lower left corner.
+     *
+     * @param {boolean} [useHTML=false]
+     *        Use HTML to render the text.
+     *
+     * @return {Highcharts.SVGElement}
+     *         The text object.
      */
     text: function (str, x, y, useHTML) {
 
@@ -3468,7 +4054,7 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
         if (y) {
             attribs.y = Math.round(y);
         }
-        if (str || str === 0) {
+        if (defined(str)) {
             attribs.text = str;
         }
 
@@ -3500,12 +4086,17 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
      * Utility to return the baseline offset and total line height from the font
      * size.
      *
-     * @param {?string} fontSize The current font size to inspect. If not given,
-     *   the font size will be found from the DOM element.
-     * @param {SVGElement|SVGDOMElement} [elem] The element to inspect for a
-     *   current font size.
-     * @returns {Object} An object containing `h`: the line height, `b`: the
-     * baseline relative to the top of the box, and `f`: the font size.
+     * @function Highcharts.SVGRenderer#fontMetrics
+     *
+     * @param {string} [fontSize]
+     *        The current font size to inspect. If not given, the font size
+     *        will be found from the DOM element.
+     *
+     * @param {Highcharts.SVGElement|Highcharts.SVGDOMElement} [elem]
+     *        The element to inspect for a current font size.
+     *
+     * @return {Highcharts.FontMetricsObject}
+     *         The font metrics.
      */
     fontMetrics: function (fontSize, elem) {
         var lineHeight,
@@ -3531,7 +4122,7 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
 
         // Empirical values found by comparing font size and bounding box
         // height. Applies to the default font family.
-        // http://jsfiddle.net/highcharts/7xvn7/
+        // https://jsfiddle.net/highcharts/7xvn7/
         lineHeight = fontSize < 24 ? fontSize + 3 : Math.round(fontSize * 1.2);
         baseline = Math.round(lineHeight * 0.8);
 
@@ -3546,6 +4137,13 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
      * Correct X and Y positioning of a label for rotation (#1764).
      *
      * @private
+     * @function Highcharts.SVGRenderer#rotCorr
+     *
+     * @param {number} baseline
+     *
+     * @param {number} rotation
+     *
+     * @param {boolean} alterY
      */
     rotCorr: function (baseline, rotation, alterY) {
         var y = baseline;
@@ -3566,35 +4164,52 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
      * using the {@link Highcharts.SVGElement#attr|attr} method. To update the
      * text after render, run `label.attr({ text: 'New text' })`.
      *
-     * @param  {string} str
-     *         The initial text string or (subset) HTML to render.
-     * @param  {number} x
-     *         The x position of the label's left side.
-     * @param  {number} y
-     *         The y position of the label's top side or baseline, depending on
-     *         the `baseline` parameter.
-     * @param  {String} shape
-     *         The shape of the label's border/background, if any. Defaults to
-     *         `rect`. Other possible values are `callout` or other shapes
-     *         defined in {@link Highcharts.SVGRenderer#symbols}.
-     * @param  {number} anchorX
-     *         In case the `shape` has a pointer, like a flag, this is the
-     *         coordinates it should be pinned to.
-     * @param  {number} anchorY
-     *         In case the `shape` has a pointer, like a flag, this is the
-     *         coordinates it should be pinned to.
-     * @param  {Boolean} baseline
-     *         Whether to position the label relative to the text baseline,
-     *         like {@link Highcharts.SVGRenderer#text|renderer.text}, or to the
-     *         upper border of the rectangle.
-     * @param  {String} className
-     *         Class name for the group.
-     *
-     * @return {SVGElement}
-     *         The generated label.
-     *
      * @sample highcharts/members/renderer-label-on-chart/
      *         A label on the chart
+     *
+     * @function Highcharts.SVGRenderer#label
+     *
+     * @param {string} str
+     *        The initial text string or (subset) HTML to render.
+     *
+     * @param {number} x
+     *        The x position of the label's left side.
+     *
+     * @param {number} y
+     *        The y position of the label's top side or baseline, depending on
+     *        the `baseline` parameter.
+     *
+     * @param {string} [shape='rect']
+     *        The shape of the label's border/background, if any. Defaults to
+     *        `rect`. Other possible values are `callout` or other shapes
+     *        defined in {@link Highcharts.SVGRenderer#symbols}.
+     *
+     * @param {string} [shape='rect']
+     *        The shape of the label's border/background, if any. Defaults to
+     *        `rect`. Other possible values are `callout` or other shapes
+     *        defined in {@link Highcharts.SVGRenderer#symbols}.
+     *
+     * @param {number} [anchorX]
+     *        In case the `shape` has a pointer, like a flag, this is the
+     *        coordinates it should be pinned to.
+     *
+     * @param {number} [anchorY]
+     *        In case the `shape` has a pointer, like a flag, this is the
+     *        coordinates it should be pinned to.
+     *
+     * @param {boolean} [useHTML=false]
+     *        Wether to use HTML to render the label.
+     *
+     * @param {boolean} [baseline=false]
+     *        Whether to position the label relative to the text baseline,
+     *        like {@link Highcharts.SVGRenderer#text|renderer.text}, or to the
+     *        upper border of the rectangle.
+     *
+     * @param {string} [className]
+     *        Class name for the group.
+     *
+     * @return {Highcharts.SVGElement}
+     *         The generated label.
      */
     label: function (
         str,
@@ -3645,7 +4260,7 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
         };
         
 
-        /**
+        /*
          * This function runs after the label is added to the DOM (when the
          * bounding box is available), and after the text of the label is
          * updated to detect the new bounding box and reflect it in the border
@@ -3703,9 +4318,9 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
             }
         };
 
-        /**
+        /*
          * This function runs after setting text or padding, but only if padding
-         * is changed
+         * is changed.
          */
         updateTextPadding = function () {
             var textX = paddingLeft + padding,
@@ -3743,10 +4358,8 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
             text.y = textY;
         };
 
-        /**
+        /*
          * Set a box attribute, or defer it if the box is not yet created
-         * @param {Object} key
-         * @param {Object} value
          */
         boxAttr = function (key, value) {
             if (box) {
@@ -3756,7 +4369,7 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
             }
         };
 
-        /**
+        /*
          * After the text element is added, get the desired size of the border
          * box and add it before the text in the DOM.
          */
@@ -3869,10 +4482,9 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
         // Redirect certain methods to either the box or the text
         var baseCss = wrapper.css;
         return extend(wrapper, {
-            /**
+            /*
              * Pick up some properties and apply them to the text instead of the
              * wrapper.
-             * @ignore
              */
             css: function (styles) {
                 if (styles) {
@@ -3894,9 +4506,8 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
                 }
                 return baseCss.call(wrapper, styles);
             },
-            /**
+            /*
              * Return the bounding box of the box, not the group.
-             * @ignore
              */
             getBBox: function () {
                 return {
@@ -3907,9 +4518,8 @@ extend(SVGRenderer.prototype, /** @lends Highcharts.SVGRenderer.prototype */ {
                 };
             },
             
-            /**
+            /*
              * Destroy and release memory.
-             * @ignore
              */
             destroy: function () {