highcharts-rails 5.0.14 → 6.0.0

data/app/assets/javascripts/highcharts/modules/boost.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v5.0.14 (2017-07-28)
+ * @license Highcharts JS v6.0.0 (2017-10-04)
  * Boost module
  *
  * (c) 2010-2017 Highsoft AS
@@ -80,15 +80,50 @@
          *  	//Use pre-allocated buffers, much faster,
          *  	//but may cause rendering issues with some data sets
          *  	usePreallocated: boolean - default: false
-         *  	//Output rendering time in console
-         *  	timeRendering: boolean - default: false
-         *  	//Output processing time in console
-         *  	timeSeriesProcessing: boolean - default: false
-         *  	//Output setup time in console
-         *  	timeSetup: boolean - default: false
          *  }
          */
 
+        /**
+         * Options for the Boost module. The Boost module allows certain series types
+         * to be rendered by WebGL instead of the default SVG. This allows hundreds of
+         * thousands of data points to be rendered in milliseconds. In addition to the
+         * WebGL rendering it saves time by skipping processing and inspection of the
+         * data wherever possible.
+         *
+         * In addition to the global `boost` option, each series has a
+         * [boostThreshold](#plotOptions.series.boostThreshold) that defines when the
+         * boost should kick in.
+         *
+         * Requires the `modules/boost.js` module.
+         *
+         * @sample {highstock} highcharts/boost/line-series-heavy-stock
+         *         Stock chart
+         * @sample {highstock} highcharts/boost/line-series-heavy-dynamic
+         *         Dynamic stock chart
+         * @sample highcharts/boost/line
+         *         Line chart
+         * @sample highcharts/boost/line-series-heavy
+         *         Line chart with hundreds of series
+         * @sample highcharts/boost/scatter
+         *         Scatter chart
+         * @sample highcharts/boost/area
+         *         Area chart
+         * @sample highcharts/boost/arearange
+         *         Arearange chart
+         * @sample highcharts/boost/column
+         *         Column chart
+         * @sample highcharts/boost/bubble
+         *         Bubble chart
+         * @sample highcharts/boost/heatmap
+         *         Heat map
+         * @sample highcharts/boost/treemap
+         *         Tree map
+         *
+         * @product highcharts highstock
+         * @type {Object}
+         * @apioption boost
+         */
+
         /**
          * Set the series threshold for when the boost should kick in globally.
          *
@@ -98,22 +133,133 @@
          * a significant speed improvment in charts with a very high
          * amount of series.
          *
-         * Note: only available when including the boost module.
-         *
          * @default  null
          * @apioption boost.seriesThreshold
          */
 
+        /**
+         * Enable or disable boost on a chart.
+         *
+         * @type {Boolean}
+         * @default true
+         * @apioption boost.enabled
+         */
+
+        /**
+         * Debugging options for boost.
+         * Useful for benchmarking, and general timing.
+         *
+         * @type {Object}
+         * @apioption boost.debug
+         */
+
+        /**
+         * Time the series rendering.
+         *
+         * This outputs the time spent on actual rendering in the console when
+         * set to true.
+         *
+         * @type {Boolean}
+         * @default false
+         * @apioption boost.debug.timeRendering
+         */
+
+        /**
+         * Time the series processing.
+         *
+         * This outputs the time spent on transforming the series data to
+         * vertex buffers when set to true.
+         *
+         * @type {Boolean}
+         * @default false
+         * @apioption boost.debug.timeSeriesProcessing
+         */
+
+        /**
+         * Time the the WebGL setup.
+         *
+         * This outputs the time spent on setting up the WebGL context,
+         * creating shaders, and textures.
+         *
+         * @type {Boolean}
+         * @default false
+         * @apioption boost.debug.timeSetup
+         */
+
+        /**
+         * Time the building of the k-d tree.
+         *
+         * This outputs the time spent building the k-d tree used for
+         * markers etc.
+         *
+         * Note that the k-d tree is built async, and runs post-rendering.
+         * Following, it does not affect the performance of the rendering itself.
+         *
+         * @type {Boolean}
+         * @default false
+         * @apioption boost.debug.timeKDTree
+         */
+
+        /**
+         * Show the number of points skipped through culling.
+         *
+         * When set to true, the number of points skipped in series processing
+         * is outputted. Points are skipped if they are closer than 1 pixel from
+         * each other.
+         *
+         * @type {Boolean}
+         * @default false
+         * @apioption boost.debug.showSkipSummary
+         */
+
+        /**
+         * Time the WebGL to SVG buffer copy
+         *
+         * After rendering, the result is copied to an image which is injected
+         * into the SVG.
+         *
+         * If this property is set to true, the time it takes for the buffer copy
+         * to complete is outputted.
+         *
+         * @type {Boolean}
+         * @default false
+         * @apioption boost.debug.timeBufferCopy
+         */
+
+        /**
+         * Enable or disable GPU translations. GPU translations are faster than doing
+         * the translation in JavaScript.
+         *
+         * This option may cause rendering issues with certain datasets.
+         * Namely, if your dataset has large numbers with small increments (such as
+         * timestamps), it won't work correctly. This is due to floating point
+         * precission.
+         *
+         * @type {Boolean}
+         * @default false
+         * @apioption boost.useGPUTranslations
+         */
+
         /**
          * Set the point threshold for when a series should enter boost mode.
          *
          * Setting it to e.g. 2000 will cause the series to enter boost mode
          * when there are 2000 or more points in the series.
          *
-         * Note: only available when including the boost module.
+         * Requires `modules/boost.js`.
+         *
+         * @type {Number}
+         * @default 5000
+         * @apioption plotOptions.series.boostThreshold
+         */
+
+        /**
+         * If set to true, the whole chart will be boosted if one of the series
+         * crosses its threshold, and all the series can be boosted.
          *
-         * @default  5000
-         * @apioption series.boostThreshold
+         * @type {Boolean}
+         * @default true
+         * @apioption boost.allowForce
          */
 
         /* global Float32Array */
@@ -135,8 +281,25 @@
             pick = H.pick,
             wrap = H.wrap,
             plotOptions = H.getOptions().plotOptions,
