highcharts 9.3.2 → 10.1.0

package/es-modules/Core/Chart/ChartDefaults.js

@@ -20,18 +20,19 @@
  */
 var ChartDefaults = {
     /**
-     * Default `mapData` for all series. If set to a string, it functions
-     * as an index into the `Highcharts.maps` array. Otherwise it is
-     * interpreted as map data.
+     * Default `mapData` for all series, in terms of a GeoJSON or TopoJSON
+     * object. If set to a string, it functions as an index into the
+     * `Highcharts.maps` array.
      *
-     * @see [mapData](#series.map.mapData)
+     * For picking out individual shapes and geometries to use for each series
+     * of the map, see [series.mapData](#series.map.mapData).
      *
      * @sample    maps/demo/geojson
-     *            Loading geoJSON data
+     *            Loading GeoJSON data
      * @sample    maps/chart/topojson
-     *            Loading topoJSON converted to geoJSON
+     *            Loading TopoJSON data
      *
-     * @type      {string|Array<*>|Highcharts.GeoJSON}
+     * @type      {string|Array<*>|Highcharts.GeoJSON|Highcharts.TopoJSON}
      * @since     5.0.0
      * @product   highmaps
      * @apioption chart.map
@@ -46,7 +47,7 @@ var ChartDefaults = {
      * @apioption chart.mapTransforms
      */
     /**
-     * When using multiple axis, the ticks of two or more opposite axes
+     * When using multiple axes, the ticks of two or more opposite axes
      * will automatically be aligned by adding ticks to the axis or axes
      * with the least ticks, as if `tickAmount` were specified.
      *
@@ -54,8 +55,8 @@ var ChartDefaults = {
      * lines look messy, it's a good idea to hide them for the secondary
      * axis by setting `gridLineWidth` to 0.
      *
-     * If `startOnTick` or `endOnTick` in an Axis options are set to false,
-     * then the `alignTicks ` will be disabled for the Axis.
+     * If `startOnTick` or `endOnTick` in the axis options are set to false,
+     * then the `alignTicks ` will be disabled for the axis.
      *
      * Disabled for logarithmic axes.
      *
@@ -73,6 +74,25 @@ var ChartDefaults = {
      * @product   highcharts highstock gantt
      * @apioption chart.alignTicks
      */
+    /**
+     * When using multiple axes, align the thresholds. When this is true, other
+     * ticks will also be aligned.
+     *
+     * Note that for line series and some other series types, the `threshold`
+     * option is set to `null` by default. This will in turn cause their y-axis
+     * to not have a threshold. In order to avoid that, set the series
+     * `threshold` to 0 or another number.
+     *
+     * If `startOnTick` or `endOnTick` in the axis options are set to false, or
+     * if the axis is logarithmic, the threshold will not be aligned.
+     *
+     * @sample {highcharts} highcharts/chart/alignthresholds/ Set to true
+     *
+     * @since 10.0.0
+     * @product   highcharts highstock gantt
+     * @apioption chart.alignThresholds
+     */
+    alignThresholds: false,
     /**
      * Set the overall animation for all chart updating. Animation can be
      * disabled throughout the chart by setting it to false here. It can
@@ -464,6 +484,17 @@ var ChartDefaults = {
      * @since      5.0.0
      */
     colorCount: 10,
+    /**
+     * By default, (because of memory and performance reasons) the chart does
+     * not copy the data but keeps it as a reference. In some cases, this might
+     * result in mutating the original data source. In order to prevent that,
+     * set that property to false. Please note that changing that might decrease
+     * performance, especially with bigger sets of data.
+     *
+     * @type       {boolean}
+     * @since 10.1.0
+     */
+    allowMutatingData: true,
     /**
      * Alias of `type`.
      *
@@ -876,9 +907,10 @@ var ChartDefaults = {
      *         Y
      * @sample {highstock} stock/chart/zoomtype-xy/
      *         Xy
+     * @sample {highmaps} maps/chart/zoomtype-xy/
+     *         Map with selection zoom
      *
      * @type       {string}
-     * @product    highcharts highstock gantt
      * @validvalue ["x", "y", "xy"]
      * @apioption  chart.zoomType
      */

package/es-modules/Core/Chart/MapChart.js

@@ -24,10 +24,9 @@ var __extends = (this && this.__extends) || (function () {
 import Chart from './Chart.js';
 import D from '../DefaultOptions.js';
 var getOptions = D.getOptions;
-import MapView from '../../Maps/MapView.js';
 import SVGRenderer from '../Renderer/SVG/SVGRenderer.js';
 import U from '../Utilities.js';
-var addEvent = U.addEvent, clamp = U.clamp, isNumber = U.isNumber, merge = U.merge, pick = U.pick;
+var merge = U.merge, pick = U.pick;
 import '../../Maps/MapSymbols.js';
 /**
  * Map-optimized chart. Use {@link Highcharts.Chart|Chart} for common charts.
@@ -61,10 +60,6 @@ var MapChart = /** @class */ (function (_super) {
      * @emits Highcharts.MapChart#event:afterInit
      */
     MapChart.prototype.init = function (userOptions, callback) {
-        // Initialize the MapView after initialization, but before firstRender
-        addEvent(this, 'afterInit', function () {
-            this.mapView = new MapView(this, this.options.mapView);
-        });
         var defaultCreditsOptions = getOptions().credits;
         var options = merge({
             chart: {

package/es-modules/Core/Chart/StockChart.js

@@ -562,7 +562,7 @@ addEvent(Axis, 'afterDrawCrosshair', function (event) {
         text: text,
         x: posx,
         y: posy,
-        visibility: isInside ? 'visible' : 'hidden'
+        visibility: isInside ? 'inherit' : 'hidden'
     });
     crossBox = crossLabel.getBBox();
     // now it is placed we can correct its position

package/es-modules/Core/DefaultOptions.js

@@ -1917,18 +1917,20 @@ var defaultOptions = {
          * @apioption tooltip.pointFormatter
          */
         /**
-         * A callback function to place the tooltip in a default position. The
+         * A callback function to place the tooltip in a custom position. The
          * callback receives three parameters: `labelWidth`, `labelHeight` and
          * `point`, where point contains values for `plotX` and `plotY` telling
          * where the reference point is in the plot area. Add `chart.plotLeft`
          * and `chart.plotTop` to get the full coordinates.
          *
+         * To find the actual hovered `Point` instance, use
+         * `this.chart.hoverPoint`. For shared or split tooltips, all the hover
+         * points are available in `this.chart.hoverPoints`.
+         *
          * Since v7, when [tooltip.split](#tooltip.split) option is enabled,
          * positioner is called for each of the boxes separately, including
          * xAxis header. xAxis header is not a point, instead `point` argument
-         * contains info:
-         * `{ plotX: Number, plotY: Number, isHeader: Boolean }`
-         *
+         * contains info: `{ plotX: Number, plotY: Number, isHeader: Boolean }`
          *
          * The return should be an object containing x and y values, for example
          * `{ x: 100, y: 100 }`.
@@ -2271,6 +2273,8 @@ var defaultOptions = {
          *
          * @sample {highcharts} highcharts/tooltip/pointformat/
          *         A different point format with value suffix
+         * @sample {highcharts|highstock} highcharts/tooltip/pointformat-extra-information/
+         *         Show extra information about points in the tooltip
          * @sample {highmaps} maps/tooltip/format/
          *         Format demo
          *

package/es-modules/Core/Geometry/PolygonClip.js

@@ -0,0 +1,84 @@
+/* *
+ *
+ *  (c) 2010-2021 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+var isInside = function (clipEdge1, clipEdge2, p) {
+    return (clipEdge2[0] - clipEdge1[0]) * (p[1] - clipEdge1[1]) >
+        (clipEdge2[1] - clipEdge1[1]) * (p[0] - clipEdge1[0]);
+};
+var intersection = function (clipEdge1, clipEdge2, prevPoint, currentPoint) {
+    var dc = [
+        clipEdge1[0] - clipEdge2[0],
+        clipEdge1[1] - clipEdge2[1]
+    ], dp = [
+        prevPoint[0] - currentPoint[0],
+        prevPoint[1] - currentPoint[1]
+    ], n1 = clipEdge1[0] * clipEdge2[1] - clipEdge1[1] * clipEdge2[0], n2 = prevPoint[0] * currentPoint[1] - prevPoint[1] * currentPoint[0], n3 = 1 / (dc[0] * dp[1] - dc[1] * dp[0]), intersection = [
+        (n1 * dp[0] - n2 * dc[0]) * n3,
+        (n1 * dp[1] - n2 * dc[1]) * n3
+    ];
+    intersection.isIntersection = true;
+    return intersection;
+};
+var PolygonClip;
+(function (PolygonClip) {
+    // Simple line string clipping. Clip to bounds and insert intersection
+    // points.
+    PolygonClip.clipLineString = function (line, boundsPolygon) {
+        var ret = [], l = PolygonClip.clipPolygon(line, boundsPolygon, false);
+        for (var i = 1; i < l.length; i++) {
+            // Insert gap where two intersections follow each other
+            if (l[i].isIntersection && l[i - 1].isIntersection) {
+                ret.push(l.splice(0, i));
+                i = 0;
+            }
+            // Push the rest
+            if (i === l.length - 1) {
+                ret.push(l);
+            }
+        }
+        return ret;
+    };
+    // Clip a polygon to another polygon using the Sutherland/Hodgman algorithm.
+    PolygonClip.clipPolygon = function (subjectPolygon, boundsPolygon, closed) {
+        if (closed === void 0) { closed = true; }
+        var clipEdge1 = boundsPolygon[boundsPolygon.length - 1], clipEdge2, prevPoint, currentPoint, outputList = subjectPolygon;
+        for (var j = 0; j < boundsPolygon.length; j++) {
+            var inputList = outputList;
+            clipEdge2 = boundsPolygon[j];
+            outputList = [];
+            prevPoint = closed ?
+                // Polygon, wrap around
+                inputList[inputList.length - 1] :
+                // Open line string, don't wrap
+                inputList[0];
+            for (var i = 0; i < inputList.length; i++) {
+                currentPoint = inputList[i];
+                if (isInside(clipEdge1, clipEdge2, currentPoint)) {
+                    if (!isInside(clipEdge1, clipEdge2, prevPoint)) {
+                        outputList.push(intersection(clipEdge1, clipEdge2, prevPoint, currentPoint));
+                    }
+                    outputList.push(currentPoint);
+                }
+                else if (isInside(clipEdge1, clipEdge2, prevPoint)) {
+                    outputList.push(intersection(clipEdge1, clipEdge2, prevPoint, currentPoint));
+                }
+                prevPoint = currentPoint;
+            }
+            clipEdge1 = clipEdge2;
+        }
+        return outputList;
+    };
+})(PolygonClip || (PolygonClip = {}));
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default PolygonClip;

package/es-modules/Core/Globals.js

@@ -8,23 +8,6 @@
  *
  * */
 'use strict';
-/* *
- *
- *  Constants
- *
- * */
-/**
- * @private
- * @deprecated
- * @todo Rename UMD argument `win` to `window`; move code to `Globals.win`
- */
-var w = (typeof win !== 'undefined' ?
-    win :
-    typeof window !== 'undefined' ?
-        window :
-        {}
-// eslint-disable-next-line node/no-unsupported-features/es-builtins
-);
 /* *
  *
  *  Namespace
@@ -40,7 +23,10 @@ var Globals;
      *  Constants
      *
      * */
-    Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '9.3.2', Globals.win = w, Globals.doc = Globals.win.document, Globals.svg = (Globals.doc &&
+    Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '10.1.0', Globals.win = (typeof window !== 'undefined' ?
+        window :
+        {}), // eslint-disable-line node/no-unsupported-features/es-builtins
+    Globals.doc = Globals.win.document, Globals.svg = (Globals.doc &&
         Globals.doc.createElementNS &&
         !!Globals.doc.createElementNS(Globals.SVG_NS, 'svg').createSVGRect), Globals.userAgent = (Globals.win.navigator && Globals.win.navigator.userAgent) || '', Globals.isChrome = Globals.userAgent.indexOf('Chrome') !== -1, Globals.isFirefox = Globals.userAgent.indexOf('Firefox') !== -1, Globals.isMS = /(edge|msie|trident)/i.test(Globals.userAgent) && !Globals.win.opera, Globals.isSafari = !Globals.isChrome && Globals.userAgent.indexOf('Safari') !== -1, Globals.isTouchDevice = /(Mobile|Android|Windows Phone)/.test(Globals.userAgent), Globals.isWebKit = Globals.userAgent.indexOf('AppleWebKit') !== -1, Globals.deg2rad = Math.PI * 2 / 360, Globals.hasBidiBug = (Globals.isFirefox &&
         parseInt(Globals.userAgent.split('Firefox/')[1], 10) < 4 // issue #38

package/es-modules/Core/HttpUtilities.js

@@ -63,21 +63,26 @@ function ajax(attr) {
     objectEach(options.headers, function (val, key) {
         r.setRequestHeader(key, val);
     });
+    if (options.responseType) {
+        r.responseType = options.responseType;
+    }
     // @todo lacking timeout handling
     r.onreadystatechange = function () {
         var res;
         if (r.readyState === 4) {
             if (r.status === 200) {
-                res = r.responseText;
-                if (options.dataType === 'json') {
-                    try {
-                        res = JSON.parse(res);
-                    }
-                    catch (e) {
-                        return handleError(r, e);
+                if (options.responseType !== 'blob') {
+                    res = r.responseText;
+                    if (options.dataType === 'json') {
+                        try {
+                            res = JSON.parse(res);
+                        }
+                        catch (e) {
+                            return handleError(r, e);
+                        }
                     }
                 }
-                return options.success && options.success(res);
+                return options.success && options.success(res, r);
             }
             handleError(r, r.responseText);
         }

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

@@ -68,7 +68,7 @@ var Legend = /** @class */ (function () {
         this.maxItemWidth = 0;
         this.maxLegendWidth = 0;
         this.offsetWidth = 0;
-        this.options = {};
+        this.options = void 0;
         this.padding = 0;
         this.pages = [];
         this.proximate = false;
@@ -378,7 +378,7 @@ var Legend = /** @class */ (function () {
                  * @name Highcharts.Legend#title
                  * @type {Highcharts.SVGElement}
                  */
-                this.title = this.chart.renderer.label(titleOptions.text, padding - 3, padding - 4, null, null, null, options.useHTML, null, 'legend-title')
+                this.title = this.chart.renderer.label(titleOptions.text, padding - 3, padding - 4, void 0, void 0, void 0, options.useHTML, void 0, 'legend-title')
                     .attr({ zIndex: 1 });
                 if (!this.chart.styledMode) {
                     this.title.css(titleOptions.style);
@@ -704,8 +704,7 @@ var Legend = /** @class */ (function () {
         legend.lastItemY = 0;
         legend.widthOption = relativeLength(options.width, chart.spacingBox.width - padding);
         // Compute how wide the legend is allowed to be
-        allowedWidth =
-            chart.spacingBox.width - 2 * padding - options.x;
+        allowedWidth = chart.spacingBox.width - 2 * padding - options.x;
         if (['rm', 'lm'].indexOf(legend.getAlignment().substring(0, 2)) > -1) {
             allowedWidth /= 2;
         }
@@ -778,7 +777,6 @@ var Legend = /** @class */ (function () {
                 r: options.borderRadius
             })
                 .add(legendGroup);
-            box.isNew = true;
         }
         // Presentational
         if (!chart.styledMode) {
@@ -791,13 +789,12 @@ var Legend = /** @class */ (function () {
                 .shadow(options.shadow);
         }
         if (legendWidth > 0 && legendHeight > 0) {
-            box[box.isNew ? 'attr' : 'animate'](box.crisp.call({}, {
+            box[box.placed ? 'animate' : 'attr'](box.crisp.call({}, {
                 x: 0,
                 y: 0,
                 width: legendWidth,
                 height: legendHeight
             }, box.strokeWidth()));
-            box.isNew = false;
         }
         // hide the border if no items
         box[display ? 'show' : 'hide']();
@@ -839,6 +836,11 @@ var Legend = /** @class */ (function () {
         if (y !== alignTo.y) {
             alignTo = merge(alignTo, { y: y });
         }
+        if (!chart.hasRendered) {
+            // Avoid animation when adjusting alignment for responsiveness and
+            // colorAxis label layout
+            this.group.placed = false;
+        }
         this.group.align(merge(options, {
             width: this.legendWidth,
             height: this.legendHeight,
@@ -953,7 +955,7 @@ var Legend = /** @class */ (function () {
                 });
                 this.pager = renderer.text('', 15, 10)
                     .addClass('highcharts-legend-navigation');
-                if (!chart.styledMode) {
+                if (!chart.styledMode && navOptions.style) {
                     this.pager.css(navOptions.style);
                 }
                 this.pager.add(nav);
@@ -1008,7 +1010,7 @@ var Legend = /** @class */ (function () {
             this.nav.attr({
                 translateX: padding,
                 translateY: clipHeight + this.padding + 7 + this.titleHeight,
-                visibility: 'visible'
+                visibility: 'inherit'
             });
             [this.up, this.upTracker].forEach(function (elem) {
                 elem.attr({

package/es-modules/Core/Navigator.js

@@ -747,19 +747,21 @@ var Navigator = /** @class */ (function () {
             maskInside,
             !maskInside
         ].forEach(function (hasMask, index) {
-            navigator.shades[index] = renderer.rect()
+            var shade = renderer.rect()
                 .addClass('highcharts-navigator-mask' +
                 (index === 1 ? '-inside' : '-outside'))
                 .add(navigatorGroup);
             if (!chart.styledMode) {
-                navigator.shades[index]
-                    .attr({
+                shade.attr({
                     fill: hasMask ?
                         navigatorOptions.maskFill :
                         'rgba(0,0,0,0)'
-                })
-                    .css((index === 1) && mouseCursor);
+                });
+                if (index === 1) {
+                    shade.css(mouseCursor);
+                }
             }
+            navigator.shades[index] = shade;
         });
         // Create the outline:
         navigator.outline = renderer.path()
@@ -902,7 +904,7 @@ var Navigator = /** @class */ (function () {
         zoomedMin = Math.round(navigator.zoomedMin);
         if (navigatorEnabled) {
             navigator.navigatorGroup.attr({
-                visibility: 'visible'
+                visibility: 'inherit'
             });
             // Place elements
             verb = rendered && !navigator.hasDragged ? 'animate' : 'attr';
@@ -1643,7 +1645,8 @@ var Navigator = /** @class */ (function () {
     Navigator.prototype.getBaseSeriesMin = function (currentSeriesMin) {
         return this.baseSeries.reduce(function (min, series) {
             // (#10193)
-            return Math.min(min, series.xData ? series.xData[0] : min);
+            return Math.min(min, series.xData && series.xData.length ?
+                series.xData[0] : min);
         }, currentSeriesMin);
     };
     /**

package/es-modules/Core/Pointer.js

@@ -600,9 +600,9 @@ var Pointer = /** @class */ (function () {
      * name.
      */
     Pointer.prototype.inClass = function (element, className) {
-        var elemClassName;
-        while (element) {
-            elemClassName = attr(element, 'class');
+        var elem = element, elemClassName;
+        while (elem) {
+            elemClassName = attr(elem, 'class');
             if (elemClassName) {
                 if (elemClassName.indexOf(className) !== -1) {
                     return true;
@@ -611,7 +611,7 @@ var Pointer = /** @class */ (function () {
                     return false;
                 }
             }
-            element = element.parentNode;
+            elem = elem.parentElement;
         }
     };
     /**
@@ -652,6 +652,9 @@ var Pointer = /** @class */ (function () {
      * properties `chartX` and `chartY` in order to work on the internal
      * coordinate system.
      *
+     * On map charts, the properties `lon` and `lat` are added to the event
+     * object given that the chart has projection information.
+     *
      * @function Highcharts.Pointer#normalize
      *
      * @param {global.MouseEvent|global.PointerEvent|global.TouchEvent} e
@@ -1199,11 +1202,12 @@ var Pointer = /** @class */ (function () {
              * The mouseOver event should be triggered when hoverPoint
              * is correct.
              */
-            hoverPoint.firePointEvent('mouseOver');
-            // Draw tooltip if necessary
-            if (tooltip) {
-                tooltip.refresh(useSharedTooltip ? points : hoverPoint, e);
-            }
+            hoverPoint.firePointEvent('mouseOver', void 0, function () {
+                // Draw tooltip if necessary
+                if (tooltip && hoverPoint) {
+                    tooltip.refresh(useSharedTooltip ? points : hoverPoint, e);
+                }
+            });
             // Update positions (regardless of kdpoint or hoverPoint)
         }
         else if (followPointer && tooltip && !tooltip.isHidden) {
@@ -1232,7 +1236,7 @@ var Pointer = /** @class */ (function () {
                 point = chart.hoverPoint; // #13002
                 if (!point || point.series[axis.coll] !== axis) {
                     point = find(points, function (p) {
-                        return p.series[axis.coll] === axis;
+                        return p.series && p.series[axis.coll] === axis;
                     });
                 }
             }
@@ -1320,7 +1324,7 @@ var Pointer = /** @class */ (function () {
         var hoverChart = H.charts[pick(Pointer.hoverChartIndex, -1)];
         if (hoverChart &&
             hoverChart !== chart) {
-            hoverChart.pointer.onContainerMouseLeave({ relatedTarget: true });
+            hoverChart.pointer.onContainerMouseLeave({ relatedTarget: chart.container });
         }
         if (!hoverChart ||
             !hoverChart.mouseIsDown) {

package/es-modules/Core/Renderer/HTML/AST.js

@@ -11,7 +11,7 @@
 import H from '../../Globals.js';
 var SVG_NS = H.SVG_NS, win = H.win;
 import U from '../../Utilities.js';
-var attr = U.attr, createElement = U.createElement, error = U.error, isFunction = U.isFunction, isString = U.isString, objectEach = U.objectEach, splat = U.splat;
+var attr = U.attr, createElement = U.createElement, css = U.css, error = U.error, isFunction = U.isFunction, isString = U.isString, objectEach = U.objectEach, splat = U.splat;
 var trustedTypes = win.trustedTypes;
 /* *
  *
@@ -91,12 +91,25 @@ var AST = /** @class */ (function () {
                 valid = isString(val) && AST.allowedReferences.some(function (ref) { return val.indexOf(ref) === 0; });
             }
             if (!valid) {
-                error("Highcharts warning: Invalid attribute '" + key + "' in config");
+                error(33, false, void 0, {
+                    'Invalid attribute in config': "" + key
+                });
                 delete attributes[key];
             }
         });
         return attributes;
     };
+    AST.parseStyle = function (style) {
+        return style
+            .split(';')
+            .reduce(function (styles, line) {
+            var pair = line.split(':').map(function (s) { return s.trim(); }), key = pair.shift();
+            if (key && pair.length) {
+                styles[key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); })] = pair.join(':'); // #17146
+            }
+            return styles;
+        }, {});
+    };
     /**
      * Utility function to set html content for an element by passing in a
      * markup string. The markup is safely parsed by the AST class to avoid
@@ -152,12 +165,15 @@ var AST = /** @class */ (function () {
                 var textNode = item.textContent ?
                     H.doc.createTextNode(item.textContent) :
                     void 0;
+                // Whether to ignore the AST filtering totally, #15345
+                var bypassHTMLFiltering = AST.bypassHTMLFiltering;
                 var node;
                 if (tagName) {
                     if (tagName === '#text') {
                         node = textNode;
                     }
-                    else if (AST.allowedTags.indexOf(tagName) !== -1) {
+                    else if (AST.allowedTags.indexOf(tagName) !== -1 ||
+                        bypassHTMLFiltering) {
                         var NS = tagName === 'svg' ?
                             SVG_NS :
                             (subParent.namespaceURI || SVG_NS);
@@ -169,11 +185,17 @@ var AST = /** @class */ (function () {
                             if (key !== 'tagName' &&
                                 key !== 'attributes' &&
                                 key !== 'children' &&
+                                key !== 'style' &&
                                 key !== 'textContent') {
                                 attributes_1[key] = val;
                             }
                         });
-                        attr(element, AST.filterUserAttributes(attributes_1));
+                        attr(element, bypassHTMLFiltering ?
+                            attributes_1 :
+                            AST.filterUserAttributes(attributes_1));
+                        if (item.style) {
+                            css(element, item.style);
+                        }
                         // Add text content
                         if (textNode) {
                             element.appendChild(textNode);
@@ -183,8 +205,9 @@ var AST = /** @class */ (function () {
                         node = element;
                     }
                     else {
-                        error('Highcharts warning: Invalid tagName ' +
-                            tagName + ' in config');
+                        error(33, false, void 0, {
+                            'Invalid tagName in config': tagName
+                        });
                     }
                 }
                 // Add to the tree
@@ -212,7 +235,11 @@ var AST = /** @class */ (function () {
      */
     AST.prototype.parseMarkup = function (markup) {
         var nodes = [];
-        markup = markup.trim();
+        markup = markup
+            .trim()
+            // The style attribute throws a warning when parsing when CSP is
+            // enabled (#6884), so use an alias and pick it up below
+            .replace(/ style="/g, ' data-style="');
         var doc;
         if (hasValidDOMParser) {
             doc = new DOMParser().parseFromString(trustedTypesPolicy ?
@@ -238,7 +265,12 @@ var AST = /** @class */ (function () {
             if (parsedAttributes) {
                 var attributes_2 = {};
                 [].forEach.call(parsedAttributes, function (attrib) {
-                    attributes_2[attrib.name] = attrib.value;
+                    if (attrib.name === 'data-style') {
+                        astNode.style = AST.parseStyle(attrib.value);
+                    }
+                    else {
+                        attributes_2[attrib.name] = attrib.value;
+                    }
                 });
                 astNode.attributes = attributes_2;
             }
@@ -442,6 +474,34 @@ var AST = /** @class */ (function () {
         '#text'
     ];
     AST.emptyHTML = emptyHTML;
+    /**
+     * Allow all custom SVG and HTML attributes, references and tags (together
+     * with potentially harmful ones) to be added to the DOM from the chart
+     * configuration. In other words, disable the the allow-listing which is the
+     * primary functionality of the AST.
+     *
+     * WARNING: Setting this property to `true` while allowing untrusted user
+     * data in the chart configuration will expose your application to XSS
+     * security risks!
+     *
+     * Note that in case you want to allow a known set of tags or attributes,
+     * you should allow-list them instead of disabling the filtering totally.
+     * See [allowedAttributes](Highcharts.AST#.allowedAttributes),
+     * [allowedReferences](Highcharts.AST#.allowedReferences) and
+     * [allowedTags](Highcharts.AST#.allowedTags). The `bypassHTMLFiltering`
+     * setting is intended only for those cases where allow-listing is not
+     * practical, and the chart configuration already comes from a secure
+     * source.
+     *
+     * @example
+     * // Allow all custom attributes, references and tags (disable DOM XSS
+     * // filtering)
+     * Highcharts.AST.bypassHTMLFiltering = true;
+     *
+     * @name Highcharts.AST.bypassHTMLFiltering
+     * @static
+     */
+    AST.bypassHTMLFiltering = false;
     return AST;
 }());
 /* *