highcharts-rails 4.2.7 → 5.0.0

data/app/assets/javascripts/highcharts/highcharts-more.js

@@ -1,1005 +1,1057 @@
-// ==ClosureCompiler==
-// @compilation_level SIMPLE_OPTIMIZATIONS
-
 /**
- * @license Highcharts JS v4.2.7 (2016-09-21)
+ * @license Highcharts JS v5.0.0 (2016-09-29)
  *
  * (c) 2009-2016 Torstein Honsi
  *
  * License: www.highcharts.com/license
  */
-
-(function (factory) {
+(function(factory) {
     if (typeof module === 'object' && module.exports) {
         module.exports = factory;
     } else {
         factory(Highcharts);
     }
-}(function (Highcharts) {
-var arrayMin = Highcharts.arrayMin,
-        arrayMax = Highcharts.arrayMax,
-        each = Highcharts.each,
-        extend = Highcharts.extend,
-        isNumber = Highcharts.isNumber,
-        merge = Highcharts.merge,
-        map = Highcharts.map,
-        pick = Highcharts.pick,
-        pInt = Highcharts.pInt,
-        correctFloat = Highcharts.correctFloat,
-        defaultPlotOptions = Highcharts.getOptions().plotOptions,
-        seriesTypes = Highcharts.seriesTypes,
-        extendClass = Highcharts.extendClass,
-        splat = Highcharts.splat,
-        wrap = Highcharts.wrap,
-        Axis = Highcharts.Axis,
-        Tick = Highcharts.Tick,
-        Point = Highcharts.Point,
-        Pointer = Highcharts.Pointer,
-        CenteredSeriesMixin = Highcharts.CenteredSeriesMixin,
-        TrackerMixin = Highcharts.TrackerMixin,
-        Series = Highcharts.Series,
-        math = Math,
-        mathRound = math.round,
-        mathFloor = math.floor,
-        mathMax = math.max,
-        Color = Highcharts.Color,
-        noop = function () {},
-        UNDEFINED;/**
-     * The Pane object allows options that are common to a set of X and Y axes.
-     *
-     * In the future, this can be extended to basic Highcharts and Highstock.
-     */
-    function Pane(options, chart, firstAxis) {
-        this.init(options, chart, firstAxis);
-    }
-
-    // Extend the Pane prototype
-    extend(Pane.prototype, {
-
-        /**
-         * Initiate the Pane object
-         */
-        init: function (options, chart, firstAxis) {
-            var pane = this,
-                backgroundOption,
-                defaultOptions = pane.defaultOptions;
-
-            pane.chart = chart;
-
-            // Set options. Angular charts have a default background (#3318)
-            pane.options = options = merge(defaultOptions, chart.angular ? { background: {} } : undefined, options);
-
-            backgroundOption = options.background;
-
-            // To avoid having weighty logic to place, update and remove the backgrounds,
-            // push them to the first axis' plot bands and borrow the existing logic there.
-            if (backgroundOption) {
-                each([].concat(splat(backgroundOption)).reverse(), function (config) {
-                    var backgroundColor = config.backgroundColor,  // if defined, replace the old one (specific for gradients)
-                        axisUserOptions = firstAxis.userOptions;
-                    config = merge(pane.defaultBackgroundOptions, config);
-                    if (backgroundColor) {
-                        config.backgroundColor = backgroundColor;
-                    }
-                    config.color = config.backgroundColor; // due to naming in plotBands
-                    firstAxis.options.plotBands.unshift(config);
-                    axisUserOptions.plotBands = axisUserOptions.plotBands || []; // #3176
-                    if (axisUserOptions.plotBands !== firstAxis.options.plotBands) {
-                        axisUserOptions.plotBands.unshift(config);
-                    }
-                });
-            }
-        },
-
+}(function(Highcharts) {
+    (function(H) {
         /**
-         * The default options object
+         * (c) 2010-2016 Torstein Honsi
+         *
+         * License: www.highcharts.com/license
          */
-        defaultOptions: {
-            // background: {conditional},
-            center: ['50%', '50%'],
-            size: '85%',
-            startAngle: 0
-            //endAngle: startAngle + 360
-        },
-
+        'use strict';
+        var each = H.each,
+            extend = H.extend,
+            merge = H.merge,
+            splat = H.splat;
         /**
-         * The default background options
+         * The Pane object allows options that are common to a set of X and Y axes.
+         *
+         * In the future, this can be extended to basic Highcharts and Highstock.
          */
-        defaultBackgroundOptions: {
-            shape: 'circle',
-            borderWidth: 1,
-            borderColor: 'silver',
-            backgroundColor: {
-                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                stops: [
-                    [0, '#FFF'],
-                    [1, '#DDD']
-                ]
-            },
-            from: -Number.MAX_VALUE, // corrected to axis min
-            innerRadius: 0,
-            to: Number.MAX_VALUE, // corrected to axis max
-            outerRadius: '105%'
+        function Pane(options, chart, firstAxis) {
+            this.init(options, chart, firstAxis);
         }
-    });
-
-    var axisProto = Axis.prototype,
-        tickProto = Tick.prototype;
-
-    /**
-     * Augmented methods for the x axis in order to hide it completely, used for the X axis in gauges
-     */
-    var hiddenAxisMixin = {
-        getOffset: noop,
-        redraw: function () {
-            this.isDirty = false; // prevent setting Y axis dirty
-        },
-        render: function () {
-            this.isDirty = false; // prevent setting Y axis dirty
-        },
-        setScale: noop,
-        setCategories: noop,
-        setTitle: noop
-    };
-
-    /**
-     * Augmented methods for the value axis
-     */
-    var radialAxisMixin = {
-        isRadial: true,
 
-        /**
-         * The default options extend defaultYAxisOptions
-         */
-        defaultRadialGaugeOptions: {
-            labels: {
-                align: 'center',
-                x: 0,
-                y: null // auto
-            },
-            minorGridLineWidth: 0,
-            minorTickInterval: 'auto',
-            minorTickLength: 10,
-            minorTickPosition: 'inside',
-            minorTickWidth: 1,
-            tickLength: 10,
-            tickPosition: 'inside',
-            tickWidth: 2,
-            title: {
-                rotation: 0
-            },
-            zIndex: 2 // behind dials, points in the series group
-        },
-
-        // Circular axis around the perimeter of a polar chart
-        defaultRadialXOptions: {
-            gridLineWidth: 1, // spokes
-            labels: {
-                align: null, // auto
-                distance: 15,
-                x: 0,
-                y: null // auto
-            },
-            maxPadding: 0,
-            minPadding: 0,
-            showLastLabel: false,
-            tickLength: 0
-        },
-
-        // Radial axis, like a spoke in a polar chart
-        defaultRadialYOptions: {
-            gridLineInterpolation: 'circle',
-            labels: {
-                align: 'right',
-                x: -3,
-                y: -2
-            },
-            showLastLabel: false,
-            title: {
-                x: 4,
-                text: null,
-                rotation: 90
-            }
-        },
+        // Extend the Pane prototype
+        extend(Pane.prototype, {
 
-        /**
-         * Merge and set options
-         */
-        setOptions: function (userOptions) {
+            /**
+             * Initiate the Pane object
+             */
+            init: function(options, chart, firstAxis) {
+                var pane = this,
+                    backgroundOption,
+                    defaultOptions = pane.defaultOptions;
 
-            var options = this.options = merge(
-                this.defaultOptions,
-                this.defaultRadialOptions,
-                userOptions
-            );
+                pane.chart = chart;
 
-            // Make sure the plotBands array is instanciated for each Axis (#2649)
-            if (!options.plotBands) {
-                options.plotBands = [];
-            }
+                // Set options. Angular charts have a default background (#3318)
+                pane.options = options = merge(defaultOptions, chart.angular ? {
+                    background: {}
+                } : undefined, options);
 
-        },
+                backgroundOption = options.background;
 
-        /**
-         * Wrap the getOffset method to return zero offset for title or labels in a radial
-         * axis
-         */
-        getOffset: function () {
-            // Call the Axis prototype method (the method we're in now is on the instance)
-            axisProto.getOffset.call(this);
+                // To avoid having weighty logic to place, update and remove the backgrounds,
+                // push them to the first axis' plot bands and borrow the existing logic there.
+                if (backgroundOption) {
+                    each([].concat(splat(backgroundOption)).reverse(), function(config) {
+                        var mConfig,
+                            axisUserOptions = firstAxis.userOptions;
+                        mConfig = merge(pane.defaultBackgroundOptions, config);
 
-            // Title or label offsets are not counted
-            this.chart.axisOffset[this.side] = 0;
 
-            // Set the center array
-            this.center = this.pane.center = CenteredSeriesMixin.getCenter.call(this.pane);
-        },
+                        if (config.backgroundColor) {
+                            mConfig.backgroundColor = config.backgroundColor;
+                        }
+                        mConfig.color = mConfig.backgroundColor; // due to naming in plotBands
+
 
+                        firstAxis.options.plotBands.unshift(mConfig);
+                        axisUserOptions.plotBands = axisUserOptions.plotBands || []; // #3176
+                        if (axisUserOptions.plotBands !== firstAxis.options.plotBands) {
+                            axisUserOptions.plotBands.unshift(mConfig);
+                        }
+                    });
+                }
+            },
+
+            /**
+             * The default options object
+             */
+            defaultOptions: {
+                // background: {conditional},
+                center: ['50%', '50%'],
+                size: '85%',
+                startAngle: 0
+                    //endAngle: startAngle + 360
+            },
 
+            /**
+             * The default background options
+             */
+            defaultBackgroundOptions: {
+                className: 'highcharts-pane',
+                shape: 'circle',
+
+                borderWidth: 1,
+                borderColor: '#cccccc',
+                backgroundColor: {
+                    linearGradient: {
+                        x1: 0,
+                        y1: 0,
+                        x2: 0,
+                        y2: 1
+                    },
+                    stops: [
+                        [0, '#ffffff'],
+                        [1, '#e6e6e6']
+                    ]
+                },
+
+                from: -Number.MAX_VALUE, // corrected to axis min
+                innerRadius: 0,
+                to: Number.MAX_VALUE, // corrected to axis max
+                outerRadius: '105%'
+            }
+
+        });
+
+        H.Pane = Pane;
+
+    }(Highcharts));
+    (function(H) {
         /**
-         * Get the path for the axis line. This method is also referenced in the getPlotLinePath
-         * method.
+         * (c) 2010-2016 Torstein Honsi
+         *
+         * License: www.highcharts.com/license
          */
-        getLinePath: function (lineWidth, radius) {
-            var center = this.center,
-                end,
-                chart = this.chart,
-                r = pick(radius, center[2] / 2 - this.offset),
-                path;
-
-            if (this.isCircular || radius !== undefined) {
-                path = this.chart.renderer.symbols.arc(
-                    this.left + center[0],
-                    this.top + center[1],
-                    r,
-                    r,
-                    {
-                        start: this.startAngleRad,
-                        end: this.endAngleRad,
-                        open: true,
-                        innerR: 0
-                    }
-                );
-            } else {
-                end = this.postTranslate(this.angleRad, r);
-                path = ['M', center[0] + chart.plotLeft, center[1] + chart.plotTop, 'L', end.x, end.y];
-            }
-            return path;
-        },
+        'use strict';
+        var Axis = H.Axis,
+            CenteredSeriesMixin = H.CenteredSeriesMixin,
+            each = H.each,
+            extend = H.extend,
+            map = H.map,
+            merge = H.merge,
+            noop = H.noop,
+            Pane = H.Pane,
+            pick = H.pick,
+            pInt = H.pInt,
+            Tick = H.Tick,
+            splat = H.splat,
+            wrap = H.wrap,
+
+
+            hiddenAxisMixin, // @todo Extract this to a new file
+            radialAxisMixin, // @todo Extract this to a new file
+            axisProto = Axis.prototype,
+            tickProto = Tick.prototype;
+
+        /**
+         * Augmented methods for the x axis in order to hide it completely, used for the X axis in gauges
+         */
+        hiddenAxisMixin = {
+            getOffset: noop,
+            redraw: function() {
+                this.isDirty = false; // prevent setting Y axis dirty
+            },
+            render: function() {
+                this.isDirty = false; // prevent setting Y axis dirty
+            },
+            setScale: noop,
+            setCategories: noop,
+            setTitle: noop
+        };
 
         /**
-         * Override setAxisTranslation by setting the translation to the difference
-         * in rotation. This allows the translate method to return angle for
-         * any given value.
+         * Augmented methods for the value axis
          */
-        setAxisTranslation: function () {
+        radialAxisMixin = {
 
-            // Call uber method
-            axisProto.setAxisTranslation.call(this);
+            /**
+             * The default options extend defaultYAxisOptions
+             */
+            defaultRadialGaugeOptions: {
+                labels: {
+                    align: 'center',
+                    x: 0,
+                    y: null // auto
+                },
+                minorGridLineWidth: 0,
+                minorTickInterval: 'auto',
+                minorTickLength: 10,
+                minorTickPosition: 'inside',
+                minorTickWidth: 1,
+                tickLength: 10,
+                tickPosition: 'inside',
+                tickWidth: 2,
+                title: {
+                    rotation: 0
+                },
+                zIndex: 2 // behind dials, points in the series group
+            },
 
-            // Set transA and minPixelPadding
-            if (this.center) { // it's not defined the first time
-                if (this.isCircular) {
+            // Circular axis around the perimeter of a polar chart
+            defaultRadialXOptions: {
+                gridLineWidth: 1, // spokes
+                labels: {
+                    align: null, // auto
+                    distance: 15,
+                    x: 0,
+                    y: null // auto
+                },
+                maxPadding: 0,
+                minPadding: 0,
+                showLastLabel: false,
+                tickLength: 0
+            },
 
-                    this.transA = (this.endAngleRad - this.startAngleRad) /
-                        ((this.max - this.min) || 1);
+            // Radial axis, like a spoke in a polar chart
+            defaultRadialYOptions: {
+                gridLineInterpolation: 'circle',
+                labels: {
+                    align: 'right',
+                    x: -3,
+                    y: -2
+                },
+                showLastLabel: false,
+                title: {
+                    x: 4,
+                    text: null,
+                    rotation: 90
+                }
+            },
 
+            /**
+             * Merge and set options
+             */
+            setOptions: function(userOptions) {
 
-                } else {
-                    this.transA = (this.center[2] / 2) / ((this.max - this.min) || 1);
+                var options = this.options = merge(
+                    this.defaultOptions,
+                    this.defaultRadialOptions,
+                    userOptions
+                );
+
+                // Make sure the plotBands array is instanciated for each Axis (#2649)
+                if (!options.plotBands) {
+                    options.plotBands = [];
                 }
 
-                if (this.isXAxis) {
-                    this.minPixelPadding = this.transA * this.minPointOffset;
+            },
+
+            /**
+             * Wrap the getOffset method to return zero offset for title or labels in a radial
+             * axis
+             */
+            getOffset: function() {
+                // Call the Axis prototype method (the method we're in now is on the instance)
+                axisProto.getOffset.call(this);
+
+                // Title or label offsets are not counted
+                this.chart.axisOffset[this.side] = 0;
+
+                // Set the center array
+                this.center = this.pane.center = CenteredSeriesMixin.getCenter.call(this.pane);
+            },
+
+
+            /**
+             * Get the path for the axis line. This method is also referenced in the getPlotLinePath
+             * method.
+             */
+            getLinePath: function(lineWidth, radius) {
+                var center = this.center,
+                    end,
+                    chart = this.chart,
+                    r = pick(radius, center[2] / 2 - this.offset),
+                    path;
+
+                if (this.isCircular || radius !== undefined) {
+                    path = this.chart.renderer.symbols.arc(
+                        this.left + center[0],
+                        this.top + center[1],
+                        r,
+                        r, {
+                            start: this.startAngleRad,
+                            end: this.endAngleRad,
+                            open: true,
+                            innerR: 0
+                        }
+                    );
                 } else {
-                    // This is a workaround for regression #2593, but categories still don't position correctly.
-                    this.minPixelPadding = 0;
+                    end = this.postTranslate(this.angleRad, r);
+                    path = ['M', center[0] + chart.plotLeft, center[1] + chart.plotTop, 'L', end.x, end.y];
                 }
-            }
-        },
+                return path;
+            },
 
-        /**
-         * In case of auto connect, add one closestPointRange to the max value right before
-         * tickPositions are computed, so that ticks will extend passed the real max.
-         */
-        beforeSetTickPositions: function () {
-            // If autoConnect is true, polygonal grid lines are connected, and one closestPointRange
-            // is added to the X axis to prevent the last point from overlapping the first.
-            this.autoConnect = this.isCircular && pick(this.userMax, this.options.max) === undefined &&
-                this.endAngleRad - this.startAngleRad === 2 * Math.PI;
-        
-            if (this.autoConnect) {
-                this.max += (this.categories && 1) || this.pointRange || this.closestPointRange || 0; // #1197, #2260
-            }
-        },
+            /**
+             * Override setAxisTranslation by setting the translation to the difference
+             * in rotation. This allows the translate method to return angle for
+             * any given value.
+             */
+            setAxisTranslation: function() {
 
-        /**
-         * Override the setAxisSize method to use the arc's circumference as length. This
-         * allows tickPixelInterval to apply to pixel lengths along the perimeter
-         */
-        setAxisSize: function () {
+                // Call uber method
+                axisProto.setAxisTranslation.call(this);
 
-            axisProto.setAxisSize.call(this);
+                // Set transA and minPixelPadding
+                if (this.center) { // it's not defined the first time
+                    if (this.isCircular) {
 
-            if (this.isRadial) {
+                        this.transA = (this.endAngleRad - this.startAngleRad) /
+                            ((this.max - this.min) || 1);
 
-                // Set the center array
-                this.center = this.pane.center = Highcharts.CenteredSeriesMixin.getCenter.call(this.pane);
 
-                // The sector is used in Axis.translate to compute the translation of reversed axis points (#2570)
-                if (this.isCircular) {
-                    this.sector = this.endAngleRad - this.startAngleRad;
+                    } else {
+                        this.transA = (this.center[2] / 2) / ((this.max - this.min) || 1);
+                    }
+
+                    if (this.isXAxis) {
+                        this.minPixelPadding = this.transA * this.minPointOffset;
+                    } else {
+                        // This is a workaround for regression #2593, but categories still don't position correctly.
+                        this.minPixelPadding = 0;
+                    }
                 }
+            },
 
-                // Axis len is used to lay out the ticks
-                this.len = this.width = this.height = this.center[2] * pick(this.sector, 1) / 2;
+            /**
+             * In case of auto connect, add one closestPointRange to the max value right before
+             * tickPositions are computed, so that ticks will extend passed the real max.
+             */
+            beforeSetTickPositions: function() {
+                // If autoConnect is true, polygonal grid lines are connected, and one closestPointRange
+                // is added to the X axis to prevent the last point from overlapping the first.
+                this.autoConnect = this.isCircular && pick(this.userMax, this.options.max) === undefined &&
+                    this.endAngleRad - this.startAngleRad === 2 * Math.PI;
+
+                if (this.autoConnect) {
+                    this.max += (this.categories && 1) || this.pointRange || this.closestPointRange || 0; // #1197, #2260
+                }
+            },
 
+            /**
+             * Override the setAxisSize method to use the arc's circumference as length. This
+             * allows tickPixelInterval to apply to pixel lengths along the perimeter
+             */
+            setAxisSize: function() {
 
-            }
-        },
+                axisProto.setAxisSize.call(this);
 
-        /**
-         * Returns the x, y coordinate of a point given by a value and a pixel distance
-         * from center
-         */
-        getPosition: function (value, length) {
-            return this.postTranslate(
-                this.isCircular ? this.translate(value) : this.angleRad, // #2848
-                pick(this.isCircular ? length : this.translate(value), this.center[2] / 2) - this.offset
-            );
-        },
+                if (this.isRadial) {
 
-        /**
-         * Translate from intermediate plotX (angle), plotY (axis.len - radius) to final chart coordinates.
-         */
-        postTranslate: function (angle, radius) {
+                    // Set the center array
+                    this.center = this.pane.center = CenteredSeriesMixin.getCenter.call(this.pane);
 
-            var chart = this.chart,
-                center = this.center;
+                    // The sector is used in Axis.translate to compute the translation of reversed axis points (#2570)
+                    if (this.isCircular) {
+                        this.sector = this.endAngleRad - this.startAngleRad;
+                    }
 
-            angle = this.startAngleRad + angle;
+                    // Axis len is used to lay out the ticks
+                    this.len = this.width = this.height = this.center[2] * pick(this.sector, 1) / 2;
 
-            return {
-                x: chart.plotLeft + center[0] + Math.cos(angle) * radius,
-                y: chart.plotTop + center[1] + Math.sin(angle) * radius
-            };
 
-        },
+                }
+            },
 
-        /**
-         * Find the path for plot bands along the radial axis
-         */
-        getPlotBandPath: function (from, to, options) {
-            var center = this.center,
-                startAngleRad = this.startAngleRad,
-                fullRadius = center[2] / 2,
-                radii = [
-                    pick(options.outerRadius, '100%'),
-                    options.innerRadius,
-                    pick(options.thickness, 10)
-                ],
-                offset = Math.min(this.offset, 0),
-                percentRegex = /%$/,
-                start,
-                end,
-                open,
-                isCircular = this.isCircular, // X axis in a polar chart
-                ret;
+            /**
+             * Returns the x, y coordinate of a point given by a value and a pixel distance
+             * from center
+             */
+            getPosition: function(value, length) {
+                return this.postTranslate(
+                    this.isCircular ? this.translate(value) : this.angleRad, // #2848
+                    pick(this.isCircular ? length : this.translate(value), this.center[2] / 2) - this.offset
+                );
+            },
 
-            // Polygonal plot bands
-            if (this.options.gridLineInterpolation === 'polygon') {
-                ret = this.getPlotLinePath(from).concat(this.getPlotLinePath(to, true));
+            /**
+             * Translate from intermediate plotX (angle), plotY (axis.len - radius) to final chart coordinates.
+             */
+            postTranslate: function(angle, radius) {
 
-            // Circular grid bands
-            } else {
+                var chart = this.chart,
+                    center = this.center;
 
-                // Keep within bounds
-                from = Math.max(from, this.min);
-                to = Math.min(to, this.max);
+                angle = this.startAngleRad + angle;
 
-                // Plot bands on Y axis (radial axis) - inner and outer radius depend on to and from
-                if (!isCircular) {
-                    radii[0] = this.translate(from);
-                    radii[1] = this.translate(to);
-                }
+                return {
+                    x: chart.plotLeft + center[0] + Math.cos(angle) * radius,
+                    y: chart.plotTop + center[1] + Math.sin(angle) * radius
+                };
 
-                // Convert percentages to pixel values
-                radii = map(radii, function (radius) {
-                    if (percentRegex.test(radius)) {
-                        radius = (pInt(radius, 10) * fullRadius) / 100;
-                    }
-                    return radius;
-                });
+            },
 
-                // Handle full circle
-                if (options.shape === 'circle' || !isCircular) {
-                    start = -Math.PI / 2;
-                    end = Math.PI * 1.5;
-                    open = true;
+            /**
+             * Find the path for plot bands along the radial axis
+             */
+            getPlotBandPath: function(from, to, options) {
+                var center = this.center,
+                    startAngleRad = this.startAngleRad,
+                    fullRadius = center[2] / 2,
+                    radii = [
+                        pick(options.outerRadius, '100%'),
+                        options.innerRadius,
+                        pick(options.thickness, 10)
+                    ],
+                    offset = Math.min(this.offset, 0),
+                    percentRegex = /%$/,
+                    start,
+                    end,
+                    open,
+                    isCircular = this.isCircular, // X axis in a polar chart
+                    ret;
+
+                // Polygonal plot bands
+                if (this.options.gridLineInterpolation === 'polygon') {
+                    ret = this.getPlotLinePath(from).concat(this.getPlotLinePath(to, true));
+
+                    // Circular grid bands
                 } else {
-                    start = startAngleRad + this.translate(from);
-                    end = startAngleRad + this.translate(to);
-                }
 
-                radii[0] -= offset; // #5283
-                radii[2] -= offset; // #5283
-
-                ret = this.chart.renderer.symbols.arc(
-                    this.left + center[0],
-                    this.top + center[1],
-                    radii[0],
-                    radii[0],
-                    {
-                        start: Math.min(start, end), // Math is for reversed yAxis (#3606)
-                        end: Math.max(start, end),
-                        innerR: pick(radii[1], radii[0] - radii[2]),
-                        open: open
-                    }
-                );
-            }
+                    // Keep within bounds
+                    from = Math.max(from, this.min);
+                    to = Math.min(to, this.max);
 
-            return ret;
-        },
+                    // Plot bands on Y axis (radial axis) - inner and outer radius depend on to and from
+                    if (!isCircular) {
+                        radii[0] = this.translate(from);
+                        radii[1] = this.translate(to);
+                    }
 
-        /**
-         * Find the path for plot lines perpendicular to the radial axis.
-         */
-        getPlotLinePath: function (value, reverse) {
-            var axis = this,
-                center = axis.center,
-                chart = axis.chart,
-                end = axis.getPosition(value),
-                xAxis,
-                xy,
-                tickPositions,
-                ret;
+                    // Convert percentages to pixel values
+                    radii = map(radii, function(radius) {
+                        if (percentRegex.test(radius)) {
+                            radius = (pInt(radius, 10) * fullRadius) / 100;
+                        }
+                        return radius;
+                    });
 
-            // Spokes
-            if (axis.isCircular) {
-                ret = ['M', center[0] + chart.plotLeft, center[1] + chart.plotTop, 'L', end.x, end.y];
+                    // Handle full circle
+                    if (options.shape === 'circle' || !isCircular) {
+                        start = -Math.PI / 2;
+                        end = Math.PI * 1.5;
+                        open = true;
+                    } else {
+                        start = startAngleRad + this.translate(from);
+                        end = startAngleRad + this.translate(to);
+                    }
 
-            // Concentric circles
-            } else if (axis.options.gridLineInterpolation === 'circle') {
-                value = axis.translate(value);
-                if (value) { // a value of 0 is in the center
-                    ret = axis.getLinePath(0, value);
+                    radii[0] -= offset; // #5283
+                    radii[2] -= offset; // #5283
+
+                    ret = this.chart.renderer.symbols.arc(
+                        this.left + center[0],
+                        this.top + center[1],
+                        radii[0],
+                        radii[0], {
+                            start: Math.min(start, end), // Math is for reversed yAxis (#3606)
+                            end: Math.max(start, end),
+                            innerR: pick(radii[1], radii[0] - radii[2]),
+                            open: open
+                        }
+                    );
                 }
-            // Concentric polygons
-            } else {
-                // Find the X axis in the same pane
-                each(chart.xAxis, function (a) {
-                    if (a.pane === axis.pane) {
-                        xAxis = a;
+
+                return ret;
+            },
+
+            /**
+             * Find the path for plot lines perpendicular to the radial axis.
+             */
+            getPlotLinePath: function(value, reverse) {
+                var axis = this,
+                    center = axis.center,
+                    chart = axis.chart,
+                    end = axis.getPosition(value),
+                    xAxis,
+                    xy,
+                    tickPositions,
+                    ret;
+
+                // Spokes
+                if (axis.isCircular) {
+                    ret = ['M', center[0] + chart.plotLeft, center[1] + chart.plotTop, 'L', end.x, end.y];
+
+                    // Concentric circles
+                } else if (axis.options.gridLineInterpolation === 'circle') {
+                    value = axis.translate(value);
+                    if (value) { // a value of 0 is in the center
+                        ret = axis.getLinePath(0, value);
+                    }
+                    // Concentric polygons
+                } else {
+                    // Find the X axis in the same pane
+                    each(chart.xAxis, function(a) {
+                        if (a.pane === axis.pane) {
+                            xAxis = a;
+                        }
+                    });
+                    ret = [];
+                    value = axis.translate(value);
+                    tickPositions = xAxis.tickPositions;
+                    if (xAxis.autoConnect) {
+                        tickPositions = tickPositions.concat([tickPositions[0]]);
+                    }
+                    // Reverse the positions for concatenation of polygonal plot bands
+                    if (reverse) {
+                        tickPositions = [].concat(tickPositions).reverse();
                     }
-                });
-                ret = [];
-                value = axis.translate(value);
-                tickPositions = xAxis.tickPositions;
-                if (xAxis.autoConnect) {
-                    tickPositions = tickPositions.concat([tickPositions[0]]);
-                }
-                // Reverse the positions for concatenation of polygonal plot bands
-                if (reverse) {
-                    tickPositions = [].concat(tickPositions).reverse();
-                }
 
-                each(tickPositions, function (pos, i) {
-                    xy = xAxis.getPosition(pos, value);
-                    ret.push(i ? 'L' : 'M', xy.x, xy.y);
-                });
+                    each(tickPositions, function(pos, i) {
+                        xy = xAxis.getPosition(pos, value);
+                        ret.push(i ? 'L' : 'M', xy.x, xy.y);
+                    });
 
+                }
+                return ret;
+            },
+
+            /**
+             * Find the position for the axis title, by default inside the gauge
+             */
+            getTitlePosition: function() {
+                var center = this.center,
+                    chart = this.chart,
+                    titleOptions = this.options.title;
+
+                return {
+                    x: chart.plotLeft + center[0] + (titleOptions.x || 0),
+                    y: chart.plotTop + center[1] - ({
+                            high: 0.5,
+                            middle: 0.25,
+                            low: 0
+                        }[titleOptions.align] *
+                        center[2]) + (titleOptions.y || 0)
+                };
             }
-            return ret;
-        },
+
+        };
 
         /**
-         * Find the position for the axis title, by default inside the gauge
+         * Override axisProto.init to mix in special axis instance functions and function overrides
          */
-        getTitlePosition: function () {
-            var center = this.center,
-                chart = this.chart,
-                titleOptions = this.options.title;
+        wrap(axisProto, 'init', function(proceed, chart, userOptions) {
+            var axis = this,
+                angular = chart.angular,
+                polar = chart.polar,
+                isX = userOptions.isX,
+                isHidden = angular && isX,
+                isCircular,
+                options,
+                chartOptions = chart.options,
+                paneIndex = userOptions.pane || 0,
+                pane,
+                paneOptions;
+
+            // Before prototype.init
+            if (angular) {
+                extend(this, isHidden ? hiddenAxisMixin : radialAxisMixin);
+                isCircular = !isX;
+                if (isCircular) {
+                    this.defaultRadialOptions = this.defaultRadialGaugeOptions;
+                }
 
-            return {
-                x: chart.plotLeft + center[0] + (titleOptions.x || 0),
-                y: chart.plotTop + center[1] - ({ high: 0.5, middle: 0.25, low: 0 }[titleOptions.align] *
-                    center[2]) + (titleOptions.y || 0)
-            };
-        }
+            } else if (polar) {
+                extend(this, radialAxisMixin);
+                isCircular = isX;
+                this.defaultRadialOptions = isX ? this.defaultRadialXOptions : merge(this.defaultYAxisOptions, this.defaultRadialYOptions);
 
-    };
-
-    /**
-     * Override axisProto.init to mix in special axis instance functions and function overrides
-     */
-    wrap(axisProto, 'init', function (proceed, chart, userOptions) {
-        var axis = this,
-            angular = chart.angular,
-            polar = chart.polar,
-            isX = userOptions.isX,
-            isHidden = angular && isX,
-            isCircular,
-            options,
-            chartOptions = chart.options,
-            paneIndex = userOptions.pane || 0,
-            pane,
-            paneOptions;
-
-        // Before prototype.init
-        if (angular) {
-            extend(this, isHidden ? hiddenAxisMixin : radialAxisMixin);
-            isCircular =  !isX;
-            if (isCircular) {
-                this.defaultRadialOptions = this.defaultRadialGaugeOptions;
             }
 
-        } else if (polar) {
-            //extend(this, userOptions.isX ? radialAxisMixin : radialAxisMixin);
-            extend(this, radialAxisMixin);
-            isCircular = isX;
-            this.defaultRadialOptions = isX ? this.defaultRadialXOptions : merge(this.defaultYAxisOptions, this.defaultRadialYOptions);
+            // Disable certain features on angular and polar axes
+            if (angular || polar) {
+                this.isRadial = true;
+                chart.inverted = false;
+                chartOptions.chart.zoomType = null;
+            } else {
+                this.isRadial = false;
+            }
 
-        }
+            // Run prototype.init
+            proceed.call(this, chart, userOptions);
 
-        // Disable certain features on angular and polar axes
-        if (angular || polar) {
-            chart.inverted = false;
-            chartOptions.chart.zoomType = null;
-        }
+            if (!isHidden && (angular || polar)) {
+                options = this.options;
+
+                // Create the pane and set the pane options.
+                if (!chart.panes) {
+                    chart.panes = [];
+                }
+                this.pane = pane = chart.panes[paneIndex] = chart.panes[paneIndex] || new Pane(
+                    splat(chartOptions.pane)[paneIndex],
+                    chart,
+                    axis
+                );
+                paneOptions = pane.options;
 
-        // Run prototype.init
-        proceed.call(this, chart, userOptions);
+                // Start and end angle options are
+                // given in degrees relative to top, while internal computations are
+                // in radians relative to right (like SVG).
+                this.angleRad = (options.angle || 0) * Math.PI / 180; // Y axis in polar charts
+                this.startAngleRad = (paneOptions.startAngle - 90) * Math.PI / 180; // Gauges
+                this.endAngleRad = (pick(paneOptions.endAngle, paneOptions.startAngle + 360) - 90) * Math.PI / 180; // Gauges
+                this.offset = options.offset || 0;
 
-        if (!isHidden && (angular || polar)) {
-            options = this.options;
+                this.isCircular = isCircular;
 
-            // Create the pane and set the pane options.
-            if (!chart.panes) {
-                chart.panes = [];
             }
-            this.pane = pane = chart.panes[paneIndex] = chart.panes[paneIndex] || new Pane(
-                splat(chartOptions.pane)[paneIndex],
-                chart,
-                axis
-            );
-            paneOptions = pane.options;
-
-            // Start and end angle options are
-            // given in degrees relative to top, while internal computations are
-            // in radians relative to right (like SVG).
-            this.angleRad = (options.angle || 0) * Math.PI / 180; // Y axis in polar charts
-            this.startAngleRad = (paneOptions.startAngle - 90) * Math.PI / 180; // Gauges
-            this.endAngleRad = (pick(paneOptions.endAngle, paneOptions.startAngle + 360)  - 90) * Math.PI / 180; // Gauges
-            this.offset = options.offset || 0;
-
-            this.isCircular = isCircular;
 
-        }
+        });
+
+        /**
+         * Wrap auto label align to avoid setting axis-wide rotation on radial axes (#4920)
+         * @param   {Function} proceed
+         * @returns {String} Alignment
+         */
+        wrap(axisProto, 'autoLabelAlign', function(proceed) {
+            if (!this.isRadial) {
+                return proceed.apply(this, [].slice.call(arguments, 1));
+            } // else return undefined
+        });
 
-    });
+        /**
+         * Add special cases within the Tick class' methods for radial axes.
+         */
+        wrap(tickProto, 'getPosition', function(proceed, horiz, pos, tickmarkOffset, old) {
+            var axis = this.axis;
 
-    /**
-     * Wrap auto label align to avoid setting axis-wide rotation on radial axes (#4920)
-     * @param   {Function} proceed
-     * @returns {String} Alignment
-     */
-    wrap(axisProto, 'autoLabelAlign', function (proceed) {
-        if (!this.isRadial) {
-            return proceed.apply(this, [].slice.call(arguments, 1));
-        } // else return undefined
-    });
-
-    /**
-     * Add special cases within the Tick class' methods for radial axes.
-     */
-    wrap(tickProto, 'getPosition', function (proceed, horiz, pos, tickmarkOffset, old) {
-        var axis = this.axis;
-
-        return axis.getPosition ?
-            axis.getPosition(pos) :
-            proceed.call(this, horiz, pos, tickmarkOffset, old);
-    });
-
-    /**
-     * Wrap the getLabelPosition function to find the center position of the label
-     * based on the distance option
-     */
-    wrap(tickProto, 'getLabelPosition', function (proceed, x, y, label, horiz, labelOptions, tickmarkOffset, index, step) {
-        var axis = this.axis,
-            optionsY = labelOptions.y,
-            ret,
-            centerSlot = 20, // 20 degrees to each side at the top and bottom
-            align = labelOptions.align,
-            angle = ((axis.translate(this.pos) + axis.startAngleRad + Math.PI / 2) / Math.PI * 180) % 360;
-
-        if (axis.isRadial) { // Both X and Y axes in a polar chart
-            ret = axis.getPosition(this.pos, (axis.center[2] / 2) + pick(labelOptions.distance, -25));
-
-            // Automatically rotated
-            if (labelOptions.rotation === 'auto') {
-                label.attr({
-                    rotation: angle
-                });
+            return axis.getPosition ?
+                axis.getPosition(pos) :
+                proceed.call(this, horiz, pos, tickmarkOffset, old);
+        });
 
-            // Vertically centered
-            } else if (optionsY === null) {
-                optionsY = axis.chart.renderer.fontMetrics(label.styles.fontSize).b - label.getBBox().height / 2;
-            }
+        /**
+         * Wrap the getLabelPosition function to find the center position of the label
+         * based on the distance option
+         */
+        wrap(tickProto, 'getLabelPosition', function(proceed, x, y, label, horiz, labelOptions, tickmarkOffset, index, step) {
+            var axis = this.axis,
+                optionsY = labelOptions.y,
+                ret,
+                centerSlot = 20, // 20 degrees to each side at the top and bottom
+                align = labelOptions.align,
+                angle = ((axis.translate(this.pos) + axis.startAngleRad + Math.PI / 2) / Math.PI * 180) % 360;
+
+            if (axis.isRadial) { // Both X and Y axes in a polar chart
+                ret = axis.getPosition(this.pos, (axis.center[2] / 2) + pick(labelOptions.distance, -25));
+
+                // Automatically rotated
+                if (labelOptions.rotation === 'auto') {
+                    label.attr({
+                        rotation: angle
+                    });
 
-            // Automatic alignment
-            if (align === null) {
-                if (axis.isCircular) { // Y axis
-                    if (this.label.getBBox().width > axis.len * axis.tickInterval / (axis.max - axis.min)) { // #3506
-                        centerSlot = 0;
-                    }
-                    if (angle > centerSlot && angle < 180 - centerSlot) {
-                        align = 'left'; // right hemisphere
-                    } else if (angle > 180 + centerSlot && angle < 360 - centerSlot) {
-                        align = 'right'; // left hemisphere
+                    // Vertically centered
+                } else if (optionsY === null) {
+                    optionsY = axis.chart.renderer.fontMetrics(label.styles.fontSize).b - label.getBBox().height / 2;
+                }
+
+                // Automatic alignment
+                if (align === null) {
+                    if (axis.isCircular) { // Y axis
+                        if (this.label.getBBox().width > axis.len * axis.tickInterval / (axis.max - axis.min)) { // #3506
+                            centerSlot = 0;
+                        }
+                        if (angle > centerSlot && angle < 180 - centerSlot) {
+                            align = 'left'; // right hemisphere
+                        } else if (angle > 180 + centerSlot && angle < 360 - centerSlot) {
+                            align = 'right'; // left hemisphere
+                        } else {
+                            align = 'center'; // top or bottom
+                        }
                     } else {
-                        align = 'center'; // top or bottom
+                        align = 'center';
                     }
-                } else {
-                    align = 'center';
+                    label.attr({
+                        align: align
+                    });
                 }
-                label.attr({
-                    align: align
-                });
-            }
 
-            ret.x += labelOptions.x;
-            ret.y += optionsY;
+                ret.x += labelOptions.x;
+                ret.y += optionsY;
 
-        } else {
-            ret = proceed.call(this, x, y, label, horiz, labelOptions, tickmarkOffset, index, step);
-        }
-        return ret;
-    });
-
-    /**
-     * Wrap the getMarkPath function to return the path of the radial marker
-     */
-    wrap(tickProto, 'getMarkPath', function (proceed, x, y, tickLength, tickWidth, horiz, renderer) {
-        var axis = this.axis,
-            endPoint,
-            ret;
-
-        if (axis.isRadial) {
-            endPoint = axis.getPosition(this.pos, axis.center[2] / 2 + tickLength);
-            ret = [
-                'M',
-                x,
-                y,
-                'L',
-                endPoint.x,
-                endPoint.y
-            ];
-        } else {
-            ret = proceed.call(this, x, y, tickLength, tickWidth, horiz, renderer);
-        }
-        return ret;
-    });
-    /*
-     * The AreaRangeSeries class
-     *
-     */
-
-    /**
-     * Extend the default options with map options
-     */
-    defaultPlotOptions.arearange = merge(defaultPlotOptions.area, {
-        lineWidth: 1,
-        marker: null,
-        threshold: null,
-        tooltip: {
-            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.low}</b> - <b>{point.high}</b><br/>'
-        },
-        trackByArea: true,
-        dataLabels: {
-            align: null,
-            verticalAlign: null,
-            xLow: 0,
-            xHigh: 0,
-            yLow: 0,
-            yHigh: 0
-        },
-        states: {
-            hover: {
-                halo: false
+            } else {
+                ret = proceed.call(this, x, y, label, horiz, labelOptions, tickmarkOffset, index, step);
             }
-        }
-    });
-
-    /**
-     * Add the series type
-     */
-    seriesTypes.arearange = extendClass(seriesTypes.area, {
-        type: 'arearange',
-        pointArrayMap: ['low', 'high'],
-        dataLabelCollections: ['dataLabel', 'dataLabelUpper'],
-        toYData: function (point) {
-            return [point.low, point.high];
-        },
-        pointValKey: 'low',
-        deferTranslatePolar: true,
+            return ret;
+        });
 
         /**
-         * Translate a point's plotHigh from the internal angle and radius measures to
-         * true plotHigh coordinates. This is an addition of the toXY method found in
-         * Polar.js, because it runs too early for arearanges to be considered (#3419).
+         * Wrap the getMarkPath function to return the path of the radial marker
          */
-        highToXY: function (point) {
-            // Find the polar plotX and plotY
-            var chart = this.chart,
-                xy = this.xAxis.postTranslate(point.rectPlotX, this.yAxis.len - point.plotHigh);
-            point.plotHighX = xy.x - chart.plotLeft;
-            point.plotHigh = xy.y - chart.plotTop;
-        },
+        wrap(tickProto, 'getMarkPath', function(proceed, x, y, tickLength, tickWidth, horiz, renderer) {
+            var axis = this.axis,
+                endPoint,
+                ret;
 
+            if (axis.isRadial) {
+                endPoint = axis.getPosition(this.pos, axis.center[2] / 2 + tickLength);
+                ret = [
+                    'M',
+                    x,
+                    y,
+                    'L',
+                    endPoint.x,
+                    endPoint.y
+                ];
+            } else {
+                ret = proceed.call(this, x, y, tickLength, tickWidth, horiz, renderer);
+            }
+            return ret;
+        });
+
+    }(Highcharts));
+    (function(H) {
         /**
-         * Translate data points from raw values x and y to plotX and plotY
+         * (c) 2010-2016 Torstein Honsi
+         *
+         * License: www.highcharts.com/license
          */
-        translate: function () {
-            var series = this,
-                yAxis = series.yAxis;
+        'use strict';
+        var each = H.each,
+            noop = H.noop,
+            pick = H.pick,
+            Series = H.Series,
+            seriesType = H.seriesType,
+            seriesTypes = H.seriesTypes;
+        /* 
+         * The arearangeseries series type
+         */
+        seriesType('arearange', 'area', {
 
-            seriesTypes.area.prototype.translate.apply(series);
+            lineWidth: 1,
 
-            // Set plotLow and plotHigh
-            each(series.points, function (point) {
+            marker: null,
+            threshold: null,
+            tooltip: {
 
-                var low = point.low,
-                    high = point.high,
-                    plotY = point.plotY;
+                pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.low}</b> - <b>{point.high}</b><br/>' // eslint-disable-line no-dupe-keys
 
-                if (high === null || low === null) {
-                    point.isNull = true;
-                } else {
-                    point.plotLow = plotY;
-                    point.plotHigh = yAxis.translate(high, 0, 1, 0, 1);
+            },
+            trackByArea: true,
+            dataLabels: {
+                align: null,
+                verticalAlign: null,
+                xLow: 0,
+                xHigh: 0,
+                yLow: 0,
+                yHigh: 0
+            },
+            states: {
+                hover: {
+                    halo: false
                 }
-            });
+            }
+
+            // Prototype members
+        }, {
+            pointArrayMap: ['low', 'high'],
+            dataLabelCollections: ['dataLabel', 'dataLabelUpper'],
+            toYData: function(point) {
+                return [point.low, point.high];
+            },
+            pointValKey: 'low',
+            deferTranslatePolar: true,
+
+            /**
+             * Translate a point's plotHigh from the internal angle and radius measures to
+             * true plotHigh coordinates. This is an addition of the toXY method found in
+             * Polar.js, because it runs too early for arearanges to be considered (#3419).
+             */
+            highToXY: function(point) {
+                // Find the polar plotX and plotY
+                var chart = this.chart,
+                    xy = this.xAxis.postTranslate(point.rectPlotX, this.yAxis.len - point.plotHigh);
+                point.plotHighX = xy.x - chart.plotLeft;
+                point.plotHigh = xy.y - chart.plotTop;
+            },
+
+            /**
+             * Translate data points from raw values x and y to plotX and plotY
+             */
+            translate: function() {
+                var series = this,
+                    yAxis = series.yAxis;
+
+                seriesTypes.area.prototype.translate.apply(series);
+
+                // Set plotLow and plotHigh
+                each(series.points, function(point) {
+
+                    var low = point.low,
+                        high = point.high,
+                        plotY = point.plotY;
+
+                    if (high === null || low === null) {
+                        point.isNull = true;
+                    } else {
+                        point.plotLow = plotY;
+                        point.plotHigh = yAxis.translate(high, 0, 1, 0, 1);
+                    }
+                });
+
+                // Postprocess plotHigh
+                if (this.chart.polar) {
+                    each(this.points, function(point) {
+                        series.highToXY(point);
+                    });
+                }
+            },
+
+            /**
+             * Extend the line series' getSegmentPath method by applying the segment
+             * path to both lower and higher values of the range
+             */
+            getGraphPath: function(points) {
+
+                var highPoints = [],
+                    highAreaPoints = [],
+                    i,
+                    getGraphPath = seriesTypes.area.prototype.getGraphPath,
+                    point,
+                    pointShim,
+                    linePath,
+                    lowerPath,
+                    options = this.options,
+                    step = options.step,
+                    higherPath,
+                    higherAreaPath;
+
+                points = points || this.points;
+                i = points.length;
+
+                // Create the top line and the top part of the area fill. The area fill compensates for 
+                // null points by drawing down to the lower graph, moving across the null gap and 
+                // starting again at the lower graph.
+                i = points.length;
+                while (i--) {
+                    point = points[i];
 
-            // Postprocess plotHigh
-            if (this.chart.polar) {
-                each(this.points, function (point) {
-                    series.highToXY(point);
-                });
-            }
-        },
+                    if (!point.isNull && !options.connectEnds && (!points[i + 1] || points[i + 1].isNull)) {
+                        highAreaPoints.push({
+                            plotX: point.plotX,
+                            plotY: point.plotY,
+                            doCurve: false // #5186, gaps in areasplinerange fill
+                        });
+                    }
 
-        /**
-         * Extend the line series' getSegmentPath method by applying the segment
-         * path to both lower and higher values of the range
-         */
-        getGraphPath: function (points) {
-        
-            var highPoints = [],
-                highAreaPoints = [],
-                i,
-                getGraphPath = seriesTypes.area.prototype.getGraphPath,
-                point,
-                pointShim,
-                linePath,
-                lowerPath,
-                options = this.options,
-                step = options.step,
-                higherPath,
-                higherAreaPath;
-
-            points = points || this.points;
-            i = points.length;
-
-            // Create the top line and the top part of the area fill. The area fill compensates for 
-            // null points by drawing down to the lower graph, moving across the null gap and 
-            // starting again at the lower graph.
-            i = points.length;
-            while (i--) {
-                point = points[i];
-        
-                if (!point.isNull && !options.connectEnds && (!points[i + 1] || points[i + 1].isNull)) {
-                    highAreaPoints.push({
-                        plotX: point.plotX,
-                        plotY: point.plotY,
-                        doCurve: false // #5186, gaps in areasplinerange fill
-                    });
-                }
-            
-                pointShim = {
-                    polarPlotY: point.polarPlotY,
-                    rectPlotX: point.rectPlotX,
-                    yBottom: point.yBottom,
-                    plotX: pick(point.plotHighX, point.plotX), // plotHighX is for polar charts
-                    plotY: point.plotHigh,
-                    isNull: point.isNull
-                };
-                highAreaPoints.push(pointShim);
-                highPoints.push(pointShim);
-                if (!point.isNull && !options.connectEnds && (!points[i - 1] || points[i - 1].isNull)) {
-                    highAreaPoints.push({
-                        plotX: point.plotX,
-                        plotY: point.plotY,
-                        doCurve: false // #5186, gaps in areasplinerange fill
-                    });
+                    pointShim = {
+                        polarPlotY: point.polarPlotY,
+                        rectPlotX: point.rectPlotX,
+                        yBottom: point.yBottom,
+                        plotX: pick(point.plotHighX, point.plotX), // plotHighX is for polar charts
+                        plotY: point.plotHigh,
+                        isNull: point.isNull
+                    };
+                    highAreaPoints.push(pointShim);
+                    highPoints.push(pointShim);
+                    if (!point.isNull && !options.connectEnds && (!points[i - 1] || points[i - 1].isNull)) {
+                        highAreaPoints.push({
+                            plotX: point.plotX,
+                            plotY: point.plotY,
+                            doCurve: false // #5186, gaps in areasplinerange fill
+                        });
+                    }
                 }
-            }
 
-            // Get the paths
-            lowerPath = getGraphPath.call(this, points);
-            if (step) {
-                if (step === true) {
-                    step = 'left';
+                // Get the paths
+                lowerPath = getGraphPath.call(this, points);
+                if (step) {
+                    if (step === true) {
+                        step = 'left';
+                    }
+                    options.step = {
+                        left: 'right',
+                        center: 'center',
+                        right: 'left'
+                    }[step]; // swap for reading in getGraphPath
                 }
-                options.step = { left: 'right', center: 'center', right: 'left' }[step]; // swap for reading in getGraphPath
-            }
-            higherPath = getGraphPath.call(this, highPoints);
-            higherAreaPath = getGraphPath.call(this, highAreaPoints);
-            options.step = step;
+                higherPath = getGraphPath.call(this, highPoints);
+                higherAreaPath = getGraphPath.call(this, highAreaPoints);
+                options.step = step;
 
-            // Create a line on both top and bottom of the range
-            linePath = [].concat(lowerPath, higherPath);
+                // Create a line on both top and bottom of the range
+                linePath = [].concat(lowerPath, higherPath);
 
-            // For the area path, we need to change the 'move' statement into 'lineTo' or 'curveTo'
-            if (!this.chart.polar && higherAreaPath[0] === 'M') {
-                higherAreaPath[0] = 'L'; // this probably doesn't work for spline        
-            }
+                // For the area path, we need to change the 'move' statement into 'lineTo' or 'curveTo'
+                if (!this.chart.polar && higherAreaPath[0] === 'M') {
+                    higherAreaPath[0] = 'L'; // this probably doesn't work for spline			
+                }
 
-            this.graphPath = linePath;
-            this.areaPath = this.areaPath.concat(lowerPath, higherAreaPath);
+                this.graphPath = linePath;
+                this.areaPath = this.areaPath.concat(lowerPath, higherAreaPath);
 
-            // Prepare for sideways animation
-            linePath.isArea = true;
-            linePath.xMap = lowerPath.xMap;
-            this.areaPath.xMap = lowerPath.xMap;
+                // Prepare for sideways animation
+                linePath.isArea = true;
+                linePath.xMap = lowerPath.xMap;
+                this.areaPath.xMap = lowerPath.xMap;
 
-            return linePath;
-        },
+                return linePath;
+            },
 
-        /**
-         * Extend the basic drawDataLabels method by running it for both lower and higher
-         * values.
-         */
-        drawDataLabels: function () {
+            /**
+             * Extend the basic drawDataLabels method by running it for both lower and higher
+             * values.
+             */
+            drawDataLabels: function() {
+
+                var data = this.data,
+                    length = data.length,
+                    i,
+                    originalDataLabels = [],
+                    seriesProto = Series.prototype,
+                    dataLabelOptions = this.options.dataLabels,
+                    align = dataLabelOptions.align,
+                    verticalAlign = dataLabelOptions.verticalAlign,
+                    inside = dataLabelOptions.inside,
+                    point,
+                    up,
+                    inverted = this.chart.inverted;
 
-            var data = this.data,
-                length = data.length,
-                i,
-                originalDataLabels = [],
-                seriesProto = Series.prototype,
-                dataLabelOptions = this.options.dataLabels,
-                align = dataLabelOptions.align,
-                verticalAlign = dataLabelOptions.verticalAlign,
-                inside = dataLabelOptions.inside,
-                point,
-                up,
-                inverted = this.chart.inverted;
-
-            if (dataLabelOptions.enabled || this._hasPointLabels) {
-
-                // Step 1: set preliminary values for plotY and dataLabel and draw the upper labels
-                i = length;
-                while (i--) {
-                    point = data[i];
-                    if (point) {
-                        up = inside ? point.plotHigh < point.plotLow : point.plotHigh > point.plotLow;
-
-                        // Set preliminary values
-                        point.y = point.high;
-                        point._plotY = point.plotY;
-                        point.plotY = point.plotHigh;
-
-                        // Store original data labels and set preliminary label objects to be picked up
-                        // in the uber method
-                        originalDataLabels[i] = point.dataLabel;
-                        point.dataLabel = point.dataLabelUpper;
-
-                        // Set the default offset
-                        point.below = up;
-                        if (inverted) {
-                            if (!align) {
-                                dataLabelOptions.align = up ? 'right' : 'left';
-                            }
-                        } else {
-                            if (!verticalAlign) {
-                                dataLabelOptions.verticalAlign = up ? 'top' : 'bottom';
+                if (dataLabelOptions.enabled || this._hasPointLabels) {
+
+                    // Step 1: set preliminary values for plotY and dataLabel and draw the upper labels
+                    i = length;
+                    while (i--) {
+                        point = data[i];
+                        if (point) {
+                            up = inside ? point.plotHigh < point.plotLow : point.plotHigh > point.plotLow;
+
+                            // Set preliminary values
+                            point.y = point.high;
+                            point._plotY = point.plotY;
+                            point.plotY = point.plotHigh;
+
+                            // Store original data labels and set preliminary label objects to be picked up
+                            // in the uber method
+                            originalDataLabels[i] = point.dataLabel;
+                            point.dataLabel = point.dataLabelUpper;
+
+                            // Set the default offset
+                            point.below = up;
+                            if (inverted) {
+                                if (!align) {
+                                    dataLabelOptions.align = up ? 'right' : 'left';
+                                }
+                            } else {
+                                if (!verticalAlign) {
+                                    dataLabelOptions.verticalAlign = up ? 'top' : 'bottom';
+                                }
                             }
+
+                            dataLabelOptions.x = dataLabelOptions.xHigh;
+                            dataLabelOptions.y = dataLabelOptions.yHigh;
                         }
+                    }
 
-                        dataLabelOptions.x = dataLabelOptions.xHigh;
-                        dataLabelOptions.y = dataLabelOptions.yHigh;
+                    if (seriesProto.drawDataLabels) {
+                        seriesProto.drawDataLabels.apply(this, arguments); // #1209
                     }
-                }
 
-                if (seriesProto.drawDataLabels) {
-                    seriesProto.drawDataLabels.apply(this, arguments); // #1209
-                }
+                    // Step 2: reorganize and handle data labels for the lower values
+                    i = length;
+                    while (i--) {
+                        point = data[i];
+                        if (point) {
+                            up = inside ? point.plotHigh < point.plotLow : point.plotHigh > point.plotLow;
+
+                            // Move the generated labels from step 1, and reassign the original data labels
+                            point.dataLabelUpper = point.dataLabel;
+                            point.dataLabel = originalDataLabels[i];
+
+                            // Reset values
+                            point.y = point.low;
+                            point.plotY = point._plotY;
+
+                            // Set the default offset
+                            point.below = !up;
+                            if (inverted) {
+                                if (!align) {
+                                    dataLabelOptions.align = up ? 'left' : 'right';
+                                }
+                            } else {
+                                if (!verticalAlign) {
+                                    dataLabelOptions.verticalAlign = up ? 'bottom' : 'top';
+                                }
 
-                // Step 2: reorganize and handle data labels for the lower values
-                i = length;
-                while (i--) {
-                    point = data[i];
-                    if (point) {
-                        up = inside ? point.plotHigh < point.plotLow : point.plotHigh > point.plotLow;
-
-                        // Move the generated labels from step 1, and reassign the original data labels
-                        point.dataLabelUpper = point.dataLabel;
-                        point.dataLabel = originalDataLabels[i];
-
-                        // Reset values
-                        point.y = point.low;
-                        point.plotY = point._plotY;
-
-                        // Set the default offset
-                        point.below = !up;
-                        if (inverted) {
-                            if (!align) {
-                                dataLabelOptions.align = up ? 'left' : 'right';
                             }
-                        } else {
-                            if (!verticalAlign) {
-                                dataLabelOptions.verticalAlign = up ? 'bottom' : 'top';
-                            }
-                        
-                        }
 
-                        dataLabelOptions.x = dataLabelOptions.xLow;
-                        dataLabelOptions.y = dataLabelOptions.yLow;
+                            dataLabelOptions.x = dataLabelOptions.xLow;
+                            dataLabelOptions.y = dataLabelOptions.yLow;
+                        }
+                    }
+                    if (seriesProto.drawDataLabels) {
+                        seriesProto.drawDataLabels.apply(this, arguments);
                     }
                 }
-                if (seriesProto.drawDataLabels) {
-                    seriesProto.drawDataLabels.apply(this, arguments);
-                }
-            }
-
-            dataLabelOptions.align = align;
-            dataLabelOptions.verticalAlign = verticalAlign;
-        },
 
-        alignDataLabel: function () {
-            seriesTypes.column.prototype.alignDataLabel.apply(this, arguments);
-        },
+                dataLabelOptions.align = align;
+                dataLabelOptions.verticalAlign = verticalAlign;
+            },
 
-        setStackedPoints: noop,
+            alignDataLabel: function() {
+                seriesTypes.column.prototype.alignDataLabel.apply(this, arguments);
+            },
 
-        getSymbol: noop,
+            setStackedPoints: noop,
 
-        drawPoints: noop
-    });
-    /**
-     * The AreaSplineRangeSeries class
-     */
+            getSymbol: noop,
 
-    defaultPlotOptions.areasplinerange = merge(defaultPlotOptions.arearange);
+            drawPoints: noop
+        });
 
-    /**
-     * AreaSplineRangeSeries object
-     */
-    seriesTypes.areasplinerange = extendClass(seriesTypes.arearange, {
-        type: 'areasplinerange',
-        getPointSpline: seriesTypes.spline.prototype.getPointSpline
-    });
+    }(Highcharts));
+    (function(H) {
+        /**
+         * (c) 2010-2016 Torstein Honsi
+         *
+         * License: www.highcharts.com/license
+         */
+        'use strict';
+        var seriesType = H.seriesType,
+            seriesTypes = H.seriesTypes;
+        /**
+         * The areasplinerange series type
+         */
+        seriesType('areasplinerange', 'arearange', null, {
+            getPointSpline: seriesTypes.spline.prototype.getPointSpline
+        });
 
-    (function () {
+    }(Highcharts));
+    (function(H) {
+        /**
+         * (c) 2010-2016 Torstein Honsi
+         *
+         * License: www.highcharts.com/license
+         */
+        'use strict';
+        var defaultPlotOptions = H.defaultPlotOptions,
+            each = H.each,
+            merge = H.merge,
+            noop = H.noop,
+            pick = H.pick,
+            seriesType = H.seriesType,
+            seriesTypes = H.seriesTypes;
 
         var colProto = seriesTypes.column.prototype;
 
         /**
          * The ColumnRangeSeries class
          */
-        defaultPlotOptions.columnrange = merge(defaultPlotOptions.column, defaultPlotOptions.arearange, {
+        seriesType('columnrange', 'arearange', merge(defaultPlotOptions.column, defaultPlotOptions.arearange, {
             lineWidth: 1,
             pointRange: null
-        });
 
-        /**
-         * ColumnRangeSeries object
-         */
-        seriesTypes.columnrange = extendClass(seriesTypes.arearange, {
-            type: 'columnrange',
+            // Prototype members
+        }), {
             /**
              * Translate data points from raw values x and y to plotX and plotY
              */
-            translate: function () {
+            translate: function() {
                 var series = this,
                     yAxis = series.yAxis,
                     xAxis = series.xAxis,
@@ -1012,7 +1064,7 @@ var arrayMin = Highcharts.arrayMin,
                 colProto.translate.apply(series);
 
                 // Set plotLow and plotHigh
-                each(series.points, function (point) {
+                each(series.points, function(point) {
                     var shapeArgs = point.shapeArgs,
                         minPointLength = series.options.minPointLength,
                         heightDifference,
@@ -1032,7 +1084,7 @@ var arrayMin = Highcharts.arrayMin,
                         height += heightDifference;
                         y -= heightDifference / 2;
 
-                    // Adjust for negative ranges or reversed Y axis (#1457)
+                        // Adjust for negative ranges or reversed Y axis (#1457)
                     } else if (height < 0) {
                         height *= -1;
                         y -= height;
@@ -1049,16 +1101,15 @@ var arrayMin = Highcharts.arrayMin,
                         shapeArgs.height = height;
                         shapeArgs.y = y;
 
-                        point.tooltipPos = chart.inverted ? 
-                            [ 
-                                yAxis.len + yAxis.pos - chart.plotLeft - y - height / 2, 
-                                xAxis.len + xAxis.pos - chart.plotTop - shapeArgs.x - shapeArgs.width / 2, 
-                                height
-                            ] : [
-                                xAxis.left - chart.plotLeft + shapeArgs.x + shapeArgs.width / 2, 
-                                yAxis.pos - chart.plotTop + y + height / 2, 
-                                height
-                            ]; // don't inherit from column tooltip position - #3372
+                        point.tooltipPos = chart.inverted ? [
+                            yAxis.len + yAxis.pos - chart.plotLeft - y - height / 2,
+                            xAxis.len + xAxis.pos - chart.plotTop - shapeArgs.x - shapeArgs.width / 2,
+                            height
+                        ] : [
+                            xAxis.left - chart.plotLeft + shapeArgs.x + shapeArgs.width / 2,
+                            yAxis.pos - chart.plotTop + y + height / 2,
+                            height
+                        ]; // don't inherit from column tooltip position - #3372
                     }
                 });
             },
@@ -1066,1250 +1117,1368 @@ var arrayMin = Highcharts.arrayMin,
             trackerGroups: ['group', 'dataLabelsGroup'],
             drawGraph: noop,
             crispCol: colProto.crispCol,
-            pointAttrToOptions: colProto.pointAttrToOptions,
             drawPoints: colProto.drawPoints,
             drawTracker: colProto.drawTracker,
             getColumnMetrics: colProto.getColumnMetrics,
-            animate: function () {
+            animate: function() {
                 return colProto.animate.apply(this, arguments);
             },
-            polarArc: function () {
+            polarArc: function() {
                 return colProto.polarArc.apply(this, arguments);
-            }
+            },
+            pointAttribs: colProto.pointAttribs
         });
-    }());
-
-    /*
-     * The GaugeSeries class
-     */
-
-
-
-    /**
-     * Extend the default options
-     */
-    defaultPlotOptions.gauge = merge(defaultPlotOptions.line, {
-        dataLabels: {
-            enabled: true,
-            defer: false,
-            y: 15,
-            borderWidth: 1,
-            borderColor: 'silver',
-            borderRadius: 3,
-            crop: false,
-            verticalAlign: 'top',
-            zIndex: 2
-        },
-        dial: {
-            // radius: '80%',
-            // backgroundColor: 'black',
-            // borderColor: 'silver',
-            // borderWidth: 0,
-            // baseWidth: 3,
-            // topWidth: 1,
-            // baseLength: '70%' // of radius
-            // rearLength: '10%'
-        },
-        pivot: {
-            //radius: 5,
-            //borderWidth: 0
-            //borderColor: 'silver',
-            //backgroundColor: 'black'
-        },
-        tooltip: {
-            headerFormat: ''
-        },
-        showInLegend: false
-    });
-
-    /**
-     * Extend the point object
-     */
-    var GaugePoint = extendClass(Point, {
-        /**
-         * Don't do any hover colors or anything
-         */
-        setState: function (state) {
-            this.state = state;
-        }
-    });
-
-
-    /**
-     * Add the series type
-     */
-    var GaugeSeries = {
-        type: 'gauge',
-        pointClass: GaugePoint,
-
-        // chart.angular will be set to true when a gauge series is present, and this will
-        // be used on the axes
-        angular: true,
-        directTouch: true, // #5063
-        drawGraph: noop,
-        fixedBox: true,
-        forceDL: true,
-        noSharedTooltip: true,
-        trackerGroups: ['group', 'dataLabelsGroup'],
 
+    }(Highcharts));
+    (function(H) {
         /**
-         * Calculate paths etc
+         * (c) 2010-2016 Torstein Honsi
+         *
+         * License: www.highcharts.com/license
+         */
+        'use strict';
+        var each = H.each,
+            isNumber = H.isNumber,
+            merge = H.merge,
+            noop = H.noop,
+            pick = H.pick,
+            pInt = H.pInt,
+            Series = H.Series,
+            seriesType = H.seriesType,
+            TrackerMixin = H.TrackerMixin;
+        /* 
+         * The GaugeSeries class
          */
-        translate: function () {
+        seriesType('gauge', 'line', {
+            dataLabels: {
+                enabled: true,
+                defer: false,
+                y: 15,
+                borderRadius: 3,
+                crop: false,
+                verticalAlign: 'top',
+                zIndex: 2,
+
+                // Presentational
+                borderWidth: 1,
+                borderColor: '#cccccc'
 
-            var series = this,
-                yAxis = series.yAxis,
-                options = series.options,
-                center = yAxis.center;
-
-            series.generatePoints();
-
-            each(series.points, function (point) {
-
-                var dialOptions = merge(options.dial, point.dial),
-                    radius = (pInt(pick(dialOptions.radius, 80)) * center[2]) / 200,
-                    baseLength = (pInt(pick(dialOptions.baseLength, 70)) * radius) / 100,
-                    rearLength = (pInt(pick(dialOptions.rearLength, 10)) * radius) / 100,
-                    baseWidth = dialOptions.baseWidth || 3,
-                    topWidth = dialOptions.topWidth || 1,
-                    overshoot = options.overshoot,
-                    rotation = yAxis.startAngleRad + yAxis.translate(point.y, null, null, null, true);
-
-                // Handle the wrap and overshoot options
-                if (isNumber(overshoot)) {
-                    overshoot = overshoot / 180 * Math.PI;
-                    rotation = Math.max(yAxis.startAngleRad - overshoot, Math.min(yAxis.endAngleRad + overshoot, rotation));
-
-                } else if (options.wrap === false) {
-                    rotation = Math.max(yAxis.startAngleRad, Math.min(yAxis.endAngleRad, rotation));
-                }
+            },
+            dial: {
+                // radius: '80%',
+                // baseWidth: 3,
+                // topWidth: 1,
+                // baseLength: '70%' // of radius
+                // rearLength: '10%'
 
-                rotation = rotation * 180 / Math.PI;
+                // backgroundColor: '#000000',
+                // borderColor: '#cccccc',
+                // borderWidth: 0
 
-                point.shapeType = 'path';
-                point.shapeArgs = {
-                    d: dialOptions.path || [
-                        'M',
-                        -rearLength, -baseWidth / 2,
-                        'L',
-                        baseLength, -baseWidth / 2,
-                        radius, -topWidth / 2,
-                        radius, topWidth / 2,
-                        baseLength, baseWidth / 2,
-                        -rearLength, baseWidth / 2,
-                        'z'
-                    ],
-                    translateX: center[0],
-                    translateY: center[1],
-                    rotation: rotation
-                };
 
-                // Positions for data label
-                point.plotX = center[0];
-                point.plotY = center[1];
-            });
-        },
+            },
+            pivot: {
+                //radius: 5,
 
-        /**
-         * Draw the points where each point is one needle
-         */
-        drawPoints: function () {
+                //borderWidth: 0
+                //borderColor: '#cccccc',
+                //backgroundColor: '#000000'
 
-            var series = this,
-                center = series.yAxis.center,
-                pivot = series.pivot,
-                options = series.options,
-                pivotOptions = options.pivot,
-                renderer = series.chart.renderer;
-
-            each(series.points, function (point) {
-
-                var graphic = point.graphic,
-                    shapeArgs = point.shapeArgs,
-                    d = shapeArgs.d,
-                    dialOptions = merge(options.dial, point.dial); // #1233
-
-                if (graphic) {
-                    graphic.animate(shapeArgs);
-                    shapeArgs.d = d; // animate alters it
-                } else {
-                    point.graphic = renderer[point.shapeType](shapeArgs)
-                        .attr({
+            },
+            tooltip: {
+                headerFormat: ''
+            },
+            showInLegend: false
+
+            // Prototype members
+        }, {
+            // chart.angular will be set to true when a gauge series is present, and this will
+            // be used on the axes
+            angular: true,
+            directTouch: true, // #5063
+            drawGraph: noop,
+            fixedBox: true,
+            forceDL: true,
+            noSharedTooltip: true,
+            trackerGroups: ['group', 'dataLabelsGroup'],
+
+            /**
+             * Calculate paths etc
+             */
+            translate: function() {
+
+                var series = this,
+                    yAxis = series.yAxis,
+                    options = series.options,
+                    center = yAxis.center;
+
+                series.generatePoints();
+
+                each(series.points, function(point) {
+
+                    var dialOptions = merge(options.dial, point.dial),
+                        radius = (pInt(pick(dialOptions.radius, 80)) * center[2]) / 200,
+                        baseLength = (pInt(pick(dialOptions.baseLength, 70)) * radius) / 100,
+                        rearLength = (pInt(pick(dialOptions.rearLength, 10)) * radius) / 100,
+                        baseWidth = dialOptions.baseWidth || 3,
+                        topWidth = dialOptions.topWidth || 1,
+                        overshoot = options.overshoot,
+                        rotation = yAxis.startAngleRad + yAxis.translate(point.y, null, null, null, true);
+
+                    // Handle the wrap and overshoot options
+                    if (isNumber(overshoot)) {
+                        overshoot = overshoot / 180 * Math.PI;
+                        rotation = Math.max(yAxis.startAngleRad - overshoot, Math.min(yAxis.endAngleRad + overshoot, rotation));
+
+                    } else if (options.wrap === false) {
+                        rotation = Math.max(yAxis.startAngleRad, Math.min(yAxis.endAngleRad, rotation));
+                    }
+
+                    rotation = rotation * 180 / Math.PI;
+
+                    point.shapeType = 'path';
+                    point.shapeArgs = {
+                        d: dialOptions.path || [
+                            'M', -rearLength, -baseWidth / 2,
+                            'L',
+                            baseLength, -baseWidth / 2,
+                            radius, -topWidth / 2,
+                            radius, topWidth / 2,
+                            baseLength, baseWidth / 2, -rearLength, baseWidth / 2,
+                            'z'
+                        ],
+                        translateX: center[0],
+                        translateY: center[1],
+                        rotation: rotation
+                    };
+
+                    // Positions for data label
+                    point.plotX = center[0];
+                    point.plotY = center[1];
+                });
+            },
+
+            /**
+             * Draw the points where each point is one needle
+             */
+            drawPoints: function() {
+
+                var series = this,
+                    center = series.yAxis.center,
+                    pivot = series.pivot,
+                    options = series.options,
+                    pivotOptions = options.pivot,
+                    renderer = series.chart.renderer;
+
+                each(series.points, function(point) {
+
+                    var graphic = point.graphic,
+                        shapeArgs = point.shapeArgs,
+                        d = shapeArgs.d,
+                        dialOptions = merge(options.dial, point.dial); // #1233
+
+                    if (graphic) {
+                        graphic.animate(shapeArgs);
+                        shapeArgs.d = d; // animate alters it
+                    } else {
+                        point.graphic = renderer[point.shapeType](shapeArgs)
+                            .attr({
+                                rotation: shapeArgs.rotation, // required by VML when animation is false
+                                zIndex: 1
+                            })
+                            .addClass('highcharts-dial')
+                            .add(series.group);
+
+
+                        // Presentational attributes
+                        point.graphic.attr({
                             stroke: dialOptions.borderColor || 'none',
                             'stroke-width': dialOptions.borderWidth || 0,
-                            fill: dialOptions.backgroundColor || 'black',
-                            rotation: shapeArgs.rotation, // required by VML when animation is false
-                            zIndex: 1
+                            fill: dialOptions.backgroundColor || '#000000'
+                        });
+
+                    }
+                });
+
+                // Add or move the pivot
+                if (pivot) {
+                    pivot.animate({ // #1235
+                        translateX: center[0],
+                        translateY: center[1]
+                    });
+                } else {
+                    series.pivot = renderer.circle(0, 0, pick(pivotOptions.radius, 5))
+                        .attr({
+                            zIndex: 2
                         })
+                        .addClass('highcharts-pivot')
+                        .translate(center[0], center[1])
                         .add(series.group);
-                }
-            });
 
-            // Add or move the pivot
-            if (pivot) {
-                pivot.animate({ // #1235
-                    translateX: center[0],
-                    translateY: center[1]
-                });
-            } else {
-                series.pivot = renderer.circle(0, 0, pick(pivotOptions.radius, 5))
-                    .attr({
+
+                    // Presentational attributes
+                    series.pivot.attr({
                         'stroke-width': pivotOptions.borderWidth || 0,
-                        stroke: pivotOptions.borderColor || 'silver',
-                        fill: pivotOptions.backgroundColor || 'black',
-                        zIndex: 2
-                    })
-                    .translate(center[0], center[1])
-                    .add(series.group);
+                        stroke: pivotOptions.borderColor || '#cccccc',
+                        fill: pivotOptions.backgroundColor || '#000000'
+                    });
+
+                }
+            },
+
+            /**
+             * Animate the arrow up from startAngle
+             */
+            animate: function(init) {
+                var series = this;
+
+                if (!init) {
+                    each(series.points, function(point) {
+                        var graphic = point.graphic;
+
+                        if (graphic) {
+                            // start value
+                            graphic.attr({
+                                rotation: series.yAxis.startAngleRad * 180 / Math.PI
+                            });
+
+                            // animate
+                            graphic.animate({
+                                rotation: point.shapeArgs.rotation
+                            }, series.options.animation);
+                        }
+                    });
+
+                    // delete this function to allow it only once
+                    series.animate = null;
+                }
+            },
+
+            render: function() {
+                this.group = this.plotGroup(
+                    'group',
+                    'series',
+                    this.visible ? 'visible' : 'hidden',
+                    this.options.zIndex,
+                    this.chart.seriesGroup
+                );
+                Series.prototype.render.call(this);
+                this.group.clip(this.chart.clipRect);
+            },
+
+            /**
+             * Extend the basic setData method by running processData and generatePoints immediately,
+             * in order to access the points from the legend.
+             */
+            setData: function(data, redraw) {
+                Series.prototype.setData.call(this, data, false);
+                this.processData();
+                this.generatePoints();
+                if (pick(redraw, true)) {
+                    this.chart.redraw();
+                }
+            },
+
+            /**
+             * If the tracking module is loaded, add the point tracker
+             */
+            drawTracker: TrackerMixin && TrackerMixin.drawTrackerPoint
+
+            // Point members
+        }, {
+            /**
+             * Don't do any hover colors or anything
+             */
+            setState: function(state) {
+                this.state = state;
             }
-        },
+        });
 
+    }(Highcharts));
+    (function(H) {
         /**
-         * Animate the arrow up from startAngle
+         * (c) 2010-2016 Torstein Honsi
+         *
+         * License: www.highcharts.com/license
          */
-        animate: function (init) {
-            var series = this;
+        'use strict';
+        var each = H.each,
+            noop = H.noop,
+            pick = H.pick,
+            seriesType = H.seriesType,
+            seriesTypes = H.seriesTypes;
+
+        /* ****************************************************************************
+         * Start Box plot series code											      *
+         *****************************************************************************/
+        seriesType('boxplot', 'column', {
+            threshold: null,
+            tooltip: {
+
+                pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {series.name}</b><br/>' + // eslint-disable-line no-dupe-keys
+                    'Maximum: {point.high}<br/>' +
+                    'Upper quartile: {point.q3}<br/>' +
+                    'Median: {point.median}<br/>' +
+                    'Lower quartile: {point.q1}<br/>' +
+                    'Minimum: {point.low}<br/>'
 
-            if (!init) {
-                each(series.points, function (point) {
-                    var graphic = point.graphic;
+            },
+            whiskerLength: '50%',
 
-                    if (graphic) {
-                        // start value
-                        graphic.attr({
-                            rotation: series.yAxis.startAngleRad * 180 / Math.PI
+            fillColor: '#ffffff',
+            lineWidth: 1,
+            //medianColor: null,
+            medianWidth: 2,
+            states: {
+                hover: {
+                    brightness: -0.3
+                }
+            },
+            //stemColor: null,
+            //stemDashStyle: 'solid'
+            //stemWidth: null,
+
+            //whiskerColor: null,
+            whiskerWidth: 2
+
+
+            // Prototype members
+        }, {
+            pointArrayMap: ['low', 'q1', 'median', 'q3', 'high'], // array point configs are mapped to this
+            toYData: function(point) { // return a plain array for speedy calculation
+                return [point.low, point.q1, point.median, point.q3, point.high];
+            },
+            pointValKey: 'high', // defines the top of the tracker
+
+
+            /**
+             * Get presentational attributes
+             */
+            pointAttribs: function(point) {
+                var options = this.options,
+                    color = (point && point.color) || this.color;
+
+                return {
+                    'fill': options.fillColor || color,
+                    'stroke': options.lineColor || color,
+                    'stroke-width': options.lineWidth || 0
+                };
+            },
+
+
+            /**
+             * Disable data labels for box plot
+             */
+            drawDataLabels: noop,
+
+            /**
+             * Translate data points from raw values x and y to plotX and plotY
+             */
+            translate: function() {
+                var series = this,
+                    yAxis = series.yAxis,
+                    pointArrayMap = series.pointArrayMap;
+
+                seriesTypes.column.prototype.translate.apply(series);
+
+                // do the translation on each point dimension
+                each(series.points, function(point) {
+                    each(pointArrayMap, function(key) {
+                        if (point[key] !== null) {
+                            point[key + 'Plot'] = yAxis.translate(point[key], 0, 1, 0, 1);
+                        }
+                    });
+                });
+            },
+
+            /**
+             * Draw the data points
+             */
+            drawPoints: function() {
+                var series = this, //state = series.state,
+                    points = series.points,
+                    options = series.options,
+                    chart = series.chart,
+                    renderer = chart.renderer,
+                    q1Plot,
+                    q3Plot,
+                    highPlot,
+                    lowPlot,
+                    medianPlot,
+                    medianPath,
+                    crispCorr,
+                    crispX = 0,
+                    boxPath,
+                    width,
+                    left,
+                    right,
+                    halfWidth,
+                    doQuartiles = series.doQuartiles !== false, // error bar inherits this series type but doesn't do quartiles
+                    pointWiskerLength,
+                    whiskerLength = series.options.whiskerLength;
+
+
+                each(points, function(point) {
+
+                    var graphic = point.graphic,
+                        verb = graphic ? 'animate' : 'attr',
+                        shapeArgs = point.shapeArgs; // the box
+
+
+                    var boxAttr,
+                        stemAttr = {},
+                        whiskersAttr = {},
+                        medianAttr = {},
+                        color = point.color || series.color;
+
+
+                    if (point.plotY !== undefined) {
+
+                        // crisp vector coordinates
+                        width = shapeArgs.width;
+                        left = Math.floor(shapeArgs.x);
+                        right = left + width;
+                        halfWidth = Math.round(width / 2);
+                        q1Plot = Math.floor(doQuartiles ? point.q1Plot : point.lowPlot);
+                        q3Plot = Math.floor(doQuartiles ? point.q3Plot : point.lowPlot);
+                        highPlot = Math.floor(point.highPlot);
+                        lowPlot = Math.floor(point.lowPlot);
+
+                        if (!graphic) {
+                            point.graphic = graphic = renderer.g('point')
+                                .add(series.group);
+
+                            point.stem = renderer.path()
+                                .addClass('highcharts-boxplot-stem')
+                                .add(graphic);
+
+                            if (whiskerLength) {
+                                point.whiskers = renderer.path()
+                                    .addClass('highcharts-boxplot-whisker')
+                                    .add(graphic);
+                            }
+                            if (doQuartiles) {
+                                point.box = renderer.path(boxPath)
+                                    .addClass('highcharts-boxplot-box')
+                                    .add(graphic);
+                            }
+                            point.medianShape = renderer.path(medianPath)
+                                .addClass('highcharts-boxplot-median')
+                                .add(graphic);
+
+
+
+
+                            // Stem attributes
+                            stemAttr.stroke = point.stemColor || options.stemColor || color;
+                            stemAttr['stroke-width'] = pick(point.stemWidth, options.stemWidth, options.lineWidth);
+                            stemAttr.dashstyle = point.stemDashStyle || options.stemDashStyle;
+                            point.stem.attr(stemAttr);
+
+                            // Whiskers attributes
+                            if (whiskerLength) {
+                                whiskersAttr.stroke = point.whiskerColor || options.whiskerColor || color;
+                                whiskersAttr['stroke-width'] = pick(point.whiskerWidth, options.whiskerWidth, options.lineWidth);
+                                point.whiskers.attr(whiskersAttr);
+                            }
+
+                            if (doQuartiles) {
+                                boxAttr = series.pointAttribs(point);
+                                point.box.attr(boxAttr);
+                            }
+
+
+                            // Median attributes
+                            medianAttr.stroke = point.medianColor || options.medianColor || color;
+                            medianAttr['stroke-width'] = pick(point.medianWidth, options.medianWidth, options.lineWidth);
+                            point.medianShape.attr(medianAttr);
+
+
+                        }
+
+
+
+                        // The stem
+                        crispCorr = (point.stem.strokeWidth() % 2) / 2;
+                        crispX = left + halfWidth + crispCorr;
+                        point.stem[verb]({
+                            d: [
+                                // stem up
+                                'M',
+                                crispX, q3Plot,
+                                'L',
+                                crispX, highPlot,
+
+                                // stem down
+                                'M',
+                                crispX, q1Plot,
+                                'L',
+                                crispX, lowPlot
+                            ]
                         });
 
-                        // animate
-                        graphic.animate({
-                            rotation: point.shapeArgs.rotation
-                        }, series.options.animation);
+                        // The box
+                        if (doQuartiles) {
+                            crispCorr = (point.box.strokeWidth() % 2) / 2;
+                            q1Plot = Math.floor(q1Plot) + crispCorr;
+                            q3Plot = Math.floor(q3Plot) + crispCorr;
+                            left += crispCorr;
+                            right += crispCorr;
+                            point.box[verb]({
+                                d: [
+                                    'M',
+                                    left, q3Plot,
+                                    'L',
+                                    left, q1Plot,
+                                    'L',
+                                    right, q1Plot,
+                                    'L',
+                                    right, q3Plot,
+                                    'L',
+                                    left, q3Plot,
+                                    'z'
+                                ]
+                            });
+                        }
+
+                        // The whiskers
+                        if (whiskerLength) {
+                            crispCorr = (point.whiskers.strokeWidth() % 2) / 2;
+                            highPlot = highPlot + crispCorr;
+                            lowPlot = lowPlot + crispCorr;
+                            pointWiskerLength = (/%$/).test(whiskerLength) ? halfWidth * parseFloat(whiskerLength) / 100 : whiskerLength / 2;
+                            point.whiskers[verb]({
+                                d: [
+                                    // High whisker
+                                    'M',
+                                    crispX - pointWiskerLength,
+                                    highPlot,
+                                    'L',
+                                    crispX + pointWiskerLength,
+                                    highPlot,
+
+                                    // Low whisker
+                                    'M',
+                                    crispX - pointWiskerLength,
+                                    lowPlot,
+                                    'L',
+                                    crispX + pointWiskerLength,
+                                    lowPlot
+                                ]
+                            });
+                        }
+
+                        // The median
+                        medianPlot = Math.round(point.medianPlot);
+                        crispCorr = (point.medianShape.strokeWidth() % 2) / 2;
+                        medianPlot = medianPlot + crispCorr;
+
+                        point.medianShape[verb]({
+                            d: [
+                                'M',
+                                left,
+                                medianPlot,
+                                'L',
+                                right,
+                                medianPlot
+                            ]
+                        });
                     }
                 });
 
-                // delete this function to allow it only once
-                series.animate = null;
-            }
-        },
-
-        render: function () {
-            this.group = this.plotGroup(
-                'group',
-                'series',
-                this.visible ? 'visible' : 'hidden',
-                this.options.zIndex,
-                this.chart.seriesGroup
-            );
-            Series.prototype.render.call(this);
-            this.group.clip(this.chart.clipRect);
-        },
+            },
+            setStackedPoints: noop // #3890
 
-        /**
-         * Extend the basic setData method by running processData and generatePoints immediately,
-         * in order to access the points from the legend.
-         */
-        setData: function (data, redraw) {
-            Series.prototype.setData.call(this, data, false);
-            this.processData();
-            this.generatePoints();
-            if (pick(redraw, true)) {
-                this.chart.redraw();
-            }
-        },
 
+        });
+
+        /* ****************************************************************************
+         * End Box plot series code												*
+         *****************************************************************************/
+
+    }(Highcharts));
+    (function(H) {
         /**
-         * If the tracking module is loaded, add the point tracker
+         * (c) 2010-2016 Torstein Honsi
+         *
+         * License: www.highcharts.com/license
          */
-        drawTracker: TrackerMixin && TrackerMixin.drawTrackerPoint
-    };
-    seriesTypes.gauge = extendClass(seriesTypes.line, GaugeSeries);
-
-    /* ****************************************************************************
-     * Start Box plot series code                                                  *
-     *****************************************************************************/
-
-    // Set default options
-    defaultPlotOptions.boxplot = merge(defaultPlotOptions.column, {
-        fillColor: '#FFFFFF',
-        lineWidth: 1,
-        //medianColor: null,
-        medianWidth: 2,
-        states: {
-            hover: {
-                brightness: -0.3
+        'use strict';
+        var each = H.each,
+            noop = H.noop,
+            seriesType = H.seriesType,
+            seriesTypes = H.seriesTypes;
+
+
+        /* ****************************************************************************
+         * Start error bar series code                                                *
+         *****************************************************************************/
+        seriesType('errorbar', 'boxplot', {
+
+            color: '#000000',
+
+            grouping: false,
+            linkedTo: ':previous',
+            tooltip: {
+                pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.low}</b> - <b>{point.high}</b><br/>'
+            },
+            whiskerWidth: null
+
+            // Prototype members
+        }, {
+            type: 'errorbar',
+            pointArrayMap: ['low', 'high'], // array point configs are mapped to this
+            toYData: function(point) { // return a plain array for speedy calculation
+                return [point.low, point.high];
+            },
+            pointValKey: 'high', // defines the top of the tracker
+            doQuartiles: false,
+            drawDataLabels: seriesTypes.arearange ? function() {
+                var valKey = this.pointValKey;
+                seriesTypes.arearange.prototype.drawDataLabels.call(this);
+                // Arearange drawDataLabels does not reset point.y to high, but to low after drawing. #4133 
+                each(this.data, function(point) {
+                    point.y = point[valKey];
+                });
+            } : noop,
+
+            /**
+             * Get the width and X offset, either on top of the linked series column
+             * or standalone
+             */
+            getColumnMetrics: function() {
+                return (this.linkedParent && this.linkedParent.columnMetrics) ||
+                    seriesTypes.column.prototype.getColumnMetrics.call(this);
             }
-        },
-        //stemColor: null,
-        //stemDashStyle: 'solid'
-        //stemWidth: null,
-        threshold: null,
-        tooltip: {
-            pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {series.name}</b><br/>' +
-                'Maximum: {point.high}<br/>' +
-                'Upper quartile: {point.q3}<br/>' +
-                'Median: {point.median}<br/>' +
-                'Lower quartile: {point.q1}<br/>' +
-                'Minimum: {point.low}<br/>'
-
-        },
-        //whiskerColor: null,
-        whiskerLength: '50%',
-        whiskerWidth: 2
-    });
-
-    // Create the series object
-    seriesTypes.boxplot = extendClass(seriesTypes.column, {
-        type: 'boxplot',
-        pointArrayMap: ['low', 'q1', 'median', 'q3', 'high'], // array point configs are mapped to this
-        toYData: function (point) { // return a plain array for speedy calculation
-            return [point.low, point.q1, point.median, point.q3, point.high];
-        },
-        pointValKey: 'high', // defines the top of the tracker
+        });
 
-        /**
-         * One-to-one mapping from options to SVG attributes
-         */
-        pointAttrToOptions: { // mapping between SVG attributes and the corresponding options
-            fill: 'fillColor',
-            stroke: 'color',
-            'stroke-width': 'lineWidth'
-        },
+        /* ****************************************************************************
+         * End error bar series code                                                  *
+         *****************************************************************************/
 
+    }(Highcharts));
+    (function(H) {
         /**
-         * Disable data labels for box plot
+         * (c) 2010-2016 Torstein Honsi
+         *
+         * License: www.highcharts.com/license
          */
-        drawDataLabels: noop,
+        'use strict';
+        var correctFloat = H.correctFloat,
+            isNumber = H.isNumber,
+            noop = H.noop,
+            pick = H.pick,
+            Point = H.Point,
+            Series = H.Series,
+            seriesType = H.seriesType,
+            seriesTypes = H.seriesTypes;
+
+        /* ****************************************************************************
+         * Start Waterfall series code                                                *
+         *****************************************************************************/
+        seriesType('waterfall', 'column', {
+            dataLabels: {
+                inside: true
+            },
 
-        /**
-         * Translate data points from raw values x and y to plotX and plotY
-         */
-        translate: function () {
-            var series = this,
-                yAxis = series.yAxis,
-                pointArrayMap = series.pointArrayMap;
+            lineWidth: 1,
+            lineColor: '#333333',
+            dashStyle: 'dot',
+            borderColor: '#333333',
+            states: {
+                hover: {
+                    lineWidthPlus: 0 // #3126
+                }
+            }
 
-            seriesTypes.column.prototype.translate.apply(series);
 
-            // do the translation on each point dimension
-            each(series.points, function (point) {
-                each(pointArrayMap, function (key) {
-                    if (point[key] !== null) {
-                        point[key + 'Plot'] = yAxis.translate(point[key], 0, 1, 0, 1);
+            // Prototype members
+        }, {
+            pointValKey: 'y',
+
+            /**
+             * Translate data points from raw values
+             */
+            translate: function() {
+                var series = this,
+                    options = series.options,
+                    yAxis = series.yAxis,
+                    len,
+                    i,
+                    points,
+                    point,
+                    shapeArgs,
+                    stack,
+                    y,
+                    yValue,
+                    previousY,
+                    previousIntermediate,
+                    range,
+                    minPointLength = pick(options.minPointLength, 5),
+                    threshold = options.threshold,
+                    stacking = options.stacking,
+                    tooltipY;
+
+                // run column series translate
+                seriesTypes.column.prototype.translate.apply(this);
+                series.minPointLengthOffset = 0;
+
+                previousY = previousIntermediate = threshold;
+                points = series.points;
+
+                for (i = 0, len = points.length; i < len; i++) {
+                    // cache current point object
+                    point = points[i];
+                    yValue = this.processedYData[i];
+                    shapeArgs = point.shapeArgs;
+
+                    // get current stack
+                    stack = stacking && yAxis.stacks[(series.negStacks && yValue < threshold ? '-' : '') + series.stackKey];
+                    range = stack ?
+                        stack[point.x].points[series.index + ',' + i] : [0, yValue];
+
+                    // override point value for sums
+                    // #3710 Update point does not propagate to sum
+                    if (point.isSum) {
+                        point.y = correctFloat(yValue);
+                    } else if (point.isIntermediateSum) {
+                        point.y = correctFloat(yValue - previousIntermediate); // #3840
                     }
-                });
-            });
-        },
+                    // up points
+                    y = Math.max(previousY, previousY + point.y) + range[0];
+                    shapeArgs.y = yAxis.toPixels(y, true);
 
-        /**
-         * Draw the data points
-         */
-        drawPoints: function () {
-            var series = this,  //state = series.state,
-                points = series.points,
-                options = series.options,
-                chart = series.chart,
-                renderer = chart.renderer,
-                pointAttr,
-                q1Plot,
-                q3Plot,
-                highPlot,
-                lowPlot,
-                medianPlot,
-                crispCorr,
-                crispX,
-                graphic,
-                stemPath,
-                stemAttr,
-                boxPath,
-                whiskersPath,
-                whiskersAttr,
-                medianPath,
-                medianAttr,
-                width,
-                left,
-                right,
-                halfWidth,
-                shapeArgs,
-                color,
-                doQuartiles = series.doQuartiles !== false, // error bar inherits this series type but doesn't do quartiles
-                pointWiskerLength,
-                whiskerLength = series.options.whiskerLength;
-
-
-            each(points, function (point) {
-
-                graphic = point.graphic;
-                shapeArgs = point.shapeArgs; // the box
-                stemAttr = {};
-                whiskersAttr = {};
-                medianAttr = {};
-                color = point.color || series.color;
-
-                if (point.plotY !== UNDEFINED) {
-
-                    pointAttr = point.pointAttr[point.selected ? 'selected' : ''];
-
-                    // crisp vector coordinates
-                    width = shapeArgs.width;
-                    left = mathFloor(shapeArgs.x);
-                    right = left + width;
-                    halfWidth = mathRound(width / 2);
-                    //crispX = mathRound(left + halfWidth) + crispCorr;
-                    q1Plot = mathFloor(doQuartiles ? point.q1Plot : point.lowPlot);// + crispCorr;
-                    q3Plot = mathFloor(doQuartiles ? point.q3Plot : point.lowPlot);// + crispCorr;
-                    highPlot = mathFloor(point.highPlot);// + crispCorr;
-                    lowPlot = mathFloor(point.lowPlot);// + crispCorr;
-
-                    // Stem attributes
-                    stemAttr.stroke = point.stemColor || options.stemColor || color;
-                    stemAttr['stroke-width'] = pick(point.stemWidth, options.stemWidth, options.lineWidth);
-                    stemAttr.dashstyle = point.stemDashStyle || options.stemDashStyle;
-
-                    // Whiskers attributes
-                    whiskersAttr.stroke = point.whiskerColor || options.whiskerColor || color;
-                    whiskersAttr['stroke-width'] = pick(point.whiskerWidth, options.whiskerWidth, options.lineWidth);
-
-                    // Median attributes
-                    medianAttr.stroke = point.medianColor || options.medianColor || color;
-                    medianAttr['stroke-width'] = pick(point.medianWidth, options.medianWidth, options.lineWidth);
-
-                    // The stem
-                    crispCorr = (stemAttr['stroke-width'] % 2) / 2;
-                    crispX = left + halfWidth + crispCorr;
-                    stemPath = [
-                        // stem up
-                        'M',
-                        crispX, q3Plot,
-                        'L',
-                        crispX, highPlot,
 
-                        // stem down
-                        'M',
-                        crispX, q1Plot,
-                        'L',
-                        crispX, lowPlot
-                    ];
+                    // sum points
+                    if (point.isSum) {
+                        shapeArgs.y = yAxis.toPixels(range[1], true);
+                        shapeArgs.height = Math.min(yAxis.toPixels(range[0], true), yAxis.len) - shapeArgs.y + series.minPointLengthOffset; // #4256
 
-                    // The box
-                    if (doQuartiles) {
-                        crispCorr = (pointAttr['stroke-width'] % 2) / 2;
-                        crispX = mathFloor(crispX) + crispCorr;
-                        q1Plot = mathFloor(q1Plot) + crispCorr;
-                        q3Plot = mathFloor(q3Plot) + crispCorr;
-                        left += crispCorr;
-                        right += crispCorr;
-                        boxPath = [
-                            'M',
-                            left, q3Plot,
-                            'L',
-                            left, q1Plot,
-                            'L',
-                            right, q1Plot,
-                            'L',
-                            right, q3Plot,
-                            'L',
-                            left, q3Plot,
-                            'z'
-                        ];
+                    } else if (point.isIntermediateSum) {
+                        shapeArgs.y = yAxis.toPixels(range[1], true);
+                        shapeArgs.height = Math.min(yAxis.toPixels(previousIntermediate, true), yAxis.len) - shapeArgs.y + series.minPointLengthOffset;
+                        previousIntermediate = range[1];
+
+                        // If it's not the sum point, update previous stack end position and get
+                        // shape height (#3886)
+                    } else {
+                        shapeArgs.height = yValue > 0 ?
+                            yAxis.toPixels(previousY, true) - shapeArgs.y :
+                            yAxis.toPixels(previousY, true) - yAxis.toPixels(previousY - yValue, true);
+                        previousY += yValue;
+                    }
+                    // #3952 Negative sum or intermediate sum not rendered correctly
+                    if (shapeArgs.height < 0) {
+                        shapeArgs.y += shapeArgs.height;
+                        shapeArgs.height *= -1;
                     }
 
-                    // The whiskers
-                    if (whiskerLength) {
-                        crispCorr = (whiskersAttr['stroke-width'] % 2) / 2;
-                        highPlot = highPlot + crispCorr;
-                        lowPlot = lowPlot + crispCorr;
-                        pointWiskerLength = (/%$/).test(whiskerLength) ? halfWidth * parseFloat(whiskerLength) / 100 : whiskerLength / 2;
-                        whiskersPath = [
-                            // High whisker
-                            'M',
-                            crispX - pointWiskerLength,
-                            highPlot,
-                            'L',
-                            crispX + pointWiskerLength,
-                            highPlot,
+                    point.plotY = shapeArgs.y = Math.round(shapeArgs.y) - (series.borderWidth % 2) / 2;
+                    shapeArgs.height = Math.max(Math.round(shapeArgs.height), 0.001); // #3151
+                    point.yBottom = shapeArgs.y + shapeArgs.height;
 
-                            // Low whisker
-                            'M',
-                            crispX - pointWiskerLength,
-                            lowPlot,
-                            'L',
-                            crispX + pointWiskerLength,
-                            lowPlot
-                        ];
+                    if (shapeArgs.height <= minPointLength) {
+                        shapeArgs.height = minPointLength;
+                        series.minPointLengthOffset += minPointLength;
                     }
 
-                    // The median
-                    crispCorr = (medianAttr['stroke-width'] % 2) / 2;
-                    medianPlot = mathRound(point.medianPlot) + crispCorr;
-                    medianPath = [
-                        'M',
-                        left,
-                        medianPlot,
-                        'L',
-                        right,
-                        medianPlot
-                    ];
+                    shapeArgs.y -= series.minPointLengthOffset;
 
-                    // Create or update the graphics
-                    if (graphic) { // update
+                    // Correct tooltip placement (#3014)
+                    tooltipY = point.plotY + (point.negative ? shapeArgs.height : 0) - series.minPointLengthOffset;
+                    if (series.chart.inverted) {
+                        point.tooltipPos[0] = yAxis.len - tooltipY;
+                    } else {
+                        point.tooltipPos[1] = tooltipY;
+                    }
 
-                        point.stem.animate({ d: stemPath });
-                        if (whiskerLength) {
-                            point.whiskers.animate({ d: whiskersPath });
-                        }
-                        if (doQuartiles) {
-                            point.box.animate({ d: boxPath });
-                        }
-                        point.medianShape.animate({ d: medianPath });
+                }
+            },
 
-                    } else { // create new
-                        point.graphic = graphic = renderer.g()
-                            .add(series.group);
+            /**
+             * Call default processData then override yData to reflect waterfall's extremes on yAxis
+             */
+            processData: function(force) {
+                var series = this,
+                    options = series.options,
+                    yData = series.yData,
+                    points = series.options.data, // #3710 Update point does not propagate to sum
+                    point,
+                    dataLength = yData.length,
+                    threshold = options.threshold || 0,
+                    subSum,
+                    sum,
+                    dataMin,
+                    dataMax,
+                    y,
+                    i;
 
-                        point.stem = renderer.path(stemPath)
-                            .attr(stemAttr)
-                            .add(graphic);
+                sum = subSum = dataMin = dataMax = threshold;
 
-                        if (whiskerLength) {
-                            point.whiskers = renderer.path(whiskersPath)
-                                .attr(whiskersAttr)
-                                .add(graphic);
-                        }
-                        if (doQuartiles) {
-                            point.box = renderer.path(boxPath)
-                                .attr(pointAttr)
-                                .add(graphic);
-                        }
-                        point.medianShape = renderer.path(medianPath)
-                            .attr(medianAttr)
-                            .add(graphic);
+                for (i = 0; i < dataLength; i++) {
+                    y = yData[i];
+                    point = points && points[i] ? points[i] : {};
+
+                    if (y === 'sum' || point.isSum) {
+                        yData[i] = correctFloat(sum);
+                    } else if (y === 'intermediateSum' || point.isIntermediateSum) {
+                        yData[i] = correctFloat(subSum);
+                    } else {
+                        sum += y;
+                        subSum += y;
                     }
+                    dataMin = Math.min(sum, dataMin);
+                    dataMax = Math.max(sum, dataMax);
                 }
-            });
-
-        },
-        setStackedPoints: noop // #3890
-
-
-    });
-
-    /* ****************************************************************************
-     * End Box plot series code                                                *
-     *****************************************************************************/
-    /* ****************************************************************************
-     * Start error bar series code                                                *
-     *****************************************************************************/
-
-    // 1 - set default options
-    defaultPlotOptions.errorbar = merge(defaultPlotOptions.boxplot, {
-        color: '#000000',
-        grouping: false,
-        linkedTo: ':previous',
-        tooltip: {
-            pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.low}</b> - <b>{point.high}</b><br/>'
-        },
-        whiskerWidth: null
-    });
-
-    // 2 - Create the series object
-    seriesTypes.errorbar = extendClass(seriesTypes.boxplot, {
-        type: 'errorbar',
-        pointArrayMap: ['low', 'high'], // array point configs are mapped to this
-        toYData: function (point) { // return a plain array for speedy calculation
-            return [point.low, point.high];
-        },
-        pointValKey: 'high', // defines the top of the tracker
-        doQuartiles: false,
-        drawDataLabels: seriesTypes.arearange ? function () {
-            var valKey = this.pointValKey;
-            seriesTypes.arearange.prototype.drawDataLabels.call(this);
-            // Arearange drawDataLabels does not reset point.y to high, but to low after drawing. #4133 
-            each(this.data, function (point) {
-                point.y = point[valKey];
-            });
-        } : noop,
 
-        /**
-         * Get the width and X offset, either on top of the linked series column
-         * or standalone
-         */
-        getColumnMetrics: function () {
-            return (this.linkedParent && this.linkedParent.columnMetrics) ||
-                seriesTypes.column.prototype.getColumnMetrics.call(this);
-        }
-    });
-
-    /* ****************************************************************************
-     * End error bar series code                                                  *
-     *****************************************************************************/
-    /* ****************************************************************************
-     * Start Waterfall series code                                                *
-     *****************************************************************************/
-
-    // 1 - set default options
-    defaultPlotOptions.waterfall = merge(defaultPlotOptions.column, {
-        lineWidth: 1,
-        lineColor: '#333',
-        dashStyle: 'dot',
-        borderColor: '#333',
-        dataLabels: {
-            inside: true
-        },
-        states: {
-            hover: {
-                lineWidthPlus: 0 // #3126
-            }
-        }
-    });
+                Series.prototype.processData.call(this, force);
 
+                // Record extremes
+                series.dataMin = dataMin;
+                series.dataMax = dataMax;
+            },
 
-    // 2 - Create the series object
-    seriesTypes.waterfall = extendClass(seriesTypes.column, {
-        type: 'waterfall',
+            /**
+             * Return y value or string if point is sum
+             */
+            toYData: function(pt) {
+                if (pt.isSum) {
+                    return (pt.x === 0 ? null : 'sum'); //#3245 Error when first element is Sum or Intermediate Sum
+                }
+                if (pt.isIntermediateSum) {
+                    return (pt.x === 0 ? null : 'intermediateSum'); //#3245
+                }
+                return pt.y;
+            },
 
-        upColorProp: 'fill',
 
-        pointValKey: 'y',
+            /**
+             * Postprocess mapping between options and SVG attributes
+             */
+            pointAttribs: function(point, state) {
 
-        /**
-         * Pass the null test in ColumnSeries.translate.
-         */
-        pointClass: extendClass(Point, {
-            isValid: function () {
-                return isNumber(this.y, true) || this.isSum || this.isIntermediateSum;
-            }
-        }),
+                var upColor = this.options.upColor,
+                    attr;
 
-        /**
-         * Translate data points from raw values
-         */
-        translate: function () {
-            var series = this,
-                options = series.options,
-                yAxis = series.yAxis,
-                len,
-                i,
-                points,
-                point,
-                shapeArgs,
-                stack,
-                y,
-                yValue,
-                previousY,
-                previousIntermediate,
-                range,
-                minPointLength = pick(options.minPointLength, 5),
-                threshold = options.threshold,
-                stacking = options.stacking,
-                tooltipY;
-
-            // run column series translate
-            seriesTypes.column.prototype.translate.apply(this);
-            series.minPointLengthOffset = 0;
-
-            previousY = previousIntermediate = threshold;
-            points = series.points;
-
-            for (i = 0, len = points.length; i < len; i++) {
-                // cache current point object
-                point = points[i];
-                yValue = this.processedYData[i];
-                shapeArgs = point.shapeArgs;
-
-                // get current stack
-                stack = stacking && yAxis.stacks[(series.negStacks && yValue < threshold ? '-' : '') + series.stackKey];
-                range = stack ?
-                    stack[point.x].points[series.index + ',' + i] :
-                    [0, yValue];
-
-                // override point value for sums
-                // #3710 Update point does not propagate to sum
-                if (point.isSum) {
-                    point.y = correctFloat(yValue);
-                } else if (point.isIntermediateSum) {
-                    point.y = correctFloat(yValue - previousIntermediate); // #3840
+                // Set or reset up color (#3710, update to negative)
+                if (upColor && !point.options.color) {
+                    point.color = point.y > 0 ? upColor : null;
                 }
-                // up points
-                y = mathMax(previousY, previousY + point.y) + range[0];
-                shapeArgs.y = yAxis.toPixels(y, true);
 
+                attr = seriesTypes.column.prototype.pointAttribs.call(this, point, state);
 
-                // sum points
-                if (point.isSum) {
-                    shapeArgs.y = yAxis.toPixels(range[1], true);
-                    shapeArgs.height = Math.min(yAxis.toPixels(range[0], true), yAxis.len) - shapeArgs.y + series.minPointLengthOffset; // #4256
+                // The dashStyle option in waterfall applies to the graph, not
+                // the points
+                delete attr.dashstyle;
 
-                } else if (point.isIntermediateSum) {
-                    shapeArgs.y = yAxis.toPixels(range[1], true);
-                    shapeArgs.height = Math.min(yAxis.toPixels(previousIntermediate, true), yAxis.len) - shapeArgs.y + series.minPointLengthOffset;
-                    previousIntermediate = range[1];
+                return attr;
+            },
 
-                // If it's not the sum point, update previous stack end position and get
-                // shape height (#3886)
-                } else {
-                    shapeArgs.height = yValue > 0 ?
-                        yAxis.toPixels(previousY, true) - shapeArgs.y :
-                        yAxis.toPixels(previousY, true) - yAxis.toPixels(previousY - yValue, true);
-                    previousY += yValue;
-                }
-                // #3952 Negative sum or intermediate sum not rendered correctly
-                if (shapeArgs.height < 0) {
-                    shapeArgs.y += shapeArgs.height;
-                    shapeArgs.height *= -1;
-                }
 
-                point.plotY = shapeArgs.y = mathRound(shapeArgs.y) - (series.borderWidth % 2) / 2;
-                shapeArgs.height = mathMax(mathRound(shapeArgs.height), 0.001); // #3151
-                point.yBottom = shapeArgs.y + shapeArgs.height;
+            /**
+             * Return an empty path initially, because we need to know the stroke-width in order 
+             * to set the final path.
+             */
+            getGraphPath: function() {
+                return ['M', 0, 0];
+            },
 
-                if (shapeArgs.height <= minPointLength) {
-                    shapeArgs.height = minPointLength;
-                    series.minPointLengthOffset += minPointLength;
-                }
+            /**
+             * Draw columns' connector lines
+             */
+            getCrispPath: function() {
+
+                var data = this.data,
+                    length = data.length,
+                    lineWidth = this.graph.strokeWidth() + this.borderWidth,
+                    normalizer = Math.round(lineWidth) % 2 / 2,
+                    path = [],
+                    prevArgs,
+                    pointArgs,
+                    i,
+                    d;
+
+                for (i = 1; i < length; i++) {
+                    pointArgs = data[i].shapeArgs;
+                    prevArgs = data[i - 1].shapeArgs;
+
+                    d = [
+                        'M',
+                        prevArgs.x + prevArgs.width, prevArgs.y + normalizer,
+                        'L',
+                        pointArgs.x, prevArgs.y + normalizer
+                    ];
 
-                shapeArgs.y -= series.minPointLengthOffset;
+                    if (data[i - 1].y < 0) {
+                        d[2] += prevArgs.height;
+                        d[5] += prevArgs.height;
+                    }
 
-                // Correct tooltip placement (#3014)
-                tooltipY = point.plotY + (point.negative ? shapeArgs.height : 0) - series.minPointLengthOffset;
-                if (series.chart.inverted) {
-                    point.tooltipPos[0] = yAxis.len - tooltipY;
-                } else {
-                    point.tooltipPos[1] = tooltipY;
+                    path = path.concat(d);
                 }
 
-            }
-        },
+                return path;
+            },
 
-        /**
-         * Call default processData then override yData to reflect waterfall's extremes on yAxis
-         */
-        processData: function (force) {
-            var series = this,
-                options = series.options,
-                yData = series.yData,
-                points = series.options.data, // #3710 Update point does not propagate to sum
-                point,
-                dataLength = yData.length,
-                threshold = options.threshold || 0,
-                subSum,
-                sum,
-                dataMin,
-                dataMax,
-                y,
-                i;
+            /**
+             * The graph is initally drawn with an empty definition, then updated with
+             * crisp rendering.
+             */
+            drawGraph: function() {
+                Series.prototype.drawGraph.call(this);
+                this.graph.attr({
+                    d: this.getCrispPath()
+                });
+            },
 
-            sum = subSum = dataMin = dataMax = threshold;
+            /**
+             * Extremes are recorded in processData
+             */
+            getExtremes: noop
 
-            for (i = 0; i < dataLength; i++) {
-                y = yData[i];
-                point = points && points[i] ? points[i] : {};
+            // Point members
+        }, {
+            getClassName: function() {
+                var className = Point.prototype.getClassName.call(this);
 
-                if (y === 'sum' || point.isSum) {
-                    yData[i] = correctFloat(sum);
-                } else if (y === 'intermediateSum' || point.isIntermediateSum) {
-                    yData[i] = correctFloat(subSum);
-                } else {
-                    sum += y;
-                    subSum += y;
+                if (this.isSum) {
+                    className += ' highcharts-sum';
+                } else if (this.isIntermediateSum) {
+                    className += ' highcharts-intermediate-sum';
                 }
-                dataMin = Math.min(sum, dataMin);
-                dataMax = Math.max(sum, dataMax);
+                return className;
+            },
+            /**
+             * Pass the null test in ColumnSeries.translate.
+             */
+            isValid: function() {
+                return isNumber(this.y, true) || this.isSum || this.isIntermediateSum;
             }
 
-            Series.prototype.processData.call(this, force);
+        });
 
-            // Record extremes
-            series.dataMin = dataMin;
-            series.dataMax = dataMax;
-        },
+        /* ****************************************************************************
+         * End Waterfall series code                                                  *
+         *****************************************************************************/
 
+    }(Highcharts));
+    (function(H) {
         /**
-         * Return y value or string if point is sum
+         * (c) 2010-2016 Torstein Honsi
+         *
+         * License: www.highcharts.com/license
          */
-        toYData: function (pt) {
-            if (pt.isSum) {
-                return (pt.x === 0 ? null : 'sum'); //#3245 Error when first element is Sum or Intermediate Sum
-            }
-            if (pt.isIntermediateSum) {
-                return (pt.x === 0 ? null : 'intermediateSum'); //#3245
-            }
-            return pt.y;
-        },
-
+        'use strict';
+        var LegendSymbolMixin = H.LegendSymbolMixin,
+            noop = H.noop,
+            Series = H.Series,
+            seriesType = H.seriesType,
+            seriesTypes = H.seriesTypes;
         /**
-         * Postprocess mapping between options and SVG attributes
+         * The polygon series prototype
          */
-        getAttribs: function () {
-            seriesTypes.column.prototype.getAttribs.apply(this, arguments);
-
-            var series = this,
-                options = series.options,
-                stateOptions = options.states,
-                upColor = options.upColor || series.color,
-                hoverColor = Highcharts.Color(upColor).brighten(options.states.hover.brightness).get(),
-                seriesDownPointAttr = merge(series.pointAttr),
-                upColorProp = series.upColorProp;
-
-            seriesDownPointAttr[''][upColorProp] = upColor;
-            seriesDownPointAttr.hover[upColorProp] = stateOptions.hover.upColor || hoverColor;
-            seriesDownPointAttr.select[upColorProp] = stateOptions.select.upColor || upColor;
-
-            each(series.points, function (point) {
-                if (!point.options.color) {
-                    // Up color
-                    if (point.y > 0) {
-                        point.pointAttr = seriesDownPointAttr;
-                        point.color = upColor;
-
-                    // Down color (#3710, update to negative)
-                    } else {
-                        point.pointAttr = series.pointAttr;
+        seriesType('polygon', 'scatter', {
+            marker: {
+                enabled: false,
+                states: {
+                    hover: {
+                        enabled: false
                     }
                 }
-            });
-        },
-
-        /**
-         * Draw columns' connector lines
-         */
-        getGraphPath: function () {
-
-            var data = this.data,
-                length = data.length,
-                lineWidth = this.options.lineWidth + this.borderWidth,
-                normalizer = mathRound(lineWidth) % 2 / 2,
-                path = [],
-                M = 'M',
-                L = 'L',
-                prevArgs,
-                pointArgs,
-                i,
-                d;
+            },
+            stickyTracking: false,
+            tooltip: {
+                followPointer: true,
+                pointFormat: ''
+            },
+            trackByArea: true
 
-            for (i = 1; i < length; i++) {
-                pointArgs = data[i].shapeArgs;
-                prevArgs = data[i - 1].shapeArgs;
+            // Prototype members
+        }, {
+            type: 'polygon',
+            getGraphPath: function() {
 
-                d = [
-                    M,
-                    prevArgs.x + prevArgs.width, prevArgs.y + normalizer,
-                    L,
-                    pointArgs.x, prevArgs.y + normalizer
-                ];
+                var graphPath = Series.prototype.getGraphPath.call(this),
+                    i = graphPath.length + 1;
 
-                if (data[i - 1].y < 0) {
-                    d[2] += prevArgs.height;
-                    d[5] += prevArgs.height;
+                // Close all segments
+                while (i--) {
+                    if ((i === graphPath.length || graphPath[i] === 'M') && i > 0) {
+                        graphPath.splice(i, 0, 'z');
+                    }
                 }
+                this.areaPath = graphPath;
+                return graphPath;
+            },
+            drawGraph: function() {
 
-                path = path.concat(d);
-            }
+                this.options.fillColor = this.color; // Hack into the fill logic in area.drawGraph
 
-            return path;
-        },
+                seriesTypes.area.prototype.drawGraph.call(this);
+            },
+            drawLegendSymbol: LegendSymbolMixin.drawRectangle,
+            drawTracker: Series.prototype.drawTracker,
+            setStackedPoints: noop // No stacking points on polygons (#5310)
+        });
 
+    }(Highcharts));
+    (function(H) {
         /**
-         * Extremes are recorded in processData
+         * (c) 2010-2016 Torstein Honsi
+         *
+         * License: www.highcharts.com/license
          */
-        getExtremes: noop,
-
-        drawGraph: Series.prototype.drawGraph
-    });
-
-    /* ****************************************************************************
-     * End Waterfall series code                                                  *
-     *****************************************************************************/
-    /**
-     * Set the default options for polygon
-     */
-    defaultPlotOptions.polygon = merge(defaultPlotOptions.scatter, {
-        marker: {
-            enabled: false,
+        'use strict';
+        var arrayMax = H.arrayMax,
+            arrayMin = H.arrayMin,
+            Axis = H.Axis,
+            color = H.color,
+            each = H.each,
+            isNumber = H.isNumber,
+            noop = H.noop,
+            pick = H.pick,
+            pInt = H.pInt,
+            Point = H.Point,
+            Series = H.Series,
+            seriesType = H.seriesType,
+            seriesTypes = H.seriesTypes;
+
+        /* ****************************************************************************
+         * Start Bubble series code											          *
+         *****************************************************************************/
+
+        seriesType('bubble', 'scatter', {
+            dataLabels: {
+                formatter: function() { // #2945
+                    return this.point.z;
+                },
+                inside: true,
+                verticalAlign: 'middle'
+            },
+            // displayNegative: true,
+            marker: {
+
+                // fillOpacity: 0.5,
+                lineColor: null, // inherit from series.color
+                lineWidth: 1,
+
+                // Avoid offset in Point.setState
+                radius: null,
+                states: {
+                    hover: {
+                        radiusPlus: 0
+                    }
+                }
+            },
+            minSize: 8,
+            maxSize: '20%',
+            // negativeColor: null,
+            // sizeBy: 'area'
+            softThreshold: false,
             states: {
                 hover: {
-                    enabled: false
-                }
-            }
-        },
-        stickyTracking: false,
-        tooltip: {
-            followPointer: true,
-            pointFormat: ''
-        },
-        trackByArea: true
-    });
-
-    /**
-     * The polygon series class
-     */
-    seriesTypes.polygon = extendClass(seriesTypes.scatter, {
-        type: 'polygon',
-        getGraphPath: function () {
-
-            var graphPath = Series.prototype.getGraphPath.call(this),
-                i = graphPath.length + 1;
-
-            // Close all segments
-            while (i--) {
-                if ((i === graphPath.length || graphPath[i] === 'M') && i > 0) {
-                    graphPath.splice(i, 0, 'z');
-                }
-            }
-            this.areaPath = graphPath;
-            return graphPath;
-        },
-        drawGraph: function () {
-            this.options.fillColor = this.color; // Hack into the fill logic in area.drawGraph
-            seriesTypes.area.prototype.drawGraph.call(this);
-        },
-        drawLegendSymbol: Highcharts.LegendSymbolMixin.drawRectangle,
-        drawTracker: Series.prototype.drawTracker,
-        setStackedPoints: noop // No stacking points on polygons (#5310)
-    });
-    /* ****************************************************************************
-     * Start Bubble series code                                                      *
-     *****************************************************************************/
-
-    // 1 - set default options
-    defaultPlotOptions.bubble = merge(defaultPlotOptions.scatter, {
-        dataLabels: {
-            formatter: function () { // #2945
-                return this.point.z;
-            },
-            inside: true,
-            verticalAlign: 'middle'
-        },
-        // displayNegative: true,
-        marker: {
-            // fillOpacity: 0.5,
-            lineColor: null, // inherit from series.color
-            lineWidth: 1
-        },
-        minSize: 8,
-        maxSize: '20%',
-        // negativeColor: null,
-        // sizeBy: 'area'
-        softThreshold: false,
-        states: {
-            hover: {
-                halo: {
-                    size: 5
+                    halo: {
+                        size: 5
+                    }
                 }
-            }
-        },
-        tooltip: {
-            pointFormat: '({point.x}, {point.y}), Size: {point.z}'
-        },
-        turboThreshold: 0,
-        zThreshold: 0,
-        zoneAxis: 'z'
-    });
-
-    var BubblePoint = extendClass(Point, {
-        haloPath: function () {
-            return Point.prototype.haloPath.call(this, this.shapeArgs.r + this.series.options.states.hover.halo.size);
-        },
-        ttBelow: false
-    });
-
-    // 2 - Create the series object
-    seriesTypes.bubble = extendClass(seriesTypes.scatter, {
-        type: 'bubble',
-        pointClass: BubblePoint,
-        pointArrayMap: ['y', 'z'],
-        parallelArrays: ['x', 'y', 'z'],
-        trackerGroups: ['group', 'dataLabelsGroup'],
-        bubblePadding: true,
-        zoneAxis: 'z',
+            },
+            tooltip: {
+                pointFormat: '({point.x}, {point.y}), Size: {point.z}'
+            },
+            turboThreshold: 0,
+            zThreshold: 0,
+            zoneAxis: 'z'
+
+            // Prototype members
+        }, {
+            pointArrayMap: ['y', 'z'],
+            parallelArrays: ['x', 'y', 'z'],
+            trackerGroups: ['group', 'dataLabelsGroup'],
+            bubblePadding: true,
+            zoneAxis: 'z',
 
-        /**
-         * Mapping between SVG attributes and the corresponding options
-         */
-        pointAttrToOptions: {
-            stroke: 'lineColor',
-            'stroke-width': 'lineWidth',
-            fill: 'fillColor'
-        },
 
-        /**
-         * Apply the fillOpacity to all fill positions
-         */
-        applyOpacity: function (fill) {
-            var markerOptions = this.options.marker,
-                fillOpacity = pick(markerOptions.fillOpacity, 0.5);
+            pointAttribs: function(point, state) {
+                var markerOptions = this.options.marker,
+                    fillOpacity = pick(markerOptions.fillOpacity, 0.5),
+                    attr = Series.prototype.pointAttribs.call(this, point, state);
 
-            // When called from Legend.colorizeItem, the fill isn't predefined
-            fill = fill || markerOptions.fillColor || this.color;
+                if (fillOpacity !== 1) {
+                    attr.fill = color(attr.fill).setOpacity(fillOpacity).get('rgba');
+                }
 
-            if (fillOpacity !== 1) {
-                fill = Color(fill).setOpacity(fillOpacity).get('rgba');
-            }
-            return fill;
-        },
+                return attr;
+            },
 
-        /**
-         * Extend the convertAttribs method by applying opacity to the fill
-         */
-        convertAttribs: function () {
-            var obj = Series.prototype.convertAttribs.apply(this, arguments);
 
-            obj.fill = this.applyOpacity(obj.fill);
+            /**
+             * Get the radius for each point based on the minSize, maxSize and each point's Z value. This
+             * must be done prior to Series.translate because the axis needs to add padding in
+             * accordance with the point sizes.
+             */
+            getRadii: function(zMin, zMax, minSize, maxSize) {
+                var len,
+                    i,
+                    pos,
+                    zData = this.zData,
+                    radii = [],
+                    options = this.options,
+                    sizeByArea = options.sizeBy !== 'width',
+                    zThreshold = options.zThreshold,
+                    zRange = zMax - zMin,
+                    value,
+                    radius;
+
+                // Set the shape type and arguments to be picked up in drawPoints
+                for (i = 0, len = zData.length; i < len; i++) {
+
+                    value = zData[i];
+
+                    // When sizing by threshold, the absolute value of z determines the size
+                    // of the bubble.
+                    if (options.sizeByAbsoluteValue && value !== null) {
+                        value = Math.abs(value - zThreshold);
+                        zMax = Math.max(zMax - zThreshold, Math.abs(zMin - zThreshold));
+                        zMin = 0;
+                    }
 
-            return obj;
-        },
+                    if (value === null) {
+                        radius = null;
+                        // Issue #4419 - if value is less than zMin, push a radius that's always smaller than the minimum size
+                    } else if (value < zMin) {
+                        radius = minSize / 2 - 1;
+                    } else {
+                        // Relative size, a number between 0 and 1
+                        pos = zRange > 0 ? (value - zMin) / zRange : 0.5;
 
-        /**
-         * Get the radius for each point based on the minSize, maxSize and each point's Z value. This
-         * must be done prior to Series.translate because the axis needs to add padding in
-         * accordance with the point sizes.
-         */
-        getRadii: function (zMin, zMax, minSize, maxSize) {
-            var len,
-                i,
-                pos,
-                zData = this.zData,
-                radii = [],
-                options = this.options,
-                sizeByArea = options.sizeBy !== 'width',
-                zThreshold = options.zThreshold,
-                zRange = zMax - zMin,
-                value,
-                radius;
-
-            // Set the shape type and arguments to be picked up in drawPoints
-            for (i = 0, len = zData.length; i < len; i++) {
-
-                value = zData[i];
-
-                // When sizing by threshold, the absolute value of z determines the size
-                // of the bubble.
-                if (options.sizeByAbsoluteValue && value !== null) {
-                    value = Math.abs(value - zThreshold);
-                    zMax = Math.max(zMax - zThreshold, Math.abs(zMin - zThreshold));
-                    zMin = 0;
+                        if (sizeByArea && pos >= 0) {
+                            pos = Math.sqrt(pos);
+                        }
+                        radius = Math.ceil(minSize + pos * (maxSize - minSize)) / 2;
+                    }
+                    radii.push(radius);
                 }
+                this.radii = radii;
+            },
 
-                if (value === null) {
-                    radius = null;
-                // Issue #4419 - if value is less than zMin, push a radius that's always smaller than the minimum size
-                } else if (value < zMin) {
-                    radius = minSize / 2 - 1;
-                } else {
-                    // Relative size, a number between 0 and 1
-                    pos = zRange > 0 ? (value - zMin) / zRange : 0.5;
+            /**
+             * Perform animation on the bubbles
+             */
+            animate: function(init) {
+                var animation = this.options.animation;
+
+                if (!init) { // run the animation
+                    each(this.points, function(point) {
+                        var graphic = point.graphic,
+                            shapeArgs = point.shapeArgs;
+
+                        if (graphic && shapeArgs) {
+                            // start values
+                            graphic.attr('r', 1);
+
+                            // animate
+                            graphic.animate({
+                                r: shapeArgs.r
+                            }, animation);
+                        }
+                    });
 
-                    if (sizeByArea && pos >= 0) {
-                        pos = Math.sqrt(pos);
-                    }
-                    radius = math.ceil(minSize + pos * (maxSize - minSize)) / 2;
+                    // delete this function to allow it only once
+                    this.animate = null;
                 }
-                radii.push(radius);
-            }
-            this.radii = radii;
-        },
+            },
 
-        /**
-         * Perform animation on the bubbles
-         */
-        animate: function (init) {
-            var animation = this.options.animation;
+            /**
+             * Extend the base translate method to handle bubble size
+             */
+            translate: function() {
 
-            if (!init) { // run the animation
-                each(this.points, function (point) {
-                    var graphic = point.graphic,
-                        shapeArgs = point.shapeArgs;
+                var i,
+                    data = this.data,
+                    point,
+                    radius,
+                    radii = this.radii;
+
+                // Run the parent method
+                seriesTypes.scatter.prototype.translate.call(this);
+
+                // Set the shape type and arguments to be picked up in drawPoints
+                i = data.length;
 
-                    if (graphic && shapeArgs) {
-                        // start values
-                        graphic.attr('r', 1);
+                while (i--) {
+                    point = data[i];
+                    radius = radii ? radii[i] : 0; // #1737
+
+                    if (isNumber(radius) && radius >= this.minPxSize / 2) {
+                        // Shape arguments
+                        point.shapeType = 'circle';
+                        point.shapeArgs = {
+                            x: point.plotX,
+                            y: point.plotY,
+                            r: radius
+                        };
 
-                        // animate
-                        graphic.animate({
-                            r: shapeArgs.r
-                        }, animation);
+                        // Alignment box for the data label
+                        point.dlBox = {
+                            x: point.plotX - radius,
+                            y: point.plotY - radius,
+                            width: 2 * radius,
+                            height: 2 * radius
+                        };
+                    } else { // below zThreshold
+                        point.shapeArgs = point.plotY = point.dlBox = undefined; // #1691
                     }
-                });
+                }
+            },
 
-                // delete this function to allow it only once
-                this.animate = null;
-            }
-        },
+            /**
+             * Get the series' symbol in the legend
+             *
+             * @param {Object} legend The legend object
+             * @param {Object} item The series (this) or point
+             */
+            drawLegendSymbol: function(legend, item) {
+                var renderer = this.chart.renderer,
+                    radius = renderer.fontMetrics(legend.itemStyle.fontSize).f / 2;
+
+                item.legendSymbol = renderer.circle(
+                    radius,
+                    legend.baseline - radius,
+                    radius
+                ).attr({
+                    zIndex: 3
+                }).add(item.legendGroup);
+                item.legendSymbol.isMarker = true;
+
+            },
+
+            drawPoints: seriesTypes.column.prototype.drawPoints,
+            alignDataLabel: seriesTypes.column.prototype.alignDataLabel,
+            buildKDTree: noop,
+            applyZones: noop
+
+            // Point class
+        }, {
+            haloPath: function() {
+                return Point.prototype.haloPath.call(this, this.shapeArgs.r + this.series.options.states.hover.halo.size);
+            },
+            ttBelow: false
+        });
 
         /**
-         * Extend the base translate method to handle bubble size
+         * Add logic to pad each axis with the amount of pixels
+         * necessary to avoid the bubbles to overflow.
          */
-        translate: function () {
+        Axis.prototype.beforePadding = function() {
+            var axis = this,
+                axisLength = this.len,
+                chart = this.chart,
+                pxMin = 0,
+                pxMax = axisLength,
+                isXAxis = this.isXAxis,
+                dataKey = isXAxis ? 'xData' : 'yData',
+                min = this.min,
+                extremes = {},
+                smallestSize = Math.min(chart.plotWidth, chart.plotHeight),
+                zMin = Number.MAX_VALUE,
+                zMax = -Number.MAX_VALUE,
+                range = this.max - min,
+                transA = axisLength / range,
+                activeSeries = [];
 
-            var i,
-                data = this.data,
-                point,
-                radius,
-                radii = this.radii;
+            // Handle padding on the second pass, or on redraw
+            each(this.series, function(series) {
 
-            // Run the parent method
-            seriesTypes.scatter.prototype.translate.call(this);
+                var seriesOptions = series.options,
+                    zData;
 
-            // Set the shape type and arguments to be picked up in drawPoints
-            i = data.length;
+                if (series.bubblePadding && (series.visible || !chart.options.chart.ignoreHiddenSeries)) {
 
-            while (i--) {
-                point = data[i];
-                radius = radii ? radii[i] : 0; // #1737
+                    // Correction for #1673
+                    axis.allowZoomOutside = true;
 
-                if (isNumber(radius) && radius >= this.minPxSize / 2) {
-                    // Shape arguments
-                    point.shapeType = 'circle';
-                    point.shapeArgs = {
-                        x: point.plotX,
-                        y: point.plotY,
-                        r: radius
-                    };
+                    // Cache it
+                    activeSeries.push(series);
 
-                    // Alignment box for the data label
-                    point.dlBox = {
-                        x: point.plotX - radius,
-                        y: point.plotY - radius,
-                        width: 2 * radius,
-                        height: 2 * radius
-                    };
-                } else { // below zThreshold or z = null
-                    point.shapeArgs = point.plotY = point.dlBox = UNDEFINED; // #1691
-                }
-            }
-        },
+                    if (isXAxis) { // because X axis is evaluated first
 
-        /**
-         * Get the series' symbol in the legend
-         *
-         * @param {Object} legend The legend object
-         * @param {Object} item The series (this) or point
-         */
-        drawLegendSymbol: function (legend, item) {
-            var renderer = this.chart.renderer,
-                radius = renderer.fontMetrics(legend.itemStyle.fontSize).f / 2;
-
-            item.legendSymbol = renderer.circle(
-                radius,
-                legend.baseline - radius,
-                radius
-            ).attr({
-                zIndex: 3
-            }).add(item.legendGroup);
-            item.legendSymbol.isMarker = true;
-
-        },
-
-        drawPoints: seriesTypes.column.prototype.drawPoints,
-        alignDataLabel: seriesTypes.column.prototype.alignDataLabel,
-        buildKDTree: noop,
-        applyZones: noop
-    });
-
-    /**
-     * Add logic to pad each axis with the amount of pixels
-     * necessary to avoid the bubbles to overflow.
-     */
-    Axis.prototype.beforePadding = function () {
-        var axis = this,
-            axisLength = this.len,
-            chart = this.chart,
-            pxMin = 0,
-            pxMax = axisLength,
-            isXAxis = this.isXAxis,
-            dataKey = isXAxis ? 'xData' : 'yData',
-            min = this.min,
-            extremes = {},
-            smallestSize = math.min(chart.plotWidth, chart.plotHeight),
-            zMin = Number.MAX_VALUE,
-            zMax = -Number.MAX_VALUE,
-            range = this.max - min,
-            transA = axisLength / range,
-            activeSeries = [];
-
-        // Handle padding on the second pass, or on redraw
-        each(this.series, function (series) {
-
-            var seriesOptions = series.options,
-                zData;
-
-            if (series.bubblePadding && (series.visible || !chart.options.chart.ignoreHiddenSeries)) {
-
-                // Correction for #1673
-                axis.allowZoomOutside = true;
-
-                // Cache it
-                activeSeries.push(series);
-
-                if (isXAxis) { // because X axis is evaluated first
-
-                    // For each series, translate the size extremes to pixel values
-                    each(['minSize', 'maxSize'], function (prop) {
-                        var length = seriesOptions[prop],
-                            isPercent = /%$/.test(length);
-
-                        length = pInt(length);
-                        extremes[prop] = isPercent ?
-                            smallestSize * length / 100 :
-                            length;
+                        // For each series, translate the size extremes to pixel values
+                        each(['minSize', 'maxSize'], function(prop) {
+                            var length = seriesOptions[prop],
+                                isPercent = /%$/.test(length);
 
-                    });
-                    series.minPxSize = extremes.minSize;
-                    series.maxPxSize = extremes.maxSize;
-
-                    // Find the min and max Z
-                    zData = series.zData;
-                    if (zData.length) { // #1735
-                        zMin = pick(seriesOptions.zMin, math.min(
-                            zMin,
-                            math.max(
-                                arrayMin(zData),
-                                seriesOptions.displayNegative === false ? seriesOptions.zThreshold : -Number.MAX_VALUE
-                            )
-                        ));
-                        zMax = pick(seriesOptions.zMax, math.max(zMax, arrayMax(zData)));
+                            length = pInt(length);
+                            extremes[prop] = isPercent ?
+                                smallestSize * length / 100 :
+                                length;
+
+                        });
+                        series.minPxSize = extremes.minSize;
+                        series.maxPxSize = extremes.maxSize;
+
+                        // Find the min and max Z
+                        zData = series.zData;
+                        if (zData.length) { // #1735
+                            zMin = pick(seriesOptions.zMin, Math.min(
+                                zMin,
+                                Math.max(
+                                    arrayMin(zData),
+                                    seriesOptions.displayNegative === false ? seriesOptions.zThreshold : -Number.MAX_VALUE
+                                )
+                            ));
+                            zMax = pick(seriesOptions.zMax, Math.max(zMax, arrayMax(zData)));
+                        }
                     }
                 }
-            }
-        });
-
-        each(activeSeries, function (series) {
+            });
 
-            var data = series[dataKey],
-                i = data.length,
-                radius;
+            each(activeSeries, function(series) {
 
-            if (isXAxis) {
-                series.getRadii(zMin, zMax, series.minPxSize, series.maxPxSize);
-            }
+                var data = series[dataKey],
+                    i = data.length,
+                    radius;
 
-            if (range > 0) {
-                while (i--) {
-                    if (isNumber(data[i]) && axis.dataMin <= data[i] && data[i] <= axis.dataMax) {
-                        radius = series.radii[i];
-                        pxMin = Math.min(((data[i] - min) * transA) - radius, pxMin);
-                        pxMax = Math.max(((data[i] - min) * transA) + radius, pxMax);
-                    }
+                if (isXAxis) {
+                    series.getRadii(zMin, zMax, series.minPxSize, series.maxPxSize);
                 }
-            }
-        });
-
 
-        if (activeSeries.length && range > 0 && !this.isLog) {
-            pxMax -= axisLength;
-            transA *= (axisLength + pxMin - pxMax) / axisLength;
-            each([['min', 'userMin', pxMin], ['max', 'userMax', pxMax]], function (keys) {
-                if (pick(axis.options[keys[0]], axis[keys[1]]) === UNDEFINED) {
-                    axis[keys[0]] += keys[2] / transA;
+                if (range > 0) {
+                    while (i--) {
+                        if (isNumber(data[i]) && axis.dataMin <= data[i] && data[i] <= axis.dataMax) {
+                            radius = series.radii[i];
+                            pxMin = Math.min(((data[i] - min) * transA) - radius, pxMin);
+                            pxMax = Math.max(((data[i] - min) * transA) + radius, pxMax);
+                        }
+                    }
                 }
             });
-        }
-    };
 
-    /* ****************************************************************************
-     * End Bubble series code                                                     *
-     *****************************************************************************/
+            if (activeSeries.length && range > 0 && !this.isLog) {
+                pxMax -= axisLength;
+                transA *= (axisLength + pxMin - pxMax) / axisLength;
+                each([
+                    ['min', 'userMin', pxMin],
+                    ['max', 'userMax', pxMax]
+                ], function(keys) {
+                    if (pick(axis.options[keys[0]], axis[keys[1]]) === undefined) {
+                        axis[keys[0]] += keys[2] / transA;
+                    }
+                });
+            }
+        };
+
+        /* ****************************************************************************
+         * End Bubble series code                                                     *
+         *****************************************************************************/
 
-    (function () {
+    }(Highcharts));
+    (function(H) {
+        /**
+         * (c) 2010-2016 Torstein Honsi
+         *
+         * License: www.highcharts.com/license
+         */
+        'use strict';
 
         /**
          * Extensions for polar charts. Additionally, much of the geometry required for polar charts is
@@ -2317,14 +2486,21 @@ var arrayMin = Highcharts.arrayMin,
          *
          */
 
-        var seriesProto = Series.prototype,
+        var each = H.each,
+            pick = H.pick,
+            Pointer = H.Pointer,
+            Series = H.Series,
+            seriesTypes = H.seriesTypes,
+            wrap = H.wrap,
+
+            seriesProto = Series.prototype,
             pointerProto = Pointer.prototype,
             colProto;
 
         /**
          * Search a k-d tree by the point angle, used for shared tooltips in polar charts
          */
-        seriesProto.searchPointByAngle = function (e) {
+        seriesProto.searchPointByAngle = function(e) {
             var series = this,
                 chart = series.chart,
                 xAxis = series.xAxis,
@@ -2342,7 +2518,7 @@ var arrayMin = Highcharts.arrayMin,
          * Wrap the buildKDTree function so that it searches by angle (clientX) in case of shared tooltip,
          * and by two dimensional distance in case of non-shared.
          */
-        wrap(seriesProto, 'buildKDTree', function (proceed) {
+        wrap(seriesProto, 'buildKDTree', function(proceed) {
             if (this.chart.polar) {
                 if (this.kdByAngle) {
                     this.searchPoint = this.searchPointByAngle;
@@ -2357,7 +2533,7 @@ var arrayMin = Highcharts.arrayMin,
          * Translate a point's plotX and plotY from the internal angle and radius measures to
          * true plotX, plotY coordinates
          */
-        seriesProto.toXY = function (point) {
+        seriesProto.toXY = function(point) {
             var xy,
                 chart = this.chart,
                 plotX = point.plotX,
@@ -2390,7 +2566,7 @@ var arrayMin = Highcharts.arrayMin,
             /**
              * Overridden method for calculating a spline from one point to the next
              */
-            wrap(seriesTypes.spline.prototype, 'getPointSpline', function (proceed, segment, point, i) {
+            wrap(seriesTypes.spline.prototype, 'getPointSpline', function(proceed, segment, point, i) {
 
                 var ret,
                     smoothing = 1.5, // 1 means control points midway between points, 2 means 1/3 from the point, 3 is 1/4 etc;
@@ -2496,7 +2672,7 @@ var arrayMin = Highcharts.arrayMin,
          * cartesian plane, where plotX denotes the angle in radians and (yAxis.len - plotY) is the pixel distance from
          * center.
          */
-        wrap(seriesProto, 'translate', function (proceed) {
+        wrap(seriesProto, 'translate', function(proceed) {
             var chart = this.chart,
                 points,
                 i;
@@ -2524,11 +2700,11 @@ var arrayMin = Highcharts.arrayMin,
          * Extend getSegmentPath to allow connecting ends across 0 to provide a closed circle in
          * line-like series.
          */
-        wrap(seriesProto, 'getGraphPath', function (proceed, points) {
+        wrap(seriesProto, 'getGraphPath', function(proceed, points) {
             var series = this,
                 i,
                 firstValid;
-        
+
             // Connect the path
             if (this.chart.polar) {
                 points = points || this.points;
@@ -2546,7 +2722,7 @@ var arrayMin = Highcharts.arrayMin,
                 }
 
                 // For area charts, pseudo points are added to the graph, now we need to translate these
-                each(points, function (point) {
+                each(points, function(point) {
                     if (point.polarPlotY === undefined) {
                         series.toXY(point);
                     }
@@ -2555,7 +2731,7 @@ var arrayMin = Highcharts.arrayMin,
 
             // Run uber method
             return proceed.apply(this, [].slice.call(arguments, 1));
-    
+
         });
 
 
@@ -2597,7 +2773,7 @@ var arrayMin = Highcharts.arrayMin,
                             markerGroup.attr(attribs);
                         }
 
-                    // Run the animation
+                        // Run the animation
                     } else {
                         attribs = {
                             translateX: plotLeft,
@@ -2615,7 +2791,7 @@ var arrayMin = Highcharts.arrayMin,
                     }
                 }
 
-            // For non-polar charts, revert to the basic animation
+                // For non-polar charts, revert to the basic animation
             } else {
                 proceed.call(this, init);
             }
@@ -2629,16 +2805,15 @@ var arrayMin = Highcharts.arrayMin,
 
             colProto = seriesTypes.column.prototype;
 
-            colProto.polarArc = function (low, high, start, end) {
+            colProto.polarArc = function(low, high, start, end) {
                 var center = this.xAxis.center,
                     len = this.yAxis.len;
-                
+
                 return this.chart.renderer.symbols.arc(
                     center[0],
                     center[1],
                     len - high,
-                    null,
-                    {
+                    null, {
                         start: start,
                         end: end,
                         innerR: len - pick(low, len)
@@ -2647,15 +2822,15 @@ var arrayMin = Highcharts.arrayMin,
             };
 
             /**
-            * Define the animate method for columnseries
-            */
+             * Define the animate method for columnseries
+             */
             wrap(colProto, 'animate', polarAnimate);
 
 
             /**
              * Extend the column prototype's translate method
              */
-            wrap(colProto, 'translate', function (proceed) {
+            wrap(colProto, 'translate', function(proceed) {
 
                 var xAxis = this.xAxis,
                     startAngleRad = xAxis.startAngleRad,
@@ -2692,7 +2867,7 @@ var arrayMin = Highcharts.arrayMin,
             /**
              * Align column data labels outside the columns. #1199.
              */
-            wrap(colProto, 'alignDataLabel', function (proceed, point, dataLabel, options, alignTo, isNew) {
+            wrap(colProto, 'alignDataLabel', function(proceed, point, dataLabel, options, alignTo, isNew) {
 
                 if (this.chart.polar) {
                     var angle = point.rectPlotX / Math.PI * 180,
@@ -2732,7 +2907,7 @@ var arrayMin = Highcharts.arrayMin,
         /**
          * Extend getCoordinates to prepare for polar axis values
          */
-        wrap(pointerProto, 'getCoordinates', function (proceed, e) {
+        wrap(pointerProto, 'getCoordinates', function(proceed, e) {
             var chart = this.chart,
                 ret = {
                     xAxis: [],
@@ -2741,7 +2916,7 @@ var arrayMin = Highcharts.arrayMin,
 
             if (chart.polar) {
 
-                each(chart.axes, function (axis) {
+                each(chart.axes, function(axis) {
                     var isXAxis = axis.isXAxis,
                         center = axis.center,
                         x = e.chartX - center[0] - chart.plotLeft,
@@ -2751,8 +2926,8 @@ var arrayMin = Highcharts.arrayMin,
                         axis: axis,
                         value: axis.translate(
                             isXAxis ?
-                                Math.PI - Math.atan2(x, y) : // angle
-                                Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)), // distance from center
+                            Math.PI - Math.atan2(x, y) : // angle
+                            Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)), // distance from center
                             true
                         )
                     });
@@ -2765,6 +2940,5 @@ var arrayMin = Highcharts.arrayMin,
             return ret;
         });
 
-    }());
-
+    }(Highcharts));
 }));