highcharts 9.3.3 → 10.2.0

package/es-modules/Extensions/Annotations/Types/FibonacciTimeZones.js

@@ -10,16 +10,18 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import Annotation from '../Annotations.js';
+import Annotation from '../Annotation.js';
 import ControlPoint from '../ControlPoint.js';
 import CrookedLine from './CrookedLine.js';
 import InfinityLine from './InfinityLine.js';

package/es-modules/Extensions/Annotations/Types/InfinityLine.js

@@ -8,16 +8,18 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import Annotation from '../Annotations.js';
+import Annotation from '../Annotation.js';
 import CrookedLine from './CrookedLine.js';
 import MockPoint from '../MockPoint.js';
 import U from '../../../Core/Utilities.js';

package/es-modules/Extensions/Annotations/Types/Measure.js

@@ -8,16 +8,18 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import Annotation from '../Annotations.js';
+import Annotation from '../Annotation.js';
 import ControlPoint from '../ControlPoint.js';
 import U from '../../../Core/Utilities.js';
 var defined = U.defined, extend = U.extend, isNumber = U.isNumber, merge = U.merge, pick = U.pick;

package/es-modules/Extensions/Annotations/Types/Pitchfork.js

@@ -8,16 +8,18 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import Annotation from '../Annotations.js';
+import Annotation from '../Annotation.js';
 import InfinityLine from './InfinityLine.js';
 import MockPoint from '../MockPoint.js';
 import U from '../../../Core/Utilities.js';

package/es-modules/Extensions/Annotations/Types/TimeCycles.js

@@ -10,16 +10,18 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import Annotation from '../Annotations.js';
+import Annotation from '../Annotation.js';
 import CrookedLine from './CrookedLine.js';
 import ControlPoint from '../ControlPoint.js';
 import U from '../../../Core/Utilities.js';

package/es-modules/Extensions/Annotations/Types/Tunnel.js

@@ -8,16 +8,18 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import Annotation from '../Annotations.js';
+import Annotation from '../Annotation.js';
 import ControlPoint from '../ControlPoint.js';
 import CrookedLine from './CrookedLine.js';
 import MockPoint from '../MockPoint.js';
@@ -118,6 +120,7 @@ var Tunnel = /** @class */ (function (_super) {
         this.translatePoint(0, dh, 3);
         this.options.typeOptions.height = this.points[3].y -
             this.points[0].y;
+        this.userOptions.typeOptions.height = this.options.typeOptions.height;
     };
     return Tunnel;
 }(CrookedLine));

package/es-modules/Extensions/Annotations/Types/VerticalLine.js

@@ -8,16 +8,18 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import Annotation from '../Annotations.js';
+import Annotation from '../Annotation.js';
 import MockPoint from '../MockPoint.js';
 import U from '../../../Core/Utilities.js';
 var merge = U.merge, pick = U.pick;

package/es-modules/Extensions/Boost/BoostAttach.js

@@ -58,7 +58,11 @@ function createAndAttachRenderer(chart, series) {
                 .addClass('highcharts-boost-canvas')
                 .add(targetGroup);
             target.boostClear = function () {
-                target.renderTarget.attr({ href: '' });
+                target.renderTarget.attr({
+                    // Insert a blank pixel (#17182)
+                    /* eslint-disable-next-line max-len*/
+                    href: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
+                });
             };
             target.boostCopy = function () {
                 target.boostResizeTarget();

package/es-modules/Extensions/Boost/BoostInit.js

@@ -165,7 +165,7 @@ function init() {
                                 }
                             }
                             // Add points and reset
-                            if (clientX !== lastClientX) {
+                            if (!compareX || clientX !== lastClientX) {
                                 // maxI is number too:
                                 if (typeof minI !== 'undefined') {
                                     plotY =
@@ -224,12 +224,13 @@ function init() {
     });
     /* eslint-disable no-invalid-this */
     if (seriesTypes.bubble) {
+        var bubbleProto = seriesTypes.bubble.prototype;
         // By default, the bubble series does not use the KD-tree, so force it
         // to.
-        delete seriesTypes.bubble.prototype.buildKDTree;
+        delete bubbleProto.buildKDTree;
         // seriesTypes.bubble.prototype.directTouch = false;
         // Needed for markers to work correctly
-        wrap(seriesTypes.bubble.prototype, 'markerAttribs', function (proceed) {
+        wrap(bubbleProto, 'markerAttribs', function (proceed) {
             if (this.isSeriesBoosting) {
                 return false;
             }
@@ -242,6 +243,11 @@ function init() {
         fillOpacity: true,
         sampling: true
     });
+    extend(seriesTypes.areaspline.prototype, {
+        fill: true,
+        fillOpacity: true,
+        sampling: true
+    });
     extend(seriesTypes.column.prototype, {
         fill: true,
         sampling: true

package/es-modules/Extensions/Boost/BoostOptions.js

@@ -149,6 +149,32 @@ import '../../Core/Globals.js';
  * @default   false
  * @apioption boost.debug.timeBufferCopy
  */
+/**
+ * The pixel ratio for the WebGL content. If 0, the `window.devicePixelRatio` is
+ * used. This ensures sharp graphics on high DPI displays like Apple's Retina,
+ * as well as when a page is zoomed.
+ *
+ * The default is left at 1 for now, as this is a new feature that has the
+ * potential to break existing setups. Over time, when it has been battle
+ * tested, the intention is to set it to 0 by default.
+ *
+ * Another use case for this option is to set it to 2 in order to make exported
+ * and upscaled charts render sharp.
+ *
+ * One limitation when using the `pixelRatio` is that the line width of graphs
+ * is scaled down. Since the Boost module currently can only render 1px line
+ * widths, it is scaled down to a thin 0.5 pixels on a Retina display.
+ *
+ * @sample    highcharts/boost/line-devicepixelratio
+ *            Enable the `devicePixelRatio`
+ * @sample    highcharts/boost/line-export-pixelratio
+ *            Sharper graphics in export
+ *
+ * @type      {number}
+ * @since 10.0.0
+ * @default   1
+ * @apioption boost.pixelRatio
+ */
 /**
  * Enable or disable GPU translations. GPU translations are faster than doing
  * the translation in JavaScript.

package/es-modules/Extensions/Boost/Boostables.js

@@ -12,6 +12,7 @@
 // These are the series we allow boosting for.
 var boostables = [
     'area',
+    'areaspline',
     'arearange',
     'column',
     'columnrange',

package/es-modules/Extensions/Boost/WGLRenderer.js

@@ -15,7 +15,7 @@ var color = Color.parse;
 import GLShader from './WGLShader.js';
 import GLVertexBuffer from './WGLVBuffer.js';
 import H from '../../Core/Globals.js';
-var doc = H.doc;
+var doc = H.doc, win = H.win;
 import U from '../../Core/Utilities.js';
 var isNumber = U.isNumber, isObject = U.isObject, merge = U.merge, objectEach = U.objectEach, pick = U.pick;
 /* eslint-disable valid-jsdoc */
@@ -59,6 +59,7 @@ function GLRenderer(postRenderCallback) {
         'columnrange': true,
         'bar': true,
         'area': true,
+        'areaspline': true,
         'arearange': true
     }, asCircle = {
         'scatter': true,
@@ -82,10 +83,22 @@ function GLRenderer(postRenderCallback) {
         }
     };
     // /////////////////////////////////////////////////////////////////////////
+    /**
+     * @private
+     */
+    function getPixelRatio() {
+        return settings.pixelRatio || win.devicePixelRatio || 1;
+    }
     /**
      * @private
      */
     function setOptions(options) {
+        // The pixelRatio defaults to 1. This is an antipattern, we should
+        // refactor the Boost options to include an object of default options as
+        // base for the merge, like other components.
+        if (!('pixelRatio' in options)) {
+            options.pixelRatio = 1;
+        }
         merge(true, settings, options);
     }
     /**
@@ -206,7 +219,7 @@ function GLRenderer(postRenderCallback) {
         //
         cullXThreshold = 1, cullYThreshold = 1, 
         // The following are used in the builder while loop
-        x, y, d, z, i = -1, px = false, nx = false, low, chartDestroyed = typeof chart.index === 'undefined', nextInside = false, prevInside = false, pcolor = false, drawAsBar = asBar[series.type], isXInside = false, isYInside = true, firstPoint = true, zoneAxis = options.zoneAxis || 'y', zones = options.zones || false, zoneColors, zoneDefColor = false, threshold = options.threshold, gapSize = false;
+        x, y, d, z, i = -1, px = false, nx = false, low, chartDestroyed = typeof chart.index === 'undefined', nextInside = false, prevInside = false, pcolor = false, drawAsBar = asBar[series.type], isXInside = false, isYInside = true, firstPoint = true, zoneAxis = options.zoneAxis || 'y', zones = options.zones || false, zoneColors, zoneDefColor = false, threshold = options.threshold, gapSize = false, pixelRatio = getPixelRatio();
         if (options.boostData && options.boostData.length > 0) {
             return;
         }
@@ -260,16 +273,24 @@ function GLRenderer(postRenderCallback) {
          * @private
          */
         function vertice(x, y, checkTreshold, pointSize, color) {
+            if (pointSize === void 0) { pointSize = 1; }
             pushColor(color);
+            // Correct for pixel ratio
+            if (pixelRatio !== 1 && (!settings.useGPUTranslations ||
+                inst.skipTranslation)) {
+                x *= pixelRatio;
+                y *= pixelRatio;
+                pointSize *= pixelRatio;
+            }
             if (settings.usePreallocated) {
-                vbuffer.push(x, y, checkTreshold ? 1 : 0, pointSize || 1);
+                vbuffer.push(x, y, checkTreshold ? 1 : 0, pointSize);
                 vlen += 4;
             }
             else {
                 data.push(x);
                 data.push(y);
-                data.push(checkTreshold ? 1 : 0);
-                data.push(pointSize || 1);
+                data.push(checkTreshold ? pixelRatio : 0);
+                data.push(pointSize);
             }
         }
         /**
@@ -365,7 +386,7 @@ function GLRenderer(postRenderCallback) {
                     // We could also use one color per. vertice to get
                     // better color interpolation.
                     // If there's stroking, we do an additional rect
-                    if (series.type === 'treemap') {
+                    if (series.is('treemap')) {
                         swidth = swidth || 1;
                         scolor = color(pointAttr.stroke).rgba;
                         scolor[0] /= 255.0;
@@ -377,12 +398,12 @@ function GLRenderer(postRenderCallback) {
                     // } else {
                     //     swidth = 0;
                     // }
-                    // Fixes issues with inverted heatmaps (see #6981)
-                    // The root cause is that the coordinate system is flipped.
-                    // In other words, instead of [0,0] being top-left, it's
+                    // Fixes issues with inverted heatmaps (see #6981). The root
+                    // cause is that the coordinate system is flipped. In other
+                    // words, instead of [0,0] being top-left, it's
                     // bottom-right. This causes a vertical and horizontal flip
                     // in the resulting image, making it rotated 180 degrees.
-                    if (series.type === 'heatmap' && chart.inverted) {
+                    if (series.is('heatmap') && chart.inverted) {
                         x_1 = xAxis.len - x_1;
                         y_1 = yAxis.len - y_1;
                         width_1 = -width_1;
@@ -723,7 +744,7 @@ function GLRenderer(postRenderCallback) {
             drawMode: {
                 'area': 'lines',
                 'arearange': 'lines',
-                'areaspline': 'line_strip',
+                'areaspline': 'lines',
                 'column': 'lines',
                 'columnrange': 'lines',
                 'bar': 'lines',
@@ -769,12 +790,13 @@ function GLRenderer(postRenderCallback) {
         if (!shader) {
             return;
         }
-        shader.setUniform('xAxisTrans', axis.transA);
+        var pixelRatio = getPixelRatio();
+        shader.setUniform('xAxisTrans', axis.transA * pixelRatio);
         shader.setUniform('xAxisMin', axis.min);
-        shader.setUniform('xAxisMinPad', axis.minPixelPadding);
+        shader.setUniform('xAxisMinPad', axis.minPixelPadding * pixelRatio);
         shader.setUniform('xAxisPointRange', axis.pointRange);
-        shader.setUniform('xAxisLen', axis.len);
-        shader.setUniform('xAxisPos', axis.pos);
+        shader.setUniform('xAxisLen', axis.len * pixelRatio);
+        shader.setUniform('xAxisPos', axis.pos * pixelRatio);
         shader.setUniform('xAxisCVSCoord', (!axis.horiz));
         shader.setUniform('xAxisIsLog', (!!axis.logarithmic));
         shader.setUniform('xAxisReversed', (!!axis.reversed));
@@ -788,12 +810,13 @@ function GLRenderer(postRenderCallback) {
         if (!shader) {
             return;
         }
-        shader.setUniform('yAxisTrans', axis.transA);
+        var pixelRatio = getPixelRatio();
+        shader.setUniform('yAxisTrans', axis.transA * pixelRatio);
         shader.setUniform('yAxisMin', axis.min);
-        shader.setUniform('yAxisMinPad', axis.minPixelPadding);
+        shader.setUniform('yAxisMinPad', axis.minPixelPadding * pixelRatio);
         shader.setUniform('yAxisPointRange', axis.pointRange);
-        shader.setUniform('yAxisLen', axis.len);
-        shader.setUniform('yAxisPos', axis.pos);
+        shader.setUniform('yAxisLen', axis.len * pixelRatio);
+        shader.setUniform('yAxisPos', axis.pos * pixelRatio);
         shader.setUniform('yAxisCVSCoord', (!axis.horiz));
         shader.setUniform('yAxisIsLog', (!!axis.logarithmic));
         shader.setUniform('yAxisReversed', (!!axis.reversed));
@@ -814,12 +837,10 @@ function GLRenderer(postRenderCallback) {
      * @private
      */
     function render(chart) {
+        var pixelRatio = getPixelRatio();
         if (chart) {
-            if (!chart.chartHeight || !chart.chartWidth) {
-                // chart.setChartSize();
-            }
-            width = chart.chartWidth || 800;
-            height = chart.chartHeight || 400;
+            width = chart.chartWidth * pixelRatio;
+            height = chart.chartHeight * pixelRatio;
         }
         else {
             return false;
@@ -922,18 +943,13 @@ function GLRenderer(postRenderCallback) {
             setYAxis(s.series.yAxis);
             setThreshold(hasThreshold, translatedThreshold);
             if (s.drawMode === 'points') {
-                if (options.marker && isNumber(options.marker.radius)) {
-                    shader.setPointSize(options.marker.radius * 2.0);
-                }
-                else {
-                    shader.setPointSize(1);
-                }
+                shader.setPointSize(pick(options.marker && options.marker.radius, 0.5) * 2 * pixelRatio);
             }
             // If set to true, the toPixels translations in the shader
             // is skipped, i.e it's assumed that the value is a pixel coord.
             shader.setSkipTranslation(s.skipTranslation);
             if (s.series.type === 'bubble') {
-                shader.setBubbleUniforms(s.series, s.zMin, s.zMax);
+                shader.setBubbleUniforms(s.series, s.zMin, s.zMax, pixelRatio);
             }
             shader.setDrawAsCircle(asCircle[s.series.type] || false);
             // Do the actual rendering
@@ -944,12 +960,7 @@ function GLRenderer(postRenderCallback) {
                 }
             }
             if (s.hasMarkers && showMarkers) {
-                if (options.marker && isNumber(options.marker.radius)) {
-                    shader.setPointSize(options.marker.radius * 2.0);
-                }
-                else {
-                    shader.setPointSize(10);
-                }
+                shader.setPointSize(pick(options.marker && options.marker.radius, 5) * 2 * pixelRatio);
                 shader.setDrawAsCircle(true);
                 for (sindex = 0; sindex < s.segments.length; sindex++) {
                     vbuffer.render(s.segments[sindex].from, s.segments[sindex].to, 'POINTS');

package/es-modules/Extensions/Boost/WGLShader.js

@@ -370,7 +370,8 @@ function GLShader(gl) {
      * @private
      * @param series {Highcharts.Series} - the series to use
      */
-    function setBubbleUniforms(series, zCalcMin, zCalcMax) {
+    function setBubbleUniforms(series, zCalcMin, zCalcMax, pixelRatio) {
+        if (pixelRatio === void 0) { pixelRatio = 1; }
         var seriesOptions = series.options, zMin = Number.MAX_VALUE, zMax = -Number.MAX_VALUE;
         if (gl && shaderProgram && series.is('bubble')) {
             var pxSizes = series.getPxExtremes();
@@ -385,8 +386,8 @@ function GLShader(gl) {
             setUniform('bubbleZMin', zMin);
             setUniform('bubbleZMax', zMax);
             setUniform('bubbleZThreshold', series.options.zThreshold);
-            setUniform('bubbleMinSize', pxSizes.minPxSize);
-            setUniform('bubbleMaxSize', pxSizes.maxPxSize);
+            setUniform('bubbleMinSize', pxSizes.minPxSize * pixelRatio);
+            setUniform('bubbleMaxSize', pxSizes.maxPxSize * pixelRatio);
         }
     }
     /**

package/es-modules/Extensions/BoostCanvas.js

@@ -23,6 +23,10 @@ import SeriesRegistry from '../Core/Series/SeriesRegistry.js';
 var seriesTypes = SeriesRegistry.seriesTypes;
 import U from '../Core/Utilities.js';
 var addEvent = U.addEvent, extend = U.extend, fireEvent = U.fireEvent, isNumber = U.isNumber, merge = U.merge, pick = U.pick, wrap = U.wrap;
+// Use a blank pixel for clearing canvas (#17182)
+var b64BlankPixel = (
+/* eslint-disable-next-line max-len */
+'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
 var CHUNK_SIZE = 50000, destroyLoadingDiv;
 /* eslint-disable no-invalid-this, valid-jsdoc */
 /**
@@ -107,7 +111,9 @@ var initCanvasBoost = function () {
                 target.boostClear = function () {
                     ctx.clearRect(0, 0, target.canvas.width, target.canvas.height);
                     if (target === this) {
-                        target.renderTarget.attr({ href: '' });
+                        target.renderTarget.attr({
+                            href: b64BlankPixel
+                        });
                     }
                 };
                 target.boostClipRect = chart.renderer.clipRect();
@@ -128,7 +134,7 @@ var initCanvasBoost = function () {
                 width: width,
                 height: height,
                 style: 'pointer-events: none',
-                href: ''
+                href: b64BlankPixel
             });
             target.boostClipRect.attr(chart.getBoostClipRect(target));
             return ctx;
@@ -260,7 +266,7 @@ var initCanvasBoost = function () {
                 }
             };
             if (this.renderTarget) {
-                this.renderTarget.attr({ 'href': '' });
+                this.renderTarget.attr({ href: b64BlankPixel });
             }
             // If we are zooming out from SVG mode, destroy the graphics
             if (this.points || this.graph) {
@@ -294,7 +300,7 @@ var initCanvasBoost = function () {
             if (rawData.length > 99999) {
                 chart.options.loading = merge(loadingOptions, {
                     labelStyle: {
-                        backgroundColor: color("#ffffff" /* backgroundColor */).setOpacity(0.75).get(),
+                        backgroundColor: color("#ffffff" /* Palette.backgroundColor */).setOpacity(0.75).get(),
                         padding: '1em',
                         borderRadius: '0.5em'
                     },
@@ -496,7 +502,7 @@ var initCanvasBoost = function () {
          */
         function clear() {
             if (chart.renderTarget) {
-                chart.renderTarget.attr({ href: '' });
+                chart.renderTarget.attr({ href: b64BlankPixel });
             }
             if (chart.canvas) {
                 chart.canvas.getContext('2d').clearRect(0, 0, chart.canvas.width, chart.canvas.height);