highcharts 9.2.0 → 9.3.1

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

@@ -916,10 +916,14 @@ var Legend = /** @class */ (function () {
                 if (lastY) {
                     allItems[i - 1].pageIx = len - 1;
                 }
-                if (i === allItems.length - 1 &&
+                // add the last page if needed (#2617, #13683)
+                if (
+                // check the last item
+                i === allItems.length - 1 &&
+                    // if adding next page is needed
                     y + h - pages[len - 1] > clipHeight &&
-                    y !== lastY // #2617
-                ) {
+                    // and will fully fit inside a new page
+                    h <= clipHeight) {
                     pages.push(y);
                     item.pageIx = len;
                 }

package/es-modules/Core/Navigator.js

@@ -17,7 +17,6 @@ var hasTouch = H.hasTouch, isTouchDevice = H.isTouchDevice;
 import NavigatorAxis from './Axis/NavigatorAxis.js';
 import D from './DefaultOptions.js';
 var defaultOptions = D.defaultOptions;
-import Palette from './Color/Palette.js';
 import RendererRegistry from './Renderer/RendererRegistry.js';
 import Scrollbar from './Scrollbar.js';
 import Series from './Series/Series.js';
@@ -203,13 +202,13 @@ extend(defaultOptions, {
              *
              * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
              */
-            backgroundColor: Palette.neutralColor5,
+            backgroundColor: "#f2f2f2" /* neutralColor5 */,
             /**
              * The stroke for the handle border and the stripes inside.
              *
              * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
              */
-            borderColor: Palette.neutralColor40
+            borderColor: "#999999" /* neutralColor40 */
         },
         /**
          * The color of the mask covering the areas of the navigator series
@@ -226,7 +225,7 @@ extend(defaultOptions, {
          * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
          * @default rgba(102,133,194,0.3)
          */
-        maskFill: color(Palette.highlightColor60).setOpacity(0.3).get(),
+        maskFill: color("#6685c2" /* highlightColor60 */).setOpacity(0.3).get(),
         /**
          * The color of the line marking the currently zoomed area in the
          * navigator.
@@ -237,7 +236,7 @@ extend(defaultOptions, {
          * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
          * @default #cccccc
          */
-        outlineColor: Palette.neutralColor20,
+        outlineColor: "#cccccc" /* neutralColor20 */,
         /**
          * The width of the line marking the currently zoomed area in the
          * navigator.
@@ -428,7 +427,7 @@ extend(defaultOptions, {
             className: 'highcharts-navigator-xaxis',
             tickLength: 0,
             lineWidth: 0,
-            gridLineColor: Palette.neutralColor10,
+            gridLineColor: "#e6e6e6" /* neutralColor10 */,
             gridLineWidth: 1,
             tickPixelInterval: 200,
             labels: {
@@ -438,7 +437,7 @@ extend(defaultOptions, {
                  */
                 style: {
                     /** @ignore */
-                    color: Palette.neutralColor40
+                    color: "#999999" /* neutralColor40 */
                 },
                 x: 3,
                 y: -4
@@ -1733,7 +1732,7 @@ var Navigator = /** @class */ (function () {
             // If range declared, stick to the minimum only if the range
             // is smaller than the data set range.
             if (range && max - xDataMin > 0) {
-                stickToMin = max - xDataMin < range && (!this.chart.fixedRange);
+                stickToMin = max - xDataMin < range;
             }
             else {
                 // If the current axis minimum falls outside the new

package/es-modules/Core/Pointer.js

@@ -12,7 +12,6 @@ import Color from './Color/Color.js';
 var color = Color.parse;
 import H from './Globals.js';
 var charts = H.charts, noop = H.noop;
-import Palette from '../Core/Color/Palette.js';
 import Tooltip from './Tooltip.js';
 import U from './Utilities.js';
 var addEvent = U.addEvent, attr = U.attr, css = U.css, defined = U.defined, extend = U.extend, find = U.find, fireEvent = U.fireEvent, isNumber = U.isNumber, isObject = U.isObject, objectEach = U.objectEach, offset = U.offset, pick = U.pick, splat = U.splat;
@@ -163,7 +162,7 @@ var Pointer = /** @class */ (function () {
                 visiblePlotOnly: true
             });
             // make a selection
-            if (chart.hasCartesianSeries &&
+            if ((chart.hasCartesianSeries || chart.mapView) &&
                 (this.zoomX || this.zoomY) &&
                 clickedInside &&
                 !panKey) {
@@ -178,7 +177,7 @@ var Pointer = /** @class */ (function () {
                     if (!chart.styledMode) {
                         selectionMarker.attr({
                             fill: (chartOptions.selectionMarkerFill ||
-                                color(Palette.highlightColor80)
+                                color("#335cad" /* highlightColor80 */)
                                     .setOpacity(0.25).get())
                         });
                     }
@@ -229,20 +228,22 @@ var Pointer = /** @class */ (function () {
     Pointer.prototype.drop = function (e) {
         var pointer = this, chart = this.chart, hasPinched = this.hasPinched;
         if (this.selectionMarker) {
-            var selectionData_1 = {
-                originalEvent: e,
-                xAxis: [],
-                yAxis: []
-            }, selectionBox = this.selectionMarker, selectionLeft_1 = selectionBox.attr ?
-                selectionBox.attr('x') :
-                selectionBox.x, selectionTop_1 = selectionBox.attr ?
-                selectionBox.attr('y') :
-                selectionBox.y, selectionWidth_1 = selectionBox.attr ?
+            var selectionBox = this.selectionMarker, x_1 = selectionBox.attr ? selectionBox.attr('x') : selectionBox.x, y_1 = selectionBox.attr ? selectionBox.attr('y') : selectionBox.y, width_1 = selectionBox.attr ?
                 selectionBox.attr('width') :
-                selectionBox.width, selectionHeight_1 = selectionBox.attr ?
+                selectionBox.width, height_1 = selectionBox.attr ?
                 selectionBox.attr('height') :
-                selectionBox.height;
-            var runZoom_1;
+                selectionBox.height, selectionData_1 = {
+                originalEvent: e,
+                xAxis: [],
+                yAxis: [],
+                x: x_1,
+                y: y_1,
+                width: width_1,
+                height: height_1
+            }, 
+            // Start by false runZoom, unless when we have a mapView, in
+            // which case the zoom will be handled in the selection event.
+            runZoom_1 = Boolean(chart.mapView);
             // a selection has been made
             if (this.hasDragged || hasPinched) {
                 // record each axis' min and max
@@ -254,15 +255,13 @@ var Pointer = /** @class */ (function () {
                                 xAxis: 'zoomX',
                                 yAxis: 'zoomY'
                             }[axis.coll]]) &&
-                        isNumber(selectionLeft_1) &&
-                        isNumber(selectionTop_1)) { // #859, #3569
+                        isNumber(x_1) &&
+                        isNumber(y_1)) { // #859, #3569
                         var horiz = axis.horiz, minPixelPadding = e.type === 'touchend' ?
                             axis.minPixelPadding :
                             0, // #1207, #3075
-                        selectionMin = axis.toValue((horiz ? selectionLeft_1 : selectionTop_1) +
-                            minPixelPadding), selectionMax = axis.toValue((horiz ?
-                            selectionLeft_1 + selectionWidth_1 :
-                            selectionTop_1 + selectionHeight_1) - minPixelPadding);
+                        selectionMin = axis.toValue((horiz ? x_1 : y_1) + minPixelPadding), selectionMax = axis.toValue((horiz ? x_1 + width_1 : y_1 + height_1) -
+                            minPixelPadding);
                         selectionData_1[axis.coll].push({
                             axis: axis,
                             // Min/max for reversed axes
@@ -939,20 +938,22 @@ var Pointer = /** @class */ (function () {
         }
         else if (pinchDown.length) { // can be 0 when releasing, if touchend
             // fires first
-            // Set the marker
-            if (!selectionMarker) {
-                // @todo It's a mock object, so maybe we need a separate
-                // interface
-                self.selectionMarker = selectionMarker = extend({
-                    destroy: noop,
-                    touch: true
-                }, chart.plotBox);
-            }
-            self.pinchTranslate(pinchDown, touches, transform, selectionMarker, clip, lastValidTouch);
-            self.hasPinched = hasZoom;
-            // Scale and translate the groups to provide visual feedback during
-            // pinching
-            self.scaleGroups(transform, clip);
+            fireEvent(chart, 'touchpan', { originalEvent: e }, function () {
+                // Set the marker
+                if (!selectionMarker) {
+                    // @todo It's a mock object, so maybe we need a separate
+                    // interface
+                    self.selectionMarker = selectionMarker = extend({
+                        destroy: noop,
+                        touch: true
+                    }, chart.plotBox);
+                }
+                self.pinchTranslate(pinchDown, touches, transform, selectionMarker, clip, lastValidTouch);
+                self.hasPinched = hasZoom;
+                // Scale and translate the groups to provide visual feedback
+                // during pinching
+                self.scaleGroups(transform, clip);
+            });
             if (self.res) {
                 self.res = false;
                 this.reset(false, 0);
@@ -1252,7 +1253,9 @@ var Pointer = /** @class */ (function () {
         // Scale each series
         chart.series.forEach(function (series) {
             var seriesAttribs = attribs || series.getPlotBox(); // #1701
-            if (series.xAxis && series.xAxis.zoomEnabled && series.group) {
+            if (series.group &&
+                ((series.xAxis && series.xAxis.zoomEnabled) ||
+                    chart.mapView)) {
                 series.group.attr(seriesAttribs);
                 if (series.markerGroup) {
                     series.markerGroup.attr(seriesAttribs);

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

@@ -216,12 +216,7 @@ var AST = /** @class */ (function () {
                 tagName: tagName
             };
             if (tagName === '#text') {
-                var textContent = node.textContent || '';
-                // Leading whitespace text node, don't append it to the AST
-                if (nodes.length === 0 && /^[\s]*$/.test(textContent)) {
-                    return;
-                }
-                astNode.textContent = textContent;
+                astNode.textContent = node.textContent || '';
             }
             var parsedAttributes = node.attributes;
             // Add attributes
@@ -326,6 +321,7 @@ var AST = /** @class */ (function () {
         'text-align',
         'textAnchor',
         'textLength',
+        'title',
         'type',
         'valign',
         'width',
@@ -371,6 +367,7 @@ var AST = /** @class */ (function () {
      */
     AST.allowedTags = [
         'a',
+        'abbr',
         'b',
         'br',
         'button',

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

@@ -129,6 +129,9 @@ var HTMLElement = /** @class */ (function (_super) {
         }[align], styles = wrapper.styles, whiteSpace = styles && styles.whiteSpace;
         /** @private */
         function getTextPxLength() {
+            if (wrapper.textPxLength) {
+                return wrapper.textPxLength;
+            }
             // Reset multiline/ellipsis in order to read width (#4928,
             // #5417)
             css(elem, {
@@ -164,29 +167,31 @@ var HTMLElement = /** @class */ (function (_super) {
                 wrapper.textWidth,
                 wrapper.textAlign
             ].join(',');
-            var baseline = void 0;
+            var baseline = void 0, hasBoxWidthChanged = false;
             // Update textWidth. Use the memoized textPxLength if possible, to
             // avoid the getTextPxLength function using elem.offsetWidth.
             // Calling offsetWidth affects rendering time as it forces layout
             // (#7656).
-            if (textWidth !== wrapper.oldTextWidth &&
-                ((textWidth > wrapper.oldTextWidth) ||
-                    (wrapper.textPxLength || getTextPxLength()) > textWidth) && (
-            // Only set the width if the text is able to word-wrap, or
-            // text-overflow is ellipsis (#9537)
-            /[ \-]/.test(elem.textContent || elem.innerText) ||
-                elem.style.textOverflow === 'ellipsis')) { // #983, #1254
-                css(elem, {
-                    width: textWidth + 'px',
-                    display: 'block',
-                    whiteSpace: whiteSpace || 'normal' // #3331
-                });
-                wrapper.oldTextWidth = textWidth;
-                wrapper.hasBoxWidthChanged = true; // #8159
-            }
-            else {
-                wrapper.hasBoxWidthChanged = false; // #8159
+            if (textWidth !== wrapper.oldTextWidth) { // #983, #1254
+                var textPxLength = getTextPxLength();
+                if (((textWidth > wrapper.oldTextWidth) ||
+                    textPxLength > textWidth) && (
+                // Only set the width if the text is able to word-wrap,
+                // or text-overflow is ellipsis (#9537)
+                /[ \-]/.test(elem.textContent || elem.innerText) ||
+                    elem.style.textOverflow === 'ellipsis')) {
+                    css(elem, {
+                        width: (textPxLength > textWidth) || rotation ?
+                            textWidth + 'px' :
+                            'auto',
+                        display: 'block',
+                        whiteSpace: whiteSpace || 'normal' // #3331
+                    });
+                    wrapper.oldTextWidth = textWidth;
+                    hasBoxWidthChanged = true; // #8159
+                }
             }
+            wrapper.hasBoxWidthChanged = hasBoxWidthChanged; // #8159
             // Do the calculations and DOM access only if properties changed
             if (currentTextTransform !== wrapper.cTT) {
                 baseline = renderer.fontMetrics(elem.style.fontSize, elem).b;

package/es-modules/Core/Renderer/SVG/SVGElement.js

@@ -14,7 +14,6 @@ import AST from '../HTML/AST.js';
 import Color from '../../Color/Color.js';
 import H from '../../Globals.js';
 var deg2rad = H.deg2rad, doc = H.doc, noop = H.noop, svg = H.svg, SVG_NS = H.SVG_NS, win = H.win;
-import Palette from '../../Color/Palette.js';
 import U from '../../Utilities.js';
 var addEvent = U.addEvent, attr = U.attr, createElement = U.createElement, css = U.css, defined = U.defined, erase = U.erase, extend = U.extend, fireEvent = U.fireEvent, isArray = U.isArray, isFunction = U.isFunction, isNumber = U.isNumber, isString = U.isString, merge = U.merge, objectEach = U.objectEach, pick = U.pick, pInt = U.pInt, syncTimeout = U.syncTimeout, uniqueKey = U.uniqueKey;
 /* *
@@ -1459,7 +1458,7 @@ var SVGElement = /** @class */ (function () {
                 var childNodes = [].slice.call(textNode.childNodes);
                 for (var i = 0; i < childNodes.length; i++) {
                     var childNode = childNodes[i];
-                    if (childNode.nodeType === Node.TEXT_NODE ||
+                    if (childNode.nodeType === win.Node.TEXT_NODE ||
                         childNode.nodeName === 'tspan') {
                         textPathElement.appendChild(childNode);
                     }
@@ -1551,7 +1550,7 @@ var SVGElement = /** @class */ (function () {
      */
     SVGElement.prototype.shadow = function (shadowOptions, group, cutOff) {
         var shadows = [], element = this.element, oldShadowOptions = this.oldShadowOptions, defaultShadowOptions = {
-            color: Palette.neutralColor100,
+            color: "#000000" /* neutralColor100 */,
             offsetX: this.parentInverted ? -1 : 1,
             offsetY: this.parentInverted ? -1 : 1,
             opacity: 0.15,
@@ -1594,7 +1593,7 @@ var SVGElement = /** @class */ (function () {
                 strokeWidth = (options.width * 2) + 1 - (2 * i);
                 attr(shadow, {
                     stroke: (shadowOptions.color ||
-                        Palette.neutralColor100),
+                        "#000000" /* neutralColor100 */),
                     'stroke-opacity': shadowElementOpacity * i,
                     'stroke-width': strokeWidth,
                     transform: transform,

package/es-modules/Core/Renderer/SVG/SVGRenderer.js

@@ -12,7 +12,6 @@ import AST from '../HTML/AST.js';
 import Color from '../../Color/Color.js';
 import H from '../../Globals.js';
 var charts = H.charts, deg2rad = H.deg2rad, doc = H.doc, isFirefox = H.isFirefox, isMS = H.isMS, isWebKit = H.isWebKit, noop = H.noop, SVG_NS = H.SVG_NS, symbolSizes = H.symbolSizes, win = H.win;
-import Palette from '../../Color/Palette.js';
 import RendererRegistry from '../RendererRegistry.js';
 import SVGElement from './SVGElement.js';
 import SVGLabel from './SVGLabel.js';
@@ -194,7 +193,7 @@ var SVGRenderer = /** @class */ (function () {
         this.url = this.getReferenceURL();
         // Add description
         var desc = this.createElement('desc').add();
-        desc.element.appendChild(doc.createTextNode('Created with Highcharts 9.2.0'));
+        desc.element.appendChild(doc.createTextNode('Created with Highcharts 9.3.1'));
         renderer.defs = this.createElement('defs').add();
         renderer.allowHTML = allowHTML;
         renderer.forExport = forExport;
@@ -533,11 +532,11 @@ var SVGRenderer = /** @class */ (function () {
         if (!styledMode) {
             // Normal state - prepare the attributes
             normalState = merge({
-                fill: Palette.neutralColor3,
-                stroke: Palette.neutralColor20,
+                fill: "#f7f7f7" /* neutralColor3 */,
+                stroke: "#cccccc" /* neutralColor20 */,
                 'stroke-width': 1,
                 style: {
-                    color: Palette.neutralColor80,
+                    color: "#333333" /* neutralColor80 */,
                     cursor: 'pointer',
                     fontWeight: 'normal'
                 }
@@ -548,15 +547,15 @@ var SVGRenderer = /** @class */ (function () {
             delete normalState.style;
             // Hover state
             hoverState = merge(normalState, {
-                fill: Palette.neutralColor10
+                fill: "#e6e6e6" /* neutralColor10 */
             }, AST.filterUserAttributes(hoverState || {}));
             hoverStyle = hoverState.style;
             delete hoverState.style;
             // Pressed state
             pressedState = merge(normalState, {
-                fill: Palette.highlightColor10,
+                fill: "#e6ebf5" /* highlightColor10 */,
                 style: {
-                    color: Palette.neutralColor100,
+                    color: "#000000" /* neutralColor100 */,
                     fontWeight: 'bold'
                 }
             }, AST.filterUserAttributes(pressedState || {}));
@@ -565,7 +564,7 @@ var SVGRenderer = /** @class */ (function () {
             // Disabled state
             disabledState = merge(normalState, {
                 style: {
-                    color: Palette.neutralColor20
+                    color: "#cccccc" /* neutralColor20 */
                 }
             }, AST.filterUserAttributes(disabledState || {}));
             disabledStyle = disabledState.style;
@@ -980,14 +979,18 @@ var SVGRenderer = /** @class */ (function () {
                 el.setAttribute('hc-svg-href', src);
             }
         };
-        // optional properties
-        if (arguments.length > 1) {
-            extend(attribs, {
-                x: x,
-                y: y,
-                width: width,
-                height: height
-            });
+        // Optional properties (#11756)
+        if (isNumber(x)) {
+            attribs.x = x;
+        }
+        if (isNumber(y)) {
+            attribs.y = y;
+        }
+        if (isNumber(width)) {
+            attribs.width = width;
+        }
+        if (isNumber(height)) {
+            attribs.height = height;
         }
         var elemWrapper = this.createElement('image').attr(attribs), onDummyLoad = function (e) {
             setSVGImageSource(elemWrapper.element, src);
@@ -1782,7 +1785,7 @@ export default SVGRenderer;
 * The shadow color.
 * @name    Highcharts.ShadowOptionsObject#color
 * @type    {Highcharts.ColorString|undefined}
-* @default ${palette.neutralColor100}
+* @default #000000
 */ /**
 * The horizontal offset from the element.
 *

package/es-modules/Core/Renderer/SVG/TextBuilder.js

@@ -10,7 +10,7 @@
 'use strict';
 import AST from '../HTML/AST.js';
 import H from '../../Globals.js';
-var doc = H.doc, SVG_NS = H.SVG_NS;
+var doc = H.doc, SVG_NS = H.SVG_NS, win = H.win;
 import U from '../../Utilities.js';
 var attr = U.attr, isString = U.isString, objectEach = U.objectEach, pick = U.pick;
 /* *
@@ -119,6 +119,20 @@ var TextBuilder = /** @class */ (function () {
         var wrapper = this.svgElement;
         var x = attr(wrapper.element, 'x');
         wrapper.firstLineMetrics = void 0;
+        // Remove empty tspans (including breaks) from the beginning because
+        // SVG's getBBox doesn't count empty lines. The use case is tooltip
+        // where the header is empty. By doing this in the DOM rather than in
+        // the AST, we can inspect the textContent directly and don't have to
+        // recurse down to look for valid content.
+        var firstChild;
+        while ((firstChild = wrapper.element.firstChild)) {
+            if (/^[\s\u200B]*$/.test(firstChild.textContent || ' ')) {
+                wrapper.element.removeChild(firstChild);
+            }
+            else {
+                break;
+            }
+        }
         // Modify hard line breaks by applying the rendered line height
         [].forEach.call(wrapper.element.querySelectorAll('tspan.highcharts-br'), function (br, i) {
             if (br.nextSibling && br.previousSibling) { // #5261
@@ -215,7 +229,7 @@ var TextBuilder = /** @class */ (function () {
         var modifyChildren = (function (node) {
             var childNodes = [].slice.call(node.childNodes);
             childNodes.forEach(function (childNode) {
-                if (childNode.nodeType === Node.TEXT_NODE) {
+                if (childNode.nodeType === win.Node.TEXT_NODE) {
                     modifyTextNode(childNode, node);
                 }
                 else {
@@ -241,7 +255,7 @@ var TextBuilder = /** @class */ (function () {
     TextBuilder.prototype.getLineHeight = function (node) {
         var fontSizeStyle;
         // If the node is a text node, use its parent
-        var element = node.nodeType === Node.TEXT_NODE ?
+        var element = node.nodeType === win.Node.TEXT_NODE ?
             node.parentElement :
             node;
         if (!this.renderer.styledMode) {
@@ -314,16 +328,6 @@ var TextBuilder = /** @class */ (function () {
             }
         };
         nodes.forEach(modifyChild);
-        // Remove empty spans from the beginning because SVG's getBBox doesn't
-        // count empty lines. The use case is tooltip where the header is empty.
-        while (nodes[0]) {
-            if (nodes[0].tagName === 'tspan' && !nodes[0].children) {
-                nodes.splice(0, 1);
-            }
-            else {
-                break;
-            }
-        }
     };
     /*
      * Truncate the text node contents to a given length. Used when the css

package/es-modules/Core/ScrollbarDefaults.js

@@ -10,7 +10,6 @@
 'use strict';
 import H from './Globals.js';
 var isTouchDevice = H.isTouchDevice;
-import Palette from './Color/Palette.js';
 /* *
  *
  *  Constant
@@ -98,6 +97,8 @@ var ScrollbarDefaults = {
      * @since 1.2.5
      */
     minWidth: 6,
+    /** @ignore-option */
+    opposite: true,
     /**
      * Whether to show or hide the scrollbar when the scrolled content is
      * zoomed out to it full extent.
@@ -119,7 +120,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    barBackgroundColor: Palette.neutralColor20,
+    barBackgroundColor: "#cccccc" /* neutralColor20 */,
     /**
      * The width of the bar's border.
      *
@@ -132,7 +133,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    barBorderColor: Palette.neutralColor20,
+    barBorderColor: "#cccccc" /* neutralColor20 */,
     /**
      * The color of the small arrow inside the scrollbar buttons.
      *
@@ -141,7 +142,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    buttonArrowColor: Palette.neutralColor80,
+    buttonArrowColor: "#333333" /* neutralColor80 */,
     /**
      * The color of scrollbar buttons.
      *
@@ -150,7 +151,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    buttonBackgroundColor: Palette.neutralColor10,
+    buttonBackgroundColor: "#e6e6e6" /* neutralColor10 */,
     /**
      * The color of the border of the scrollbar buttons.
      *
@@ -159,7 +160,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    buttonBorderColor: Palette.neutralColor20,
+    buttonBorderColor: "#cccccc" /* neutralColor20 */,
     /**
      * The border width of the scrollbar buttons.
      *
@@ -172,7 +173,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    rifleColor: Palette.neutralColor80,
+    rifleColor: "#333333" /* neutralColor80 */,
     /**
      * The color of the track background.
      *
@@ -181,7 +182,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    trackBackgroundColor: Palette.neutralColor5,
+    trackBackgroundColor: "#f2f2f2" /* neutralColor5 */,
     /**
      * The color of the border of the scrollbar track.
      *
@@ -190,7 +191,7 @@ var ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    trackBorderColor: Palette.neutralColor5,
+    trackBorderColor: "#f2f2f2" /* neutralColor5 */,
     /**
      * The corner radius of the border of the scrollbar track.
      *

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

@@ -12,7 +12,6 @@ import A from '../Animation/AnimationUtilities.js';
 var getDeferredAnimation = A.getDeferredAnimation;
 import F from '../FormatUtilities.js';
 var format = F.format;
-import Palette from '../Color/Palette.js';
 import U from '../Utilities.js';
 var defined = U.defined, extend = U.extend, fireEvent = U.fireEvent, isArray = U.isArray, merge = U.merge, objectEach = U.objectEach, pick = U.pick, splat = U.splat;
 /* *
@@ -273,7 +272,7 @@ var DataLabel;
                         rotation = labelOptions.rotation;
                         if (!chart.styledMode) {
                             // Determine the color
-                            style.color = pick(labelOptions.color, style.color, series.color, Palette.neutralColor100);
+                            style.color = pick(labelOptions.color, style.color, series.color, "#000000" /* neutralColor100 */);
                             // Get automated contrast color
                             if (style.color === 'contrast') {
                                 point.contrastColor = renderer.getContrast((point.color || series.color));
@@ -282,7 +281,7 @@ var DataLabel;
                                     labelDistance < 0 ||
                                     !!seriesOptions.stacking ?
                                     point.contrastColor :
-                                    Palette.neutralColor100;
+                                    "#000000" /* neutralColor100 */;
                             }
                             else {
                                 delete point.contrastColor;

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

@@ -509,13 +509,14 @@ var Point = /** @class */ (function () {
      * transformed to `{ y: 10 }`, and an array config like `[1, 10]` in a
      * scatter series will be transformed to `{ x: 1, y: 10 }`.
      *
+     * @deprecated
      * @function Highcharts.Point#optionsToObject
      *
      * @param {Highcharts.PointOptionsType} options
-     *        The input option.
+     * Series data options.
      *
      * @return {Highcharts.Dictionary<*>}
-     *         Transformed options.
+     * Transformed point options.
      */
     Point.prototype.optionsToObject = function (options) {
         var series = this.series, keys = series.options.keys, pointArrayMap = keys || series.pointArrayMap || ['y'], valueCount = pointArrayMap.length;
@@ -1027,7 +1028,8 @@ var Point = /** @class */ (function () {
                         });
                     }
                 }
-                if (!chart.styledMode && stateMarkerGraphic) {
+                if (!chart.styledMode && stateMarkerGraphic &&
+                    point.state !== 'inactive') {
                     stateMarkerGraphic.attr(series.pointAttribs(point, state));
                 }
             }