-            CHUNK_SIZE = 50000,
-            index;
+            CHUNK_SIZE = 30000,
+            mainCanvas = doc.createElement('canvas'),
+            index,
+            boostable = [
+                'area',
+                'arearange',
+                'column',
+                'bar',
+                'line',
+                'scatter',
+                'heatmap',
+                'bubble',
+                'treemap'
+            ],
+            boostableMap = {};
+
+        each(boostable, function(item) {
+            boostableMap[item] = 1;
+        });
 
         // Register color names since GL can't render those directly.
         Color.prototype.names = {
@@ -295,7 +458,7 @@
 
             each(args, function(t) {
                 if (typeof t !== 'undefined' && typeof t.length !== 'undefined') {
-                    //r = r < t.length ? t.length : r;
+                    // r = r < t.length ? t.length : r;
                     if (t.length > 0) {
                         r = t.length;
                         return true;
@@ -308,27 +471,54 @@
 
         /*
          * Returns true if we should force chart series boosting
+         * The result of this is cached in chart.boostForceChartBoost.
+         * It's re-fetched on redraw.
+         *
+         * We do this because there's a lot of overhead involved when dealing
+         * with a lot of series.
+         *
          */
         function shouldForceChartSeriesBoosting(chart) {
             // If there are more than five series currently boosting,
             // we should boost the whole chart to avoid running out of webgl contexts.
             var sboostCount = 0,
+                canBoostCount = 0,
+                allowBoostForce = true,
                 series;
 
+            if (typeof chart.boostForceChartBoost !== 'undefined') {
+                return chart.boostForceChartBoost;
+            }
+
+            allowBoostForce = chart.options.boost ?
+                (typeof chart.options.boost.allowForce !== 'undefined' ?
+                    chart.options.boost.allowForce : allowBoostForce) :
+                allowBoostForce;
+
             if (chart.series.length > 1) {
                 for (var i = 0; i < chart.series.length; i++) {
+
                     series = chart.series[i];
+
+                    if (boostableMap[series.type]) {
+                        ++canBoostCount;
+                    }
+
                     if (patientMax(
                             series.processedXData,
                             series.options.data,
+                            // series.xData,
                             series.points
                         ) >= (series.options.boostThreshold || Number.MAX_VALUE)) {
-                        sboostCount++;
+                        ++sboostCount;
                     }
                 }
             }
 
-            return sboostCount > 5;
+            chart.boostForceChartBoost = (allowBoostForce && canBoostCount === chart.series.length && sboostCount > 0) ||
+                sboostCount > 5;
+
+            return chart.boostForceChartBoost;
         }
 
         /*
@@ -337,10 +527,13 @@
          * @returns {Boolean} - true if the chart is in series boost mode
          */
         function isChartSeriesBoosting(chart) {
-            return shouldForceChartSeriesBoosting(chart) || chart.series.length >= pick(
-                chart.options.boost && chart.options.boost.seriesThreshold,
-                50
-            );
+            var threshold = 50;
+
+            threshold = chart.options.boost && typeof chart.options.boost.seriesThreshold !== 'undefined' ?
+                chart.options.boost.seriesThreshold : threshold;
+
+            return threshold <= chart.series.length ||
+                shouldForceChartSeriesBoosting(chart);
         }
 
         /*
@@ -348,16 +541,15 @@
          * @param series {Highchart.Series} - the series to check
          * @returns {boolean} - true if the series is in boost mode
          */
-        function isSeriesBoosting(series) {
+        function isSeriesBoosting(series, overrideThreshold) {
             return isChartSeriesBoosting(series.chart) ||
                 patientMax(
                     series.processedXData,
                     series.options.data,
                     series.points
-                ) >= (series.options.boostThreshold || Number.MAX_VALUE);
+                ) >= (overrideThreshold || series.options.boostThreshold || Number.MAX_VALUE);
         }
 
-        ////////////////////////////////////////////////////////////////////////////////
         // START OF WEBGL ABSTRACTIONS
 
         /*
@@ -384,6 +576,8 @@
 
                     'uniform bool skipTranslation;',
 
+                    'uniform float plotHeight;',
+
                     'uniform float xAxisTrans;',
                     'uniform float xAxisMin;',
                     'uniform float xAxisMinPad;',
@@ -479,6 +673,9 @@
                     'v = value;// + yAxisPos;',
                     '} else {',
                     'v = translate(value, 0.0, yAxisTrans, yAxisMin, yAxisMinPad, yAxisPointRange, yAxisLen, yAxisCVSCoord);// + yAxisPos;',
+                    'if (v > plotHeight) {',
+                    'v = plotHeight;',
+                    '}',
                     '}',
                     'if (checkTreshold > 0.0 && hasThreshold) {',
                     'v = min(v, translatedThreshold);',
@@ -504,7 +701,7 @@
                     '}'
                     /* eslint-enable */
                 ].join('\n'),
-                //Fragment shader source
+                // Fragment shader source
                 fragShade = [
                     /* eslint-disable */
                     'precision highp float;',
@@ -521,13 +718,20 @@
 
                     'void main(void) {',
                     'vec4 col = fillColor;',
+                    'vec4 tcol;',
 
                     'if (hasColor) {',
                     'col = vColor;',
                     '}',
 
                     'if (isCircle) {',
-                    'gl_FragColor = col * texture2D(uSampler, gl_PointCoord.st);',
+                    'tcol = texture2D(uSampler, gl_PointCoord.st);',
+                    'col *= tcol;',
+                    'if (tcol.r < 0.0) {',
+                    'discard;',
+                    '} else {',
+                    'gl_FragColor = col;',
+                    '}',
                     '} else {',
                     'gl_FragColor = col;',
                     '}',
@@ -535,26 +739,27 @@
                     /* eslint-enable */
                 ].join('\n'),
                 uLocations = {},
-                //The shader program
+                // The shader program
                 shaderProgram,
-                //Uniform handle to the perspective matrix
+                // Uniform handle to the perspective matrix
                 pUniform,
-                //Uniform for point size
+                // Uniform for point size
                 psUniform,
-                //Uniform for fill color
+                // Uniform for fill color
                 fillColorUniform,
-                //Uniform for isBubble
+                // Uniform for isBubble
                 isBubbleUniform,
-                //Uniform for bubble abs sizing
+                // Uniform for bubble abs sizing
                 bubbleSizeAbsUniform,
                 bubbleSizeAreaUniform,
-                //Skip translation uniform
+                // Skip translation uniform
                 skipTranslationUniform,
-                //Set to 1 if circle
+                // Set to 1 if circle
                 isCircleUniform,
-                //Uniform for invertion
+                // Uniform for invertion
                 isInverted,
-                //Texture uniform
+                plotHeightUniform,
+                // Texture uniform
                 uSamplerUniform;
 
             /* String to shader program
@@ -570,7 +775,7 @@
                 gl.compileShader(shader);
 
                 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-                    //console.error('shader error:', gl.getShaderInfoLog(shader));
+                    // console.error('shader error:', gl.getShaderInfoLog(shader));
                     return false;
                 }
                 return shader;
@@ -586,7 +791,7 @@
 
                 if (!v || !f) {
                     shaderProgram = false;
-                    //console.error('error creating shader program');
+                    // console.error('error creating shader program');
                     return false;
                 }
 
@@ -614,7 +819,7 @@
                 skipTranslationUniform = uloc('skipTranslation');
                 isCircleUniform = uloc('isCircle');
                 isInverted = uloc('isInverted');
-
+                plotHeightUniform = uloc('plotHeight');
                 return true;
             }
 
@@ -622,8 +827,11 @@
              * Destroy the shader
              */
             function destroy() {
-                if (gl && shaderProgram) {
-                    gl.deleteProgram(shaderProgram);
+                if (gl) {
+                    if (shaderProgram) {
+                        gl.deleteProgram(shaderProgram);
+                        shaderProgram = false;
+                    }
                 }
             }
 
@@ -664,8 +872,6 @@
                 gl.uniform1i(isInverted, flag);
             }
 
-            ////////////////////////////////////////////////////////////////////////////
-
             /*
              * Enable/disable circle drawing
              */
@@ -673,6 +879,10 @@
                 gl.uniform1i(isCircleUniform, flag ? 1 : 0);
             }
 
+            function setPlotHeight(n) {
+                gl.uniform1f(plotHeightUniform, n);
+            }
+
             /*
              * Flush
              */
@@ -774,6 +984,7 @@
                 fillColorUniform: function() {
                     return fillColorUniform;
                 },
+                setPlotHeight: setPlotHeight,
                 setBubbleUniforms: setBubbleUniforms,
                 bind: bind,
                 program: getProgram,
@@ -798,12 +1009,13 @@
          * @param gl {WebGLContext} - the context in which to create the buffer
          * @param shader {GLShader} - the shader to use
          */
-        function GLVertexBuffer(gl, shader, dataComponents /*, type */ ) {
+        function GLVertexBuffer(gl, shader, dataComponents /* , type */ ) {
             var buffer = false,
                 vertAttribute = false,
                 components = dataComponents || 2,
                 preAllocated = false,
                 iterator = 0,
+                // farray = false,
                 data;
 
             // type = type || 'float';
@@ -811,7 +1023,13 @@
             function destroy() {
                 if (buffer) {
                     gl.deleteBuffer(buffer);
+                    buffer = false;
+                    vertAttribute = false;
                 }
+
+                iterator = 0;
+                components = dataComponents || 2;
+                data = [];
             }
 
             /*
@@ -821,12 +1039,13 @@
              * @param dataComponents {Integer} - the number of components per. indice
              */
             function build(dataIn, attrib, dataComponents) {
+                var farray;
 
                 data = dataIn || [];
 
                 if ((!data || data.length === 0) && !preAllocated) {
-                    //console.error('trying to render empty vbuffer');
-                    buffer = false;
+                    // console.error('trying to render empty vbuffer');
+                    destroy();
                     return false;
                 }
 
@@ -836,11 +1055,15 @@
                     gl.deleteBuffer(buffer);
                 }
 
+                if (!preAllocated) {
+                    farray = new Float32Array(data);
+                }
+
                 buffer = gl.createBuffer();
                 gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
                 gl.bufferData(
                     gl.ARRAY_BUFFER,
-                    preAllocated || new Float32Array(data),
+                    preAllocated || farray,
                     gl.STATIC_DRAW
                 );
 
@@ -848,6 +1071,9 @@
                 vertAttribute = gl.getAttribLocation(shader.program(), attrib);
                 gl.enableVertexAttribArray(vertAttribute);
 
+                // Trigger cleanup
+                farray = false;
+
                 return true;
             }
 
@@ -860,10 +1086,10 @@
                 }
 
                 // gl.bindAttribLocation(shader.program(), 0, 'aVertexPosition');
-                //gl.enableVertexAttribArray(vertAttribute);
-                //gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+                // gl.enableVertexAttribArray(vertAttribute);
+                // gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
                 gl.vertexAttribPointer(vertAttribute, components, gl.FLOAT, false, 0, 0);
-                //gl.enableVertexAttribArray(vertAttribute);
+                // gl.enableVertexAttribArray(vertAttribute);
             }
 
             /*
@@ -919,12 +1145,12 @@
                 size *= 4;
                 iterator = -1;
 
-                //if (!preAllocated || (preAllocated && preAllocated.length !== size)) {
+                // if (!preAllocated || (preAllocated && preAllocated.length !== size)) {
                 preAllocated = new Float32Array(size);
-                //}
+                // }
             }
 
-            ////////////////////////////////////////////////////////////////////////////
+            // /////////////////////////////////////////////////////////////////////////
             return {
                 destroy: destroy,
                 bind: bind,
@@ -974,26 +1200,32 @@
                 // Things to draw as "rectangles" (i.e lines)
                 asBar = {
                     'column': true,
+                    'bar': true,
                     'area': true
                 },
                 asCircle = {
                     'scatter': true,
                     'bubble': true
                 },
-                //Render settings
+                // Render settings
                 settings = {
                     pointSize: 1,
-                    lineWidth: 3,
+                    lineWidth: 1,
                     fillColor: '#AA00AA',
                     useAlpha: true,
                     usePreallocated: false,
                     useGPUTranslations: false,
-                    timeRendering: false,
-                    timeSeriesProcessing: false,
-                    timeSetup: false
+                    debug: {
+                        timeRendering: false,
+                        timeSeriesProcessing: false,
+                        timeSetup: false,
+                        timeBufferCopy: false,
+                        timeKDTree: false,
+                        showSkipSummary: false
+                    }
                 };
 
-            ////////////////////////////////////////////////////////////////////////////
+            // /////////////////////////////////////////////////////////////////////////
 
             function setOptions(options) {
                 merge(true, settings, options);
@@ -1108,6 +1340,7 @@
                     zData = series.zData || options.zData || series.processedZData,
                     yAxis = series.yAxis,
                     xAxis = series.xAxis,
+                    plotHeight = series.chart.plotHeight,
                     useRaw = !xData || xData.length === 0,
                     // threshold = options.threshold,
                     // yBottom = chart.yAxis[0].getThreshold(threshold),
@@ -1120,9 +1353,10 @@
                     // caxis,
                     // connectNulls = options.connectNulls,
                     // For some reason eslint doesn't pick up that this is actually used
-                    maxVal, //eslint-disable-line no-unused-vars
+                    maxVal, // eslint-disable-line no-unused-vars
                     points = series.points || false,
                     lastX = false,
+                    lastY = false,
                     minVal,
                     color,
                     scolor,
@@ -1134,7 +1368,30 @@
                     closestRight = {
                         x: Number.MIN_VALUE,
                         y: 0
-                    };
+                    },
+
+                    skipped = 0,
+
+                    cullXThreshold = 1,
+                    cullYThreshold = 1,
+
+                    // The following are used in the builder while loop
+                    x,
+                    y,
+                    d,
+                    z,
+                    i = -1,
+                    px = false,
+                    nx = false,
+                    // This is in fact used.
+                    low, // eslint-disable-line no-unused-vars
+                    chartDestroyed = typeof chart.index === 'undefined',
+                    nextInside = false,
+                    prevInside = false,
+                    pcolor = false,
+                    drawAsBar = asBar[series.type],
+                    isXInside = false,
+                    isYInside = true;
 
                 if (options.boostData && options.boostData.length > 0) {
                     return;
@@ -1152,7 +1409,7 @@
                     }
                 }
 
-                //Push a vertice to the data buffer
+                // Push a vertice to the data buffer
                 function vertice(x, y, checkTreshold, pointSize, color) {
                     pushColor(color);
                     if (settings.usePreallocated) {
@@ -1233,7 +1490,7 @@
                             // better color interpolation.
 
                             // If there's stroking, we do an additional rect
-                            //if (pointAttr.stroke !== 'none' && swidth && swidth > 0) {
+                            // if (pointAttr.stroke !== 'none' && swidth && swidth > 0) {
                             if (series.type === 'treemap') {
                                 swidth = swidth || 1;
                                 scolor = H.color(pointAttr.stroke).rgba;
@@ -1288,24 +1545,16 @@
                 // 	}
                 // });
 
-                each(sdata, function(d, i) {
-                    var x,
-                        y,
-                        z,
-                        px = false,
-                        nx = false,
-                        // This is in fact used.
-                        low, //eslint-disable-line no-unused-vars
-                        chartDestroyed = typeof chart.index === 'undefined',
-                        nextInside = false,
-                        prevInside = false,
-                        pcolor = false,
-                        drawAsBar = asBar[series.type],
-                        isXInside = false,
-                        isYInside = true;
+                while (i < sdata.length - 1) {
+                    d = sdata[++i];
+
+                    // px = x = y = z = nx = low = false;
+                    // chartDestroyed = typeof chart.index === 'undefined';
+                    // nextInside = prevInside = pcolor = isXInside = isYInside = false;
+                    // drawAsBar = asBar[series.type];
 
                     if (chartDestroyed) {
-                        return false;
+                        break;
                     }
 
                     // Uncomment this to enable color by point.
@@ -1406,7 +1655,7 @@
                     }
 
                     if (y !== 0 && (!y || !isYInside)) {
-                        return;
+                        continue;
                     }
 
                     if (x >= xMin && x <= xMax) {
@@ -1414,7 +1663,7 @@
                     }
 
                     if (!isXInside && !nextInside && !prevInside) {
-                        return;
+                        continue;
                     }
 
                     // Skip translations - temporary floating point fix
@@ -1422,6 +1671,12 @@
                         inst.skipTranslation = true;
                         x = xAxis.toPixels(x, true);
                         y = yAxis.toPixels(y, true);
+
+                        // Make sure we're not drawing outside of the chart area.
+                        // See #6594.
+                        if (y > plotHeight) {
+                            y = plotHeight;
+                        }
                     }
 
                     if (drawAsBar) {
@@ -1466,6 +1721,35 @@
                         }
                     }
 
+                    // If the last _drawn_ point is closer to this point than the
+                    // threshold, skip it. Shaves off 20-100ms in processing.
+
+                    if (!settings.useGPUTranslations &&
+                        !settings.usePreallocated &&
+                        (lastX && x - lastX < cullXThreshold) &&
+                        (lastY && Math.abs(y - lastY) < cullYThreshold)
+                    ) {
+                        if (settings.debug.showSkipSummary) {
+                            ++skipped;
+                        }
+
+                        continue;
+                    }
+
+                    // Do step line if enabled.
+                    // Draws an additional point at the old Y at the new X.
+                    // See #6976.
+
+                    if (options.step) {
+                        vertice(
+                            x,
+                            lastY,
+                            0,
+                            2,
+                            pcolor
+                        );
+                    }
+
                     vertice(
                         x,
                         y,
@@ -1485,9 +1769,12 @@
                     // }
 
                     lastX = x;
+                    lastY = y;
+                }
 
-                    //return true;
-                });
+                if (settings.debug.showSkipSummary) {
+                    console.log('skipped points:', skipped); // eslint-disable-line no-console
+                }
 
                 function pushSupplementPoint(point) {
                     if (!settings.useGPUTranslations) {
@@ -1527,8 +1814,8 @@
                     }
                 }
 
-                if (settings.timeSeriesProcessing) {
-                    console.time('building ' + s.type + ' series'); //eslint-disable-line no-console
+                if (settings.debug.timeSeriesProcessing) {
+                    console.time('building ' + s.type + ' series'); // eslint-disable-line no-console
                 }
 
                 series.push({
@@ -1548,6 +1835,7 @@
                         'arearange': 'lines',
                         'areaspline': 'line_strip',
                         'column': 'lines',
+                        'bar': 'lines',
                         'line': 'line_strip',
                         'scatter': 'points',
                         'heatmap': 'triangles',
@@ -1559,8 +1847,8 @@
                 // Add the series data to our buffer(s)
                 pushSeriesData(s, series[series.length - 1]);
 
-                if (settings.timeSeriesProcessing) {
-                    console.timeEnd('building ' + s.type + ' series'); //eslint-disable-line no-console
+                if (settings.debug.timeSeriesProcessing) {
+                    console.timeEnd('building ' + s.type + ' series'); // eslint-disable-line no-console
                 }
             }
 
@@ -1573,6 +1861,10 @@
                 series = [];
                 exports.data = data = [];
                 markerData = [];
+
+                if (vbuffer) {
+                    vbuffer.destroy();
+                }
             }
 
             /*
@@ -1629,7 +1921,7 @@
 
                 if (chart) {
                     if (!chart.chartHeight || !chart.chartWidth) {
-                        //chart.setChartSize();
+                        // chart.setChartSize();
                     }
 
                     width = chart.chartWidth || 800;
@@ -1642,14 +1934,19 @@
                     return false;
                 }
 
-                if (settings.timeRendering) {
-                    console.time('gl rendering'); //eslint-disable-line no-console
+                if (settings.debug.timeRendering) {
+                    console.time('gl rendering'); // eslint-disable-line no-console
                 }
 
+                gl.canvas.width = width;
+                gl.canvas.height = height;
+
                 shader.bind();
 
+
                 gl.viewport(0, 0, width, height);
                 shader.setPMatrix(orthoMatrix(width, height));
+                shader.setPlotHeight(chart.plotHeight);
 
                 if (settings.lineWidth > 1 && !H.isMS) {
                     gl.lineWidth(settings.lineWidth);
@@ -1663,7 +1960,8 @@
                     shader.setTexture(circleTextureHandle);
                 }
 
-                shader.setInverted(chart.options.chart ? chart.options.chart.inverted : false);
+                shader.setInverted(chart.inverted); // chart.options.chart ? chart.options.chart.inverted : false);
+
 
                 // Render the series
                 each(series, function(s, si) {
@@ -1683,14 +1981,16 @@
                                 10
                             ) || 10)
                         ),
-                        fillColor = s.series.fillOpacity ?
-                        new Color(s.series.color).setOpacity(
-                            pick(options.fillOpacity, 0.85)
-                        ).get() :
+                        fillColor =
+                        (s.series.pointAttribs && s.series.pointAttribs().fill) ||
                         s.series.color,
                         color;
 
-                    vbuffer.bind();
+                    if (s.series.fillOpacity && options.fillOpacity) {
+                        fillColor = new Color(fillColor).setOpacity(
+                            pick(options.fillOpacity, 1.0)
+                        ).get();
+                    }
 
                     if (options.colorByPoint) {
                         fillColor = s.series.chart.options.colors[si];
@@ -1702,7 +2002,12 @@
                         color[3] = 1.0;
                     }
 
-                    //Blending
+                    // This is very much temporary
+                    if (s.drawMode === 'lines' && settings.useAlpha && color[3] < 1) {
+                        color[3] /= 10;
+                    }
+
+                    // Blending
                     if (options.boostBlending === 'add') {
                         gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
                         gl.blendEquation(gl.FUNC_ADD);
@@ -1715,8 +2020,8 @@
                         gl.blendEquation(gl.FUNC_MIN);
 
                     } else {
-                        //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);//, gl.ONE, gl.ZERO);
-                        //gl.blendEquation(gl.FUNC_ADD);
+                        // gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);//, gl.ONE, gl.ZERO);
+                        // gl.blendEquation(gl.FUNC_ADD);
                         gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
                     }
 
@@ -1725,7 +2030,7 @@
                     // If there are entries in the colorData buffer, build and bind it.
                     if (s.colorData.length > 0) {
                         shader.setUniform('hasColor', 1.0);
-                        cbuffer = GLVertexBuffer(gl, shader); //eslint-disable-line new-cap
+                        cbuffer = GLVertexBuffer(gl, shader); // eslint-disable-line new-cap
                         cbuffer.build(s.colorData, 'aColor', 4);
                         cbuffer.bind();
                     }
@@ -1768,17 +2073,15 @@
                     }
                 });
 
-                vbuffer.destroy();
-
-                if (settings.timeRendering) {
-                    console.timeEnd('gl rendering'); //eslint-disable-line no-console
+                if (settings.debug.timeRendering) {
+                    console.timeEnd('gl rendering'); // eslint-disable-line no-console
                 }
 
-                flush();
-
                 if (postRenderCallback) {
                     postRenderCallback();
                 }
+
+                flush();
             }
 
             /*
@@ -1838,12 +2141,14 @@
                     return false;
                 }
 
-                if (settings.timeSetup) {
-                    console.time('gl setup'); //eslint-disable-line no-console
+                if (settings.debug.timeSetup) {
+                    console.time('gl setup'); // eslint-disable-line no-console
                 }
 
                 for (; i < contexts.length; i++) {
-                    gl = canvas.getContext(contexts[i]);
+                    gl = canvas.getContext(contexts[i], {
+                        //	premultipliedAlpha: false
+                    });
                     if (gl) {
                         break;
                     }
@@ -1861,10 +2166,11 @@
                 // gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
                 gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
                 gl.disable(gl.DEPTH_TEST);
-                gl.depthMask(gl.FALSE);
+                // gl.depthMask(gl.FALSE);
+                gl.depthFunc(gl.LESS);
 
-                shader = GLShader(gl); //eslint-disable-line new-cap
-                vbuffer = GLVertexBuffer(gl, shader); //eslint-disable-line new-cap
+                shader = GLShader(gl); // eslint-disable-line new-cap
+                vbuffer = GLVertexBuffer(gl, shader); // eslint-disable-line new-cap
 
                 textureIsReady = false;
 
@@ -1875,14 +2181,23 @@
                 circleTexture.width = 512;
                 circleTexture.height = 512;
 
+                circleCtx.mozImageSmoothingEnabled = false;
+                circleCtx.webkitImageSmoothingEnabled = false;
+                circleCtx.msImageSmoothingEnabled = false;
+                circleCtx.imageSmoothingEnabled = false;
+
+                circleCtx.strokeStyle = 'rgba(255, 255, 255, 0)';
                 circleCtx.fillStyle = '#FFF';
+
                 circleCtx.beginPath();
                 circleCtx.arc(256, 256, 256, 0, 2 * Math.PI);
+                circleCtx.stroke();
                 circleCtx.fill();
 
                 try {
 
                     gl.bindTexture(gl.TEXTURE_2D, circleTextureHandle);
+                    // gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
 
                     gl.texImage2D(
                         gl.TEXTURE_2D,
@@ -1896,9 +2211,9 @@
                     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
                     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
                     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
 
-                    gl.generateMipmap(gl.TEXTURE_2D);
+                    // gl.generateMipmap(gl.TEXTURE_2D);
 
                     gl.bindTexture(gl.TEXTURE_2D, null);
 
@@ -1907,8 +2222,8 @@
 
                 isInited = true;
 
-                if (settings.timeSetup) {
-                    console.timeEnd('gl setup'); //eslint-disable-line no-console
+                if (settings.debug.timeSetup) {
+                    console.timeEnd('gl setup'); // eslint-disable-line no-console
                 }
 
                 return true;
@@ -1931,6 +2246,7 @@
             }
 
             function destroy() {
+                flush();
                 vbuffer.destroy();
                 shader.destroy();
                 if (gl) {
@@ -1942,7 +2258,7 @@
                 }
             }
 
-            ////////////////////////////////////////////////////////////////////////////
+            // /////////////////////////////////////////////////////////////////////////
             exports = {
                 allocateBufferForSingleSeries: allocateBufferForSingleSeries,
                 pushSeries: pushSeries,
@@ -1968,7 +2284,7 @@
         }
 
         // END OF WEBGL ABSTRACTIONS
-        ////////////////////////////////////////////////////////////////////////////////
+        // /////////////////////////////////////////////////////////////////////////////
 
         /*
          * Create a canvas + context and attach it to the target
@@ -1979,7 +2295,12 @@
             var width = chart.chartWidth,
                 height = chart.chartHeight,
                 target = chart,
-                targetGroup = chart.seriesGroup || series.group;
+                targetGroup = chart.seriesGroup || series.group,
+                alpha = 1,
+                foSupported = doc.implementation.hasFeature(
+                    'www.http://w3.org/TR/SVG11/feature#Extensibility',
+                    '1.1'
+                );
 
             if (isChartSeriesBoosting(chart)) {
                 target = chart;
@@ -1987,20 +2308,78 @@
                 target = series;
             }
 
-            if (target.ogl) {
-                //target.ogl.destroy();
-            }
+            // Support for foreignObject is flimsy as best.
+            // IE does not support it, and Chrome has a bug which messes up
+            // the canvas draw order.
+            // As such, we force the Image fallback for now, but leaving the
+            // actual Canvas path in-place in case this changes in the future.
+            foSupported = false;
 
-            if (!target.image) {
-                target.canvas = doc.createElement('canvas');
+            if (!target.renderTarget) {
+                target.canvas = mainCanvas;
 
-                target.image = chart.renderer.image(
-                    '',
-                    0,
-                    0,
-                    width,
-                    height
-                ).add(targetGroup);
+                // Fall back to image tag if foreignObject isn't supported,
+                // or if we're exporting.
+                if (chart.renderer.forExport || !foSupported) {
+                    target.renderTarget = chart.renderer.image(
+                        '',
+                        0,
+                        0,
+                        width,
+                        height
+                    ).add(targetGroup);
+
+                    target.boostClear = function() {
+                        target.renderTarget.attr({
+                            href: ''
+                        });
+                    };
+
+                    target.boostCopy = function() {
+                        target.boostResizeTarget();
+                        target.renderTarget.attr({
+                            href: target.canvas.toDataURL('image/png')
+                        });
+                    };
+
+                } else {
+                    target.renderTargetFo = chart.renderer.createElement('foreignObject')
+                        .add(targetGroup);
+
+                    target.renderTarget = doc.createElement('canvas');
+                    target.renderTargetCtx = target.renderTarget.getContext('2d');
+
+                    target.renderTargetFo.element.appendChild(target.renderTarget);
+
+                    target.boostClear = function() {
+                        target.renderTarget.width = target.canvas.width;
+                        target.renderTarget.height = target.canvas.height;
+                    };
+
+                    target.boostCopy = function() {
+                        target.renderTarget.width = target.canvas.width;
+                        target.renderTarget.height = target.canvas.height;
+
+                        target.renderTargetCtx.drawImage(target.canvas, 0, 0);
+                    };
+                }
+
+                target.boostResizeTarget = function() {
+                    width = chart.chartWidth;
+                    height = chart.chartHeight;
+
+                    (target.renderTargetFo || target.renderTarget).attr({
+                        x: 0,
+                        y: 0,
+                        width: width,
+                        height: height,
+                        style: 'pointer-events: none; mix-blend-mode: normal; opacity:' + alpha
+                    });
+
+                    if (target instanceof H.Chart) {
+                        target.markerGroup.translate(series.xAxis.pos, series.yAxis.pos);
+                    }
+                };
 
                 target.boostClipRect = chart.renderer.clipRect(
                     chart.plotLeft,
@@ -2009,7 +2388,7 @@
                     chart.chartHeight
                 );
 
-                target.image.clip(target.boostClipRect);
+                (target.renderTargetFo || target.renderTarget).clip(target.boostClipRect);
 
                 if (target instanceof H.Chart) {
                     target.markerGroup = target.renderer.g().add(targetGroup);
@@ -2021,14 +2400,6 @@
             target.canvas.width = width;
             target.canvas.height = height;
 
-            target.image.attr({
-                x: 0,
-                y: 0,
-                width: width,
-                height: height,
-                style: 'pointer-events: none'
-            });
-
             target.boostClipRect.attr({
                 x: chart.plotLeft,
                 y: chart.plotTop,
@@ -2036,18 +2407,22 @@
                 height: chart.chartHeight
             });
 
+            target.boostResizeTarget();
+            target.boostClear();
+
             if (!target.ogl) {
+                target.ogl = GLRenderer(function() { // eslint-disable-line new-cap
+                    if (target.ogl.settings.debug.timeBufferCopy) {
+                        console.time('buffer copy'); // eslint-disable-line no-console
+                    }
 
+                    target.boostCopy();
 
-                target.ogl = GLRenderer(function() { // eslint-disable-line new-cap
-                    target.image.attr({
-                        href: target.canvas.toDataURL('image/png')
-                    });
+                    if (target.ogl.settings.debug.timeBufferCopy) {
+                        console.timeEnd('buffer copy'); // eslint-disable-line no-console
+                    }
 
-                    // Destroy gl context when we're done with it
-                    target.ogl.destroy();
-                    target.ogl = false;
-                }); //eslint-disable-line new-cap
+                }); // eslint-disable-line new-cap
 
                 target.ogl.init(target.canvas);
                 // target.ogl.clear();
@@ -2071,7 +2446,7 @@
          */
         function renderIfNotSeriesBoosting(renderer, series, chart) {
             if (renderer &&
-                series.image &&
+                series.renderTarget &&
                 series.canvas &&
                 !isChartSeriesBoosting(chart || series.chart)
             ) {
@@ -2081,7 +2456,7 @@
 
         function allocateIfNotSeriesBoosting(renderer, series) {
             if (renderer &&
-                series.image &&
+                series.renderTarget &&
                 series.canvas &&
                 !isChartSeriesBoosting(series.chart)
             ) {
@@ -2110,13 +2485,14 @@
                 proceed = fn(arr[i], i);
                 ++i;
             }
+
             if (proceed) {
                 if (i < arr.length) {
 
                     if (noTimeout) {
                         eachAsync(arr, fn, finalFunc, chunkSize, i, noTimeout);
                     } else if (win.requestAnimationFrame) {
-                        //If available, do requestAnimationFrame - shaves off a few ms
+                        // If available, do requestAnimationFrame - shaves off a few ms
                         win.requestAnimationFrame(function() {
                             eachAsync(arr, fn, finalFunc, chunkSize, i);
                         });
@@ -2132,7 +2508,7 @@
             }
         }
 
-        ////////////////////////////////////////////////////////////////////////////////
+        // /////////////////////////////////////////////////////////////////////////////
         // Following is the parts of the boost that's common between OGL/Legacy
 
         /**
@@ -2211,21 +2587,13 @@
         });
 
         // Set default options
-        each([
-                'area',
-                'arearange',
-                'column',
-                'line',
-                'scatter',
-                'heatmap',
-                'bubble',
-                'treemap',
-                'heatmap'
-            ],
+        each(boostable,
             function(type) {
                 if (plotOptions[type]) {
                     plotOptions[type].boostThreshold = 5000;
                     plotOptions[type].boostData = [];
+
+                    seriesTypes[type].prototype.fillOpacity = true;
                 }
             }
         );
@@ -2246,20 +2614,44 @@
         ], function(method) {
             function branch(proceed) {
                 var letItPass = this.options.stacking &&
-                    (method === 'translate' || method === 'generatePoints');
+                    (method === 'translate' || method === 'generatePoints'),
+                    enabled = true;
+
+                if (this.chart && this.chart.options && this.chart.options.boost) {
+                    enabled = typeof this.chart.options.boost.enabled === 'undefined' ?
+                        true :
+                        this.chart.options.boost.enabled;
+                }
 
                 if (!isSeriesBoosting(this) ||
                     letItPass ||
+                    !enabled ||
                     this.type === 'heatmap' ||
                     this.type === 'treemap'
                 ) {
 
                     // Clear image
-                    if (method === 'render' && this.image && !isChartSeriesBoosting(this.chart)) {
-                        this.image.attr({
-                            href: ''
-                        });
-                        this.animate = null; // We're zooming in, don't run animation
+                    if (method === 'render') {
+                        this.stickyTracking = (this.options || {}).stickyTracking;
+
+                        if (this.boostClear) {
+                            this.boostClear();
+                            this.animate = null; // We're zooming in, don't run animation
+                        }
+                    }
+
+                    if (!this.options.stacking && method === 'translate' &&
+                        this.type !== 'treemap' &&
+                        this.type !== 'heatmap') {
+                        // We call generate points and check if we're now boosting
+                        // so that we don't have to call series.translate
+                        // when zooming out from SVG mode (which is very, very expensive)
+
+                        this.generatePoints();
+
+                        if (isSeriesBoosting(this)) {
+                            return;
+                        }
                     }
 
                     proceed.call(this);
@@ -2278,6 +2670,10 @@
                     wrap(seriesTypes.column.prototype, method, branch);
                 }
 
+                if (seriesTypes.bar) {
+                    wrap(seriesTypes.bar.prototype, method, branch);
+                }
+
                 if (seriesTypes.arearange) {
                     wrap(seriesTypes.arearange.prototype, method, branch);
                 }
@@ -2321,12 +2717,23 @@
 
         /* Used for treemap|heatmap.drawPoints */
         function pointDrawHandler(proceed) {
-            if (!isSeriesBoosting(this)) {
+            var enabled = true,
+                renderer;
+
+            if (this.chart.options && this.chart.options.boost) {
+                enabled = typeof this.chart.options.boost.enabled === 'undefined' ?
+                    true :
+                    this.chart.options.boost.enabled;
+            }
+
+            if (!enabled || !isSeriesBoosting(this)) {
                 return proceed.call(this);
             }
 
-            //Make sure we have a valid OGL context
-            var renderer = createAndAttachRenderer(this.chart, this);
+            this.chart.isBoosting = true;
+
+            // Make sure we have a valid OGL context
+            renderer = createAndAttachRenderer(this.chart, this);
 
             if (renderer) {
                 allocateIfNotSeriesBoosting(renderer, this);
@@ -2336,7 +2743,7 @@
             renderIfNotSeriesBoosting(renderer, this);
         }
 
-        ////////////////////////////////////////////////////////////////////////////////
+        // /////////////////////////////////////////////////////////////////////////////
         // We're wrapped in a closure, so just return if there's no webgl support
 
         if (!hasWebGLSupport()) {
@@ -2348,7 +2755,7 @@
             }
         } else {
 
-            ////////////////////////////////////////////////////////////////////////////
+            // /////////////////////////////////////////////////////////////////////////
             // GL-SPECIFIC WRAPPINGS FOLLOWS
 
             /** If the series is a heatmap or treemap, or if the series is not boosting
@@ -2416,11 +2823,8 @@
                         chart = series.chart,
                         xAxis = this.xAxis,
                         yAxis = this.yAxis,
-                        //ctx,
-                        //c = 0,
                         xData = options.xData || series.processedXData,
                         yData = options.yData || series.processedYData,
-
                         rawData = options.data,
                         xExtremes = xAxis.getExtremes(),
                         xMin = xExtremes.min,
@@ -2445,9 +2849,12 @@
                         maxVal,
                         minI,
                         maxI,
+                        boostOptions,
+
+                        xDataFull = this.xData || this.options.xData || this.processedXData || false,
 
                         addKDPoint = function(clientX, plotY, i) {
-                            //Shaves off about 60ms compared to repeated concatination
+                            // Shaves off about 60ms compared to repeated concatination
                             index = clientX + ',' + plotY;
 
                             // The k-d tree requires series points.
@@ -2462,6 +2869,7 @@
                                 }
 
                                 points.push({
+                                    x: xDataFull ? xDataFull[cropStart + i] : false,
                                     clientX: clientX,
                                     plotX: clientX,
                                     plotY: plotY,
@@ -2473,18 +2881,21 @@
                     // Get or create the renderer
                     renderer = createAndAttachRenderer(chart, series);
 
+                    chart.isBoosting = true;
+
+                    boostOptions = renderer.settings;
+
+                    // Force sticky tracking
+                    this.stickyTracking = true;
+
                     if (!this.visible) {
-                        if (!isChartSeriesBoosting(chart) && renderer) {
-                            renderer.clear();
-                            this.image.attr({
-                                href: ''
-                            });
-                        }
                         return;
                     }
 
                     // If we are zooming out from SVG mode, destroy the graphics
                     if (this.points || this.graph) {
+
+                        this.animate = null;
                         this.destroyGraphics();
                     }
 
@@ -2499,7 +2910,7 @@
                             chart.seriesGroup
                         );
                     } else {
-                        //Use a single group for the markers
+                        // Use a single group for the markers
                         this.markerGroup = chart.markerGroup;
                     }
 
@@ -2513,7 +2924,7 @@
                         renderer.pushSeries(series);
                         // Perform the actual renderer if we're on series level
                         renderIfNotSeriesBoosting(renderer, this, chart);
-                        //console.log(series, chart);
+                        // console.log(series, chart);
                     }
 
                     /* This builds the KD-tree */
@@ -2612,15 +3023,24 @@
                         // Go back to prototype, ready to build
                         delete series.buildKDTree;
                         series.buildKDTree();
+
+                        if (boostOptions.debug.timeKDTree) {
+                            console.timeEnd('kd tree building'); // eslint-disable-line no-console
+                        }
                     }
 
-                    // Loop over the points to build the k-d tree
-                    eachAsync(
-                        isStacked ? series.data : (xData || rawData),
-                        processPoint,
-                        doneProcessing,
-                        chart.renderer.forExport ? Number.MAX_VALUE : undefined
-                    );
+                    // Loop over the points to build the k-d tree - skip this if exporting
+                    if (!chart.renderer.forExport) {
+                        if (boostOptions.debug.timeKDTree) {
+                            console.time('kd tree building'); // eslint-disable-line no-console
+                        }
+
+                        eachAsync(
+                            isStacked ? series.data : (xData || rawData),
+                            processPoint,
+                            doneProcessing
+                        );
+                    }
                 }
             });
 
@@ -2667,20 +3087,19 @@
                 sampling: true
             });
 
+
             extend(seriesTypes.column.prototype, {
                 fill: true,
                 sampling: true
             });
 
-            wrap(Series.prototype, 'setVisible', function(proceed, vis) {
-                proceed.call(this, vis, false);
-                if (this.visible === false && this.ogl && this.canvas && this.image) {
-                    this.ogl.clear();
-                    this.image.attr({
-                        href: ''
-                    });
-                } else {
-                    this.chart.redraw();
+            wrap(Series.prototype, 'setVisible', function(proceed, vis, redraw) {
+                proceed.call(this, vis, redraw);
+                if (this.visible === false && this.canvas && this.renderTarget) {
+                    if (this.ogl) {
+                        this.ogl.clear();
+                    }
+                    this.boostClear();
                 }
             });
 
@@ -2698,15 +3117,18 @@
 
                 /* Clear chart-level canvas */
                 function preRender() {
+                    // Reset force state
+                    chart.boostForceChartBoost = undefined;
+                    chart.boostForceChartBoost = shouldForceChartSeriesBoosting(chart);
+                    chart.isBoosting = false;
 
                     if (!isChartSeriesBoosting(chart) && chart.didBoost) {
                         chart.didBoost = false;
-                        // Clear the canvas
-                        if (chart.image) {
-                            chart.image.attr({
-                                href: ''
-                            });
-                        }
+                    }
+
+                    // Clear the canvas
+                    if (chart.boostClear) {
+                        chart.boostClear();
                     }
 
                     if (chart.canvas && chart.ogl && isChartSeriesBoosting(chart)) {
@@ -2716,18 +3138,22 @@
                         chart.ogl.allocateBuffer(chart);
                     }
 
-                    //see #6518 + #6739
+                    // see #6518 + #6739
                     if (chart.markerGroup && chart.xAxis && chart.xAxis.length > 0 && chart.yAxis && chart.yAxis.length > 0) {
                         chart.markerGroup.translate(
                             chart.xAxis[0].pos,
                             chart.yAxis[0].pos
                         );
                     }
-
                 }
 
                 addEvent(chart, 'predraw', preRender);
                 addEvent(chart, 'render', canvasToSVG);
+
+                // addEvent(chart, 'zoom', function () {
+                // 	chart.boostForceChartBoost = shouldForceChartSeriesBoosting(chart);
+                // });
+
             });
         } // if hasCanvasSupport