highcharts 9.3.3 → 10.0.0

package/es-modules/Core/Series/Series.js

@@ -1034,7 +1034,7 @@ var Series = /** @class */ (function () {
             xExtremes = xAxis.getExtremes();
             min = xExtremes.min;
             max = xExtremes.max;
-            updatingNames = xAxis.categories && !xAxis.names.length;
+            updatingNames = !!(xAxis.categories && !xAxis.names.length);
         }
         // optionally filter out points outside the plot area
         if (isCartesian &&
@@ -1162,7 +1162,7 @@ var Series = /** @class */ (function () {
      * @function Highcharts.Series#generatePoints
      */
     Series.prototype.generatePoints = function () {
-        var series = this, options = series.options, dataOptions = options.data, processedXData = series.processedXData, processedYData = series.processedYData, PointClass = series.pointClass, processedDataLength = processedXData.length, cropStart = series.cropStart || 0, hasGroupedData = series.hasGroupedData, keys = options.keys, points = [], groupCropStartIndex = (options.dataGrouping &&
+        var series = this, options = series.options, dataOptions = (series.processedData || options.data), processedXData = series.processedXData, processedYData = series.processedYData, PointClass = series.pointClass, processedDataLength = processedXData.length, cropStart = series.cropStart || 0, hasGroupedData = series.hasGroupedData, keys = options.keys, points = [], groupCropStartIndex = (options.dataGrouping &&
             options.dataGrouping.groupAll ?
             cropStart :
             0);
@@ -1448,8 +1448,16 @@ var Series = /** @class */ (function () {
                     !xAxis.validatePositiveValue(xValue)) {
                 point.isNull = true;
             }
-            // Get the plotX translation
+            /**
+             * The translated X value for the point in terms of pixels. Relative
+             * to the X axis position if the series has one, otherwise relative
+             * to the plot area. Depending on the series type this value might
+             * not be defined.
+             * @name Highcharts.Point#plotX
+             * @type {number|undefined}
+             */
             point.plotX = plotX = correctFloat(// #5236
+            // Get the plotX translation
             limitedRange(xAxis.translate(// #3923
             xValue, 0, 0, 0, 1, pointPlacement, this.type === 'flags')) // #3923
             );
@@ -1506,6 +1514,14 @@ var Series = /** @class */ (function () {
             if (isNumber(yValue)) {
                 var translated = yAxis.translate(yValue, false, true, false, true);
                 if (typeof translated !== 'undefined') {
+                    /**
+                     * The translated Y value for the point in terms of pixels.
+                     * Relative to the Y axis position if the series has one,
+                     * otherwise relative to the plot area. Depending on the
+                     * series type this value might not be defined.
+                     * @name Highcharts.Point#plotY
+                     * @type {number|undefined}
+                     */
                     point.plotY = limitedRange(translated);
                 }
             }
@@ -1520,10 +1536,7 @@ var Series = /** @class */ (function () {
                 threshold ||
                 0);
             // some API data
-            point.category = (categories &&
-                typeof categories[point.x] !== 'undefined' ?
-                categories[point.x] :
-                point.x);
+            point.category = pick(categories && categories[point.x], point.x);
             // Determine auto enabling of markers (#3635, #5099)
             if (!point.isNull && point.visible !== false) {
                 if (typeof lastPlotX !== 'undefined') {
@@ -1842,26 +1855,26 @@ var Series = /** @class */ (function () {
     Series.prototype.markerAttribs = function (point, state) {
         var seriesOptions = this.options, seriesMarkerOptions = seriesOptions.marker, pointMarkerOptions = point.marker || {}, symbol = (pointMarkerOptions.symbol ||
             seriesMarkerOptions.symbol);
-        var seriesStateOptions, pointStateOptions, radius = pick(pointMarkerOptions.radius, seriesMarkerOptions.radius);
+        var seriesStateOptions, pointStateOptions, radius = pick(pointMarkerOptions.radius, seriesMarkerOptions && seriesMarkerOptions.radius);
         // Handle hover and select states
         if (state) {
             seriesStateOptions = seriesMarkerOptions.states[state];
             pointStateOptions = pointMarkerOptions.states &&
                 pointMarkerOptions.states[state];
-            radius = pick(pointStateOptions && pointStateOptions.radius, seriesStateOptions && seriesStateOptions.radius, radius + (seriesStateOptions && seriesStateOptions.radiusPlus ||
+            radius = pick(pointStateOptions && pointStateOptions.radius, seriesStateOptions && seriesStateOptions.radius, radius && radius + (seriesStateOptions && seriesStateOptions.radiusPlus ||
                 0));
         }
         point.hasImage = symbol && symbol.indexOf('url') === 0;
         if (point.hasImage) {
             radius = 0; // and subsequently width and height is not set
         }
-        var attribs = {
+        var attribs = isNumber(radius) ? {
             // Math.floor for #1843:
             x: seriesOptions.crisp ?
                 Math.floor(point.plotX - radius) :
                 point.plotX - radius,
             y: point.plotY - radius
-        };
+        } : {};
         if (radius) {
             attribs.width = attribs.height = 2 * radius;
         }
@@ -1933,7 +1946,7 @@ var Series = /** @class */ (function () {
         var series = this, chart = series.chart, issue134 = /AppleWebKit\/533/.test(win.navigator.userAgent), data = series.data || [];
         var destroy, i, point, axis;
         // add event hook
-        fireEvent(series, 'destroy');
+        fireEvent(series, 'destroy', { keepEventsForUpdate: keepEventsForUpdate });
         // remove events
         this.removeEvents(keepEventsForUpdate);
         // erase from axes
@@ -2670,7 +2683,10 @@ var Series = /** @class */ (function () {
             names[x] = point.name;
         }
         dataOptions.splice(i, 0, options);
-        if (isInTheMiddle) {
+        if (isInTheMiddle ||
+            // When processedData is present we need to splice an empty slot
+            // into series.data, otherwise generatePoints won't pick it up.
+            series.processedData) {
             series.data.splice(i, 0, null);
             series.processData();
         }
@@ -2860,6 +2876,8 @@ var Series = /** @class */ (function () {
             typeof options.pointStart !== 'undefined' ||
             typeof options.pointInterval !== 'undefined' ||
             typeof options.relativeXValue !== 'undefined' ||
+            options.joinBy ||
+            options.mapData || // #11636
             // Changes to data grouping requires new points in new group
             series.hasOptionChanged('dataGrouping') ||
             series.hasOptionChanged('pointStart') ||
@@ -2871,6 +2889,8 @@ var Series = /** @class */ (function () {
             preserve.push('data', 'isDirtyData', 'points', 'processedXData', 'processedYData', 'xIncrement', 'cropped', '_hasPointMarkers', '_hasPointLabels', 'clips', // #15420
             // Networkgraph (#14397)
             'nodes', 'layout', 
+            // Treemap
+            'level', 
             // Map specific, consider moving it to series-specific preserve-
             // properties (#10617)
             'mapMap', 'mapData', 'minY', 'maxY', 'minX', 'maxX');
@@ -2922,8 +2942,6 @@ var Series = /** @class */ (function () {
             series.remove(false, false, false, true);
             if (casting) {
                 // Modern browsers including IE11
-                // @todo slow, consider alternatives mentioned:
-                // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
                 if (Object.setPrototypeOf) {
                     Object.setPrototypeOf(series, seriesTypes[newType].prototype);
                     // Legacy (IE < 11)

package/es-modules/Core/Series/SeriesDefaults.js

@@ -1250,6 +1250,9 @@ var seriesDefaults = {
          * parameter, `event`, is passed to the function, containing common
          * event information.
          *
+         * Returning `false` cancels the default behavior, which is to show a
+         * tooltip for the point.
+         *
          * @sample {highcharts} highcharts/plotoptions/series-point-events-mouseover/
          *         Show values in the chart's corner on mouse over
          *
@@ -1972,7 +1975,7 @@ var seriesDefaults = {
              * @deprecated
              *
              * @extends   plotOptions.series.marker
-             * @excluding states
+             * @excluding states, symbol
              * @product   highcharts highstock
              */
             marker: {

package/es-modules/Core/Tooltip.js

@@ -158,6 +158,12 @@ var Tooltip = /** @class */ (function () {
      * the context here is an object holding point, series, x, y etc.
      *
      * @function Highcharts.Tooltip#defaultFormatter
+     *
+     * @param {Highcharts.Tooltip} tooltip
+     *
+     * @return {string|Array<string>}
+     * Returns a string (single tooltip and shared)
+     * or an array of strings (split tooltip)
      */
     Tooltip.prototype.defaultFormatter = function (tooltip) {
         var items = this.points || splat(this);
@@ -710,7 +716,7 @@ var Tooltip = /** @class */ (function () {
     Tooltip.prototype.refresh = function (pointOrPoints, mouseEvent) {
         var tooltip = this, chart = this.chart, options = tooltip.options, points = splat(pointOrPoints), point = points[0], pointConfig = [], formatter = options.formatter || tooltip.defaultFormatter, shared = tooltip.shared, styledMode = chart.styledMode;
         var textConfig = {};
-        if (!options.enabled) {
+        if (!options.enabled || !point.series) { // #16820
             return;
         }
         U.clearTimeout(this.hideTimer);
@@ -1289,46 +1295,23 @@ export default Tooltip;
  * @callback Highcharts.TooltipFormatterCallbackFunction
  *
  * @param {Highcharts.TooltipFormatterContextObject} this
- *        Context to format
+ * Context to format
  *
  * @param {Highcharts.Tooltip} tooltip
- *        The tooltip instance
+ * The tooltip instance
  *
  * @return {false|string|Array<(string|null|undefined)>|null|undefined}
- *         Formatted text or false
+ * Formatted text or false
  */
 /**
+ * Configuration for the tooltip formatters.
+ *
  * @interface Highcharts.TooltipFormatterContextObject
+ * @extends Highcharts.PointLabelObject
  */ /**
-* @name Highcharts.TooltipFormatterContextObject#color
-* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-*/ /**
-* @name Highcharts.TooltipFormatterContextObject#colorIndex
-* @type {number|undefined}
-*/ /**
-* @name Highcharts.TooltipFormatterContextObject#key
-* @type {number}
-*/ /**
-* @name Highcharts.TooltipFormatterContextObject#percentage
-* @type {number|undefined}
-*/ /**
-* @name Highcharts.TooltipFormatterContextObject#point
-* @type {Highcharts.Point}
-*/ /**
+* Array of points in shared tooltips.
 * @name Highcharts.TooltipFormatterContextObject#points
 * @type {Array<Highcharts.TooltipFormatterContextObject>|undefined}
-*/ /**
-* @name Highcharts.TooltipFormatterContextObject#series
-* @type {Highcharts.Series}
-*/ /**
-* @name Highcharts.TooltipFormatterContextObject#total
-* @type {number|undefined}
-*/ /**
-* @name Highcharts.TooltipFormatterContextObject#x
-* @type {number}
-*/ /**
-* @name Highcharts.TooltipFormatterContextObject#y
-* @type {number}
 */
 /**
  * A callback function to place the tooltip in a specific position.

package/es-modules/Core/Utilities.js

@@ -197,7 +197,9 @@ function cleanRecursively(newer, older) {
             // Arrays, primitives and DOM nodes are copied directly
         }
         else if (isObject(newer[key]) ||
-            newer[key] !== older[key]) {
+            newer[key] !== older[key] ||
+            // If the newer key is explicitly undefined, keep it (#10525)
+            (key in newer && !(key in older))) {
             result[key] = newer[key];
         }
     });
@@ -365,7 +367,7 @@ function defined(obj) {
  * @param {Highcharts.HTMLDOMElement|Highcharts.SVGDOMElement} elem
  *        The DOM element to receive the attribute(s).
  *
- * @param {string|Highcharts.HTMLAttributes|Highcharts.SVGAttributes} [prop]
+ * @param {string|Highcharts.HTMLAttributes|Highcharts.SVGAttributes} [keyOrAttribs]
  *        The property or an object of key-value pairs.
  *
  * @param {number|string} [value]
@@ -374,33 +376,34 @@ function defined(obj) {
  * @return {string|null|undefined}
  *         When used as a getter, return the value.
  */
-function attr(elem, prop, value) {
+function attr(elem, keyOrAttribs, value) {
+    var isGetter = isString(keyOrAttribs) && !defined(value);
     var ret;
-    // if the prop is a string
-    if (isString(prop)) {
-        // set the value
+    var attrSingle = function (value, key) {
+        // Set the value
         if (defined(value)) {
-            elem.setAttribute(prop, value);
-            // get the value
+            elem.setAttribute(key, value);
+            // Get the value
         }
-        else if (elem && elem.getAttribute) {
-            ret = elem.getAttribute(prop);
+        else if (isGetter) {
+            ret = elem.getAttribute(key);
             // IE7 and below cannot get class through getAttribute (#7850)
-            if (!ret && prop === 'class') {
-                ret = elem.getAttribute(prop + 'Name');
+            if (!ret && key === 'class') {
+                ret = elem.getAttribute(key + 'Name');
             }
+            // Remove the value
         }
-        // else if prop is defined, it is a hash of key/value pairs
+        else {
+            elem.removeAttribute(key);
+        }
+    };
+    // If keyOrAttribs is a string
+    if (isString(keyOrAttribs)) {
+        attrSingle(value, keyOrAttribs);
+        // Else if keyOrAttribs is defined, it is a hash of key/value pairs
     }
     else {
-        objectEach(prop, function (val, key) {
-            if (defined(val)) {
-                elem.setAttribute(key, val);
-            }
-            else {
-                elem.removeAttribute(key);
-            }
-        });
+        objectEach(keyOrAttribs, attrSingle);
     }
     return ret;
 }
@@ -451,10 +454,8 @@ function syncTimeout(fn, delay, context) {
  *
  * @function Highcharts.clearTimeout
  *
- * @param {number} id
- *        Id of a timeout.
- *
- * @return {void}
+ * @param {number|undefined} id
+ * Id of a timeout.
  */
 function internalClearTimeout(id) {
     if (defined(id)) {
@@ -524,9 +525,8 @@ function pick() {
  */
 function css(el, styles) {
     if (H.isMS && !H.svg) { // #2686
-        if (styles && typeof styles.opacity !== 'undefined') {
-            styles.filter =
-                'alpha(opacity=' + (styles.opacity * 100) + ')';
+        if (styles && defined(styles.opacity)) {
+            styles.filter = "alpha(opacity=" + styles.opacity * 100 + ")";
         }
     }
     extend(el.style, styles);

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

@@ -1140,6 +1140,13 @@ merge(Annotation.prototype,
          * @since     7.1.0
          * @apioption annotations.events.afterUpdate
          */
+        /**
+         * Fires when the annotation is clicked.
+         *
+         * @type      {Highcharts.EventCallbackFunction<Highcharts.Annotation>}
+         * @since     7.1.0
+         * @apioption annotations.events.click
+         */
         /**
          * Event callback when annotation is removed from the chart.
          *

package/es-modules/Extensions/Annotations/MockPoint.js

@@ -329,7 +329,7 @@ var MockPoint = /** @class */ (function () {
             this.plotX = xAxis.toPixels(options.x, true);
         }
         else {
-            this.x = null;
+            this.x = void 0;
             this.plotX = options.x;
         }
         if (yAxis) {

package/es-modules/Extensions/Annotations/NavigationBindings.js

@@ -1094,7 +1094,7 @@ setOptions({
          * from a different server.
          *
          * @type      {string}
-         * @default   https://code.highcharts.com/9.3.3/gfx/stock-icons/
+         * @default   https://code.highcharts.com/10.0.0/gfx/stock-icons/
          * @since     7.1.3
          * @apioption navigation.iconsURL
          */

package/es-modules/Extensions/Annotations/Popup.js

@@ -1111,7 +1111,7 @@ addEvent(NavigationBindings, 'showPopup', function (config) {
         this.popup = new H.Popup(this.chart.container, (this.chart.options.navigation.iconsURL ||
             (this.chart.options.stockTools &&
                 this.chart.options.stockTools.gui.iconsURL) ||
-            'https://code.highcharts.com/9.3.3/gfx/stock-icons/'), this.chart);
+            'https://code.highcharts.com/10.0.0/gfx/stock-icons/'), this.chart);
     }
     this.popup.showForm(config.formType, this.chart, config.options, config.onSubmit);
 });

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

@@ -47,11 +47,13 @@ var BasicAnnotation = /** @class */ (function (_super) {
         var options = this.options;
         if (options.shapes) {
             delete options.labelOptions;
-            if (options.shapes[0].type) {
-                this.basicType = options.shapes[0].type;
+            var type = options.shapes[0].type;
+            // The rectangle is rendered as a path, whereas other basic shapes
+            // are rendered as their respecitve SVG shapes.
+            if (type && type !== 'path') {
+                this.basicType = type;
             }
             else {
-                // Defalut shape would be rectangle.
                 this.basicType = 'rectangle';
             }
         }

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 =
@@ -242,6 +242,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');