highcharts 9.3.3 → 10.2.0

package/es-modules/Extensions/DataGrouping.js

@@ -652,9 +652,11 @@ seriesProto.generatePoints = function () {
  */
 Axis.prototype.applyGrouping = function (e) {
     var axis = this, series = axis.series;
+    // Reset the groupPixelWidth for all series, #17141.
     series.forEach(function (series) {
-        // Reset the groupPixelWidth, then calculate if needed.
         series.groupPixelWidth = void 0; // #2110
+    });
+    series.forEach(function (series) {
         series.groupPixelWidth = (axis.getGroupPixelWidth &&
             axis.getGroupPixelWidth());
         if (series.groupPixelWidth) {
@@ -735,8 +737,11 @@ Axis.prototype.setDataGrouping = function (dataGrouping, redraw) {
     }
     else {
         this.chart.options.series.forEach(function (seriesOptions) {
-            seriesOptions.dataGrouping = dataGrouping;
-        }, false);
+            // Merging dataGrouping options with already defined options #16759
+            seriesOptions.dataGrouping = typeof dataGrouping === 'boolean' ?
+                dataGrouping :
+                merge(dataGrouping, seriesOptions.dataGrouping);
+        });
     }
     // Clear ordinal slope, so we won't accidentaly use the old one (#7827)
     if (axis.ordinal) {

package/es-modules/Extensions/Debugger/ErrorMessages.js

@@ -101,6 +101,10 @@ var errorMessages = {
     "32": {
         "title": "Deprecated function or property",
         "text": "<h1>Deprecated function or property</h1><p>This error occurs when using a deprecated function or property. Consult the <a href=\"https://api.highcharts.com/\">API documentation</a> for alternatives, if no replacement is mentioned by the error itself.</p>"
+    },
+    "33": {
+        "title": "Invalid attribute or tagName",
+        "text": "<h1>Invalid attribute or tagName</h1><p>This error occurs if HTML in the chart configuration contains unknown tag names or attributes. Unknown tag names or attributes are those not present in the _allow lists_.</p><p>To fix the error, consider</p><ul><li>Is your tag name or attribute spelled correctly? For example, <code>lineargradient</code></li></ul><p> would be blocked as it is a misspelling for <code>linearGradient</code>.</p><ul><li>Is it allowed in Highcharts? For example, <code>onclick</code> attributes are blocked as</li></ul><p> they pose a real security threat.</p><p>This error occurs because attributes and tag names are sanitized of potentially harmful content from the chart configuration before being added to the DOM. Consult the <a href=\"https://www.highcharts.com/docs/chart-concepts/security\">security documentation</a> for more information.</p>"
     }
 };
 export default errorMessages;

package/es-modules/Extensions/DownloadURL.js

@@ -28,11 +28,11 @@ var dataURLtoBlob = Highcharts.dataURLtoBlob = function (dataURL) {
         .match(/data:([^;]*)(;base64)?,([0-9A-Za-z+/]+)/);
     if (parts &&
         parts.length > 3 &&
-        win.atob &&
+        (win.atob) &&
         win.ArrayBuffer &&
         win.Uint8Array &&
         win.Blob &&
-        domurl.createObjectURL) {
+        (domurl.createObjectURL)) {
         // Try to convert data URL to Blob
         var binStr = win.atob(parts[3]), buf = new win.ArrayBuffer(binStr.length), binary = new win.Uint8Array(buf);
         for (var i = 0; i < binary.length; ++i) {
@@ -63,7 +63,7 @@ var downloadURL = Highcharts.downloadURL = function (dataURL, filename) {
         nav.msSaveOrOpenBlob(dataURL, filename);
         return;
     }
-    dataURL = "" + dataURL;
+    dataURL = "".concat(dataURL);
     // Some browsers have limitations for data URL lengths. Try to convert to
     // Blob or fall back. Edge always needs that blob.
     var isOldEdgeBrowser = /Edge\/\d+/.test(nav.userAgent);

package/es-modules/Extensions/DragPanes.js

@@ -411,7 +411,7 @@ var AxisResizer = /** @class */ (function () {
              * @type     {Highcharts.ColorString}
              * @requires modules/drag-panes
              */
-            lineColor: "#cccccc" /* neutralColor20 */,
+            lineColor: "#cccccc" /* Palette.neutralColor20 */,
             /**
              * Dash style of the control line.
              *

package/es-modules/Extensions/DraggablePoints.js

@@ -811,11 +811,11 @@ var defaultGuideBoxOptions = {
     }
 };
 /**
- * Options for the drag handles.
+ * Options for the drag handles available in column series.
  *
  * @declare      Highcharts.DragDropHandleOptionsObject
  * @since        6.2.0
- * @optionparent plotOptions.series.dragDrop.dragHandle
+ * @optionparent plotOptions.column.dragDrop.dragHandle
  *
  * @private
  */
@@ -827,7 +827,7 @@ var defaultDragHandleOptions = {
      *
      * @type      {Function}
      * @since     6.2.0
-     * @apioption plotOptions.series.dragDrop.dragHandle.pathFormatter
+     * @apioption plotOptions.column.dragDrop.dragHandle.pathFormatter
      */
     // pathFormatter: null,
     /**
@@ -837,7 +837,7 @@ var defaultDragHandleOptions = {
      *
      * @type      {string}
      * @since     6.2.0
-     * @apioption plotOptions.series.dragDrop.dragHandle.cursor
+     * @apioption plotOptions.column.dragDrop.dragHandle.cursor
      */
     // cursor: null,
     /**
@@ -1757,13 +1757,15 @@ Point.prototype.showDragHandles = function () {
             // Find position and path of handle
             pos = positioner(point);
             handleAttrs.d = path = pathFormatter(point);
-            if (!path || pos.x < 0 || pos.y < 0) {
+            // Correct left edge value depending on the xAxis' type, #16596
+            var minEdge = point.series.xAxis.categories ? -0.5 : 0;
+            if (!path || pos.x < minEdge || pos.y < 0) {
                 return;
             }
             // If cursor is not set explicitly, use axis direction
             handleAttrs.cursor = handleOptions.cursor ||
-                (val.axis === 'x') !== !!chart.inverted ?
-                'ew-resize' : 'ns-resize';
+                ((val.axis === 'x') !== !!chart.inverted ?
+                    'ew-resize' : 'ns-resize');
             // Create and add the handle element if it doesn't exist
             handle = chart.dragHandles[val.optionName];
             if (!handle) {

package/es-modules/Extensions/Drilldown.js

@@ -29,6 +29,7 @@ var seriesTypes = SeriesRegistry.seriesTypes;
 import SVGRenderer from '../Core/Renderer/SVG/SVGRenderer.js';
 import Tick from '../Core/Axis/Tick.js';
 import U from '../Core/Utilities.js';
+import Breadcrumbs from './Breadcrumbs.js';
 var addEvent = U.addEvent, removeEvent = U.removeEvent, extend = U.extend, fireEvent = U.fireEvent, merge = U.merge, objectEach = U.objectEach, pick = U.pick, syncTimeout = U.syncTimeout;
 /**
  * Gets fired when a drilldown point is clicked, before the new series is added.
@@ -151,18 +152,20 @@ extend(defaultOptions.lang,
  * @optionparent lang
  */
 {
-    /**
-     * The text for the button that appears when drilling down, linking back
-     * to the parent series. The parent series' name is inserted for
-     * `{series.name}`.
-     *
-     * @since    3.0.8
-     * @product  highcharts highmaps
-     * @requires modules/drilldown
-     *
-     * @private
-     */
-    drillUpText: '◁ Back to {series.name}'
+/**
+ * The text for the button that appears when drilling down, linking back
+ * to the parent series. The parent series' name is inserted for
+ * `{series.name}`.
+ *
+ * @since    3.0.8
+ * @product  highcharts highmaps
+ * @requires modules/drilldown
+ * @apioption lang.drillUpText
+ *
+ * @deprecated
+ *
+ * @private
+ */
 });
 /**
  * Options for drill down, the concept of inspecting increasingly high
@@ -194,6 +197,15 @@ defaultOptions.drilldown = {
      * @product   highcharts
      * @apioption drilldown.allowPointDrilldown
      */
+    /**
+     * Options for the breadcrumbs, the navigation at the top leading the way
+     * up through the drilldown levels.
+     *
+     * @since 10.0.0
+     * @product   highcharts
+     * @extends   navigation.breadcrumbs
+     * @optionparent drilldown.breadcrumbs
+     */
     /**
      * An array of series configurations for the drill down. Each series
      * configuration uses the same syntax as the [series](#series) option set.
@@ -225,7 +237,7 @@ defaultOptions.drilldown = {
         /** @ignore-option */
         cursor: 'pointer',
         /** @ignore-option */
-        color: "#003399" /* highlightColor100 */,
+        color: "#003399" /* Palette.highlightColor100 */,
         /** @ignore-option */
         fontWeight: 'bold',
         /** @ignore-option */
@@ -249,7 +261,7 @@ defaultOptions.drilldown = {
      */
     activeDataLabelStyle: {
         cursor: 'pointer',
-        color: "#003399" /* highlightColor100 */,
+        color: "#003399" /* Palette.highlightColor100 */,
         fontWeight: 'bold',
         textDecoration: 'underline'
     },
@@ -280,17 +292,23 @@ defaultOptions.drilldown = {
         duration: 500
     },
     /**
+     *
      * Options for the drill up button that appears when drilling down on a
      * series. The text for the button is defined in
      * [lang.drillUpText](#lang.drillUpText).
      *
-     * @sample {highcharts} highcharts/drilldown/drillupbutton/
-     *         Drill up button
-     * @sample {highmaps} highcharts/drilldown/drillupbutton/
-     *         Drill up button
+     * This option is deprecated since 9.3.2, use `drilldown.breadcrumbs`
+     * instead.
+     *
+     * @sample highcharts/breadcrumbs/single-button
+     *         Breadcrumbs set up like a legacy button
+     * @sample {highcharts} highcharts/drilldown/drillupbutton/ Drill up button
+     * @sample {highmaps} highcharts/drilldown/drillupbutton/ Drill up button
      *
      * @since   3.0.8
      * @product highcharts highmaps
+     *
+     * @deprecated
      */
     drillUpButton: {
         /**
@@ -576,44 +594,50 @@ Chart.prototype.applyDrilldown = function () {
         delete this.resetZoomButton;
     }
     this.pointer.reset();
-    this.redraw();
-    this.showDrillUpButton();
     fireEvent(this, 'afterDrilldown');
+    this.redraw();
+    fireEvent(this, 'afterApplyDrilldown');
 };
-Chart.prototype.getDrilldownBackText = function () {
-    var drilldownLevels = this.drilldownLevels, lastLevel;
-    if (drilldownLevels && drilldownLevels.length > 0) { // #3352, async loading
-        lastLevel = drilldownLevels[drilldownLevels.length - 1];
-        lastLevel.series = lastLevel.seriesOptions;
-        return format(this.options.lang.drillUpText || '', lastLevel);
-    }
-};
-Chart.prototype.showDrillUpButton = function () {
-    var chart = this, backText = this.getDrilldownBackText(), buttonOptions = chart.options.drilldown.drillUpButton, attr, states, alignTo = (buttonOptions.relativeTo === 'chart' ||
-        buttonOptions.relativeTo === 'spacingBox' ?
-        null :
-        'scrollablePlotBox');
-    if (!this.drillUpButton) {
-        attr = buttonOptions.theme;
-        states = attr && attr.states;
-        this.drillUpButton = this.renderer
-            .button(backText, null, null, function () {
-            chart.drillUp();
-        }, attr, states && states.hover, states && states.select)
-            .addClass('highcharts-drillup-button')
-            .attr({
-            align: buttonOptions.position.align,
-            zIndex: 7
-        })
-            .add()
-            .align(buttonOptions.position, false, alignTo);
-    }
-    else {
-        this.drillUpButton.attr({
-            text: backText
-        })
-            .align();
+/**
+ * This method creates an array of arrays containing a level number
+ * with the corresponding series/point.
+ *
+ * @requires  modules/breadcrumbs
+ *
+ * @private
+ * @param {Highcharts.Chart} chart
+ *        Highcharts Chart object.
+ * @return {Array<Breadcrumbs.BreadcrumbOptions>}
+ *        List for Highcharts Breadcrumbs.
+ */
+var createBreadcrumbsList = function (chart) {
+    var list = [], drilldownLevels = chart.drilldownLevels;
+    // The list is based on drilldown levels from the chart object
+    if (drilldownLevels && drilldownLevels.length) {
+        // Add the initial series as the first element.
+        if (!list[0]) {
+            list.push({
+                level: 0,
+                levelOptions: drilldownLevels[0].seriesOptions
+            });
+        }
+        drilldownLevels.forEach(function (level, i) {
+            var lastBreadcrumb = list[list.length - 1];
+            // If level is already added to breadcrumbs list,
+            // don't add it again- drilling categories
+            // + 1 because of the wrong levels numeration
+            // in drilldownLevels array.
+            if (level.levelNumber + 1 > lastBreadcrumb.level) {
+                list.push({
+                    level: level.levelNumber + 1,
+                    levelOptions: merge({
+                        name: level.lowerSeries.name
+                    }, level.pointOptions)
+                });
+            }
+        });
     }
+    return list;
 };
 /**
  * When the chart is drilled down to a child series, calling `chart.drillUp()`
@@ -630,6 +654,7 @@ Chart.prototype.drillUp = function () {
     if (!this.drilldownLevels || this.drilldownLevels.length === 0) {
         return;
     }
+    fireEvent(this, 'beforeDrillUp');
     var chart = this, drilldownLevels = chart.drilldownLevels, levelNumber = drilldownLevels[drilldownLevels.length - 1].levelNumber, i = drilldownLevels.length, chartSeries = chart.series, seriesI, level, oldSeries, newSeries, oldExtremes, addSeries = function (seriesOptions) {
         var addedSeries;
         chartSeries.forEach(function (series) {
@@ -646,6 +671,7 @@ Chart.prototype.drillUp = function () {
             newSeries = addedSeries;
         }
     };
+    var drilldownLevelsNumber = chart.drilldownLevels.length;
     while (i--) {
         level = drilldownLevels[i];
         if (level.levelNumber === levelNumber) {
@@ -665,12 +691,19 @@ Chart.prototype.drillUp = function () {
                 }
             }
             oldSeries.xData = []; // Overcome problems with minRange (#2898)
+            // Reset the names to start new series from the beginning.
+            // Do it once to preserve names when multiple
+            // series are added for the same axis, #16135.
+            if (oldSeries.xAxis &&
+                oldSeries.xAxis.names &&
+                (drilldownLevelsNumber === 0 || i === drilldownLevelsNumber)) {
+                oldSeries.xAxis.names.length = 0;
+            }
             level.levelSeriesOptions.forEach(addSeries);
             fireEvent(chart, 'drillup', {
                 seriesOptions: level.seriesPurgedOptions ||
                     level.seriesOptions
             });
-            this.resetZoomButton && this.resetZoomButton.destroy(); // #8095
             if (newSeries.type === oldSeries.type) {
                 newSeries.drilldownLevel = level;
                 newSeries.options.animation =
@@ -691,30 +724,48 @@ Chart.prototype.drillUp = function () {
             // it to the chart and show it.
             if (level.resetZoomButton) {
                 chart.resetZoomButton = level.resetZoomButton;
-                chart.resetZoomButton.show();
             }
         }
     }
+    fireEvent(chart, 'afterDrillUp');
     this.redraw();
-    if (this.drilldownLevels.length === 0) {
-        this.drillUpButton = this.drillUpButton.destroy();
-    }
-    else {
-        this.drillUpButton.attr({
-            text: this.getDrilldownBackText()
-        })
-            .align();
-    }
-    this.ddDupes.length = []; // #3315
+    if (this.ddDupes) {
+        this.ddDupes.length = 0; // #3315
+    } // #8324
     // Fire a once-off event after all series have been drilled up (#5158)
     fireEvent(chart, 'drillupall');
 };
+/**
+ * A function to fade in a group. First, the element is being hidden,
+ * then, using `opactiy`, is faded in. Used for example by `dataLabelsGroup`
+ * where simple SVGElement.fadeIn() is not enough, because of other features
+ * (e.g. InactiveState) using `opacity` to fadeIn/fadeOut.
+ *
+ * @requires module:modules/drilldown
+ *
+ * @param {undefined|SVGElement} [group]
+ * The SVG element to be faded in.
+ */
+function fadeInGroup(group) {
+    var animationOptions = animObject(this.chart.options.drilldown.animation);
+    if (group) {
+        group.hide();
+        syncTimeout(function () {
+            // Make sure neither the group, or the chart, were destroyed
+            if (group && group.added) {
+                group.fadeIn();
+            }
+        }, Math.max(animationOptions.duration - 50, 0));
+    }
+}
 /* eslint-disable no-invalid-this */
 // Add update function to be called internally from Chart.update
 // (#7600, #12855)
 addEvent(Chart, 'afterInit', function () {
     var chart = this;
     chart.drilldown = {
+        chart: chart,
+        fadeInGroup: fadeInGroup,
         update: function (options, redraw) {
             merge(true, chart.options.drilldown, options);
             if (pick(redraw, true)) {
@@ -723,22 +774,6 @@ addEvent(Chart, 'afterInit', function () {
         }
     };
 });
-// Shift the drillUpButton to make the space for resetZoomButton, #8095.
-addEvent(Chart, 'afterShowResetZoom', function () {
-    var chart = this, bbox = chart.resetZoomButton && chart.resetZoomButton.getBBox(), buttonOptions = (chart.options.drilldown &&
-        chart.options.drilldown.drillUpButton);
-    if (this.drillUpButton &&
-        bbox &&
-        buttonOptions &&
-        buttonOptions.position &&
-        buttonOptions.position.x) {
-        this.drillUpButton.align({
-            x: buttonOptions.position.x - bbox.width - 10,
-            y: buttonOptions.position.y,
-            align: buttonOptions.position.align
-        }, false, buttonOptions.relativeTo || 'plotBox');
-    }
-});
 addEvent(Chart, 'render', function () {
     (this.xAxis || []).forEach(function (axis) {
         axis.ddPoints = {};
@@ -769,6 +804,31 @@ addEvent(Chart, 'render', function () {
         objectEach(axis.ticks, Tick.prototype.drillable);
     });
 });
+addEvent(H.Breadcrumbs, 'up', function (e) {
+    var chart = this.chart, drillUpsNumber = this.getLevel() - e.newLevel;
+    for (var i = 0; i < drillUpsNumber; i++) {
+        chart.drillUp();
+    }
+});
+addEvent(Chart, 'afterDrilldown', function () {
+    var chart = this, drilldownOptions = chart.options.drilldown, breadcrumbsOptions = drilldownOptions && drilldownOptions.breadcrumbs;
+    if (!chart.breadcrumbs) {
+        chart.breadcrumbs = new Breadcrumbs(chart, breadcrumbsOptions);
+    }
+    chart.breadcrumbs.updateProperties(createBreadcrumbsList(chart));
+});
+addEvent(Chart, 'afterDrillUp', function () {
+    var chart = this;
+    chart.breadcrumbs &&
+        chart.breadcrumbs.updateProperties(createBreadcrumbsList(chart));
+});
+addEvent(Chart, 'update', function (e) {
+    var breadcrumbs = this.breadcrumbs, breadcrumbOptions = e.options.drilldown &&
+        e.options.drilldown.breadcrumbs;
+    if (breadcrumbs && breadcrumbOptions) {
+        breadcrumbs.update(e.options.drilldown.breadcrumbs);
+    }
+});
 /**
  * When drilling up, keep the upper series invisible until the lower series has
  * moved into place.
@@ -854,10 +914,10 @@ ColumnSeries.prototype.animateDrilldown = function (init) {
                     .attr(animateFrom)
                     .animate(extend(point.shapeArgs, { fill: point.color || series.color }), animationOptions);
             }
-            if (point.dataLabel) {
-                point.dataLabel.fadeIn(animationOptions);
-            }
         });
+        if (chart.drilldown) {
+            chart.drilldown.fadeInGroup(this.dataLabelsGroup);
+        }
         // Reset to prototype
         delete this.animate;
     }
@@ -935,6 +995,9 @@ if (PieSeries) {
                             }))[animationOptions ? 'animate' : 'attr'](animateTo, animationOptions);
                         }
                     });
+                    if (this.chart.drilldown) {
+                        this.chart.drilldown.fadeInGroup(this.dataLabelsGroup);
+                    }
                     // Reset to prototype
                     delete this.animate;
                 }
@@ -1150,21 +1213,13 @@ addEvent(Point, 'afterSetState', function () {
         applyCursorCSS(this.series.halo, 'auto', false, styledMode);
     }
 });
-// After zooming out, shift the drillUpButton to the previous position, #8095.
-addEvent(Chart, 'selection', function (event) {
-    if (event.resetSelection === true && this.drillUpButton) {
-        var buttonOptions = (this.options.drilldown && this.options.drilldown.drillUpButton);
-        if (buttonOptions && buttonOptions.position) {
-            this.drillUpButton.align({
-                x: buttonOptions.position.x,
-                y: buttonOptions.position.y,
-                align: buttonOptions.position.align
-            }, false, buttonOptions.relativeTo || 'plotBox');
-        }
-    }
-});
 addEvent(Chart, 'drillup', function () {
     if (this.resetZoomButton) {
         this.resetZoomButton = this.resetZoomButton.destroy();
     }
 });
+addEvent(Chart, 'drillupall', function () {
+    if (this.resetZoomButton) {
+        this.showResetZoom();
+    }
+});

package/es-modules/Extensions/ExportData.js

@@ -13,6 +13,15 @@
 // - Set up systematic tests for all series types, paired with tests of the data
 //   module importing the same data.
 'use strict';
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import Axis from '../Core/Axis/Axis.js';
 import Chart from '../Core/Chart/Chart.js';
 import AST from '../Core/Renderer/HTML/AST.js';
@@ -295,11 +304,45 @@ addEvent(Chart, 'render', function () {
     if (this.options &&
         this.options.exporting &&
         this.options.exporting.showTable &&
-        !this.options.chart.forExport &&
-        !this.dataTableDiv) {
+        !this.options.chart.forExport) {
         this.viewData();
     }
 });
+addEvent(Chart, 'afterViewData', function () {
+    var chart = this, dataTableDiv = chart.dataTableDiv, row = document.querySelectorAll('thead')[0].querySelectorAll('tr')[0], getCellValue = function (tr, index) {
+        return tr.children[index].textContent;
+    }, comparer = function (index, ascending) {
+        return function (a, b) {
+            var sort = function (v1, v2) { return (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ?
+                v1 - v2 :
+                v1.toString().localeCompare(v2)); };
+            return sort(getCellValue(ascending ? a : b, index), getCellValue(ascending ? b : a, index));
+        };
+    };
+    if (dataTableDiv) {
+        row.childNodes.forEach(function (th) {
+            var table = th.closest('table');
+            th.addEventListener('click', function () {
+                var rows = __spreadArray([], dataTableDiv.querySelectorAll('tr:not(thead tr)'), true), headers = __spreadArray([], th.parentNode.children, true);
+                rows.sort(comparer(headers.indexOf(th), chart.ascendingOrderInTable =
+                    !chart.ascendingOrderInTable)).forEach(function (tr) {
+                    table.appendChild(tr);
+                });
+                headers.forEach(function (th) {
+                    ['highcharts-sort-ascending', 'highcharts-sort-descending']
+                        .forEach(function (className) {
+                        if (th.classList.contains(className)) {
+                            th.classList.remove(className);
+                        }
+                    });
+                });
+                th.classList.add(chart.ascendingOrderInTable ?
+                    'highcharts-sort-ascending' :
+                    'highcharts-sort-descending');
+            });
+        });
+    }
+});
 /* eslint-enable no-invalid-this */
 /**
  * Set up key-to-axis bindings. This is used when the Y axis is datetime or
@@ -588,6 +631,12 @@ Chart.prototype.getCSV = function (useLocalDecimalPoint) {
             }
             row[j] = val;
         }
+        // The first row is the header - it defines the number of columns.
+        // Empty columns between not-empty cells are covered in the getDataRows
+        // method.
+        // Now add empty values only to the end of the row so all rows have
+        // the same number of columns, #17186
+        row.length = rows.length ? rows[0].length : 0;
         // Add the values
         csv += row.join(itemDelimiter);
         // Add the line delimiter
@@ -623,11 +672,11 @@ Chart.prototype.getTable = function (useLocalDecimalPoint) {
             return node.textContent || '';
         }
         var attributes = node.attributes;
-        var html = "<" + node.tagName;
+        var html = "<".concat(node.tagName);
         if (attributes) {
             Object.keys(attributes).forEach(function (key) {
                 var value = attributes[key];
-                html += " " + key + "=\"" + value + "\"";
+                html += " ".concat(key, "=\"").concat(value, "\"");
             });
         }
         html += '>';
@@ -635,7 +684,7 @@ Chart.prototype.getTable = function (useLocalDecimalPoint) {
         (node.children || []).forEach(function (child) {
             html += serialize(child);
         });
-        html += "</" + node.tagName + ">";
+        html += "</".concat(node.tagName, ">");
         return html;
     };
     var tree = this.getTableAST(useLocalDecimalPoint);
@@ -677,17 +726,17 @@ Chart.prototype.getTableAST = function (useLocalDecimalPoint) {
     }, 
     // Get table cell HTML from value
     getCellHTMLFromValue = function (tagName, classes, attributes, value) {
-        var textContent = pick(value, ''), className = 'text' + (classes ? ' ' + classes : '');
+        var textContent = pick(value, ''), className = 'highcharts-text' + (classes ? ' ' + classes : '');
         // Convert to string if number
         if (typeof textContent === 'number') {
             textContent = textContent.toString();
             if (decimalPoint === ',') {
                 textContent = textContent.replace('.', decimalPoint);
             }
-            className = 'number';
+            className = 'highcharts-number';
         }
         else if (!value) {
-            className = 'empty';
+            className = 'highcharts-empty';
         }
         attributes = extend({ 'class': className }, attributes);
         return {
@@ -813,7 +862,7 @@ Chart.prototype.getTableAST = function (useLocalDecimalPoint) {
     var e = {
         tree: {
             tagName: 'table',
-            id: "highcharts-data-table-" + this.index,
+            id: "highcharts-data-table-".concat(this.index),
             children: treeChildren
         }
     };