highcharts 13.0.2 → 13.1.0

package/es-modules/Core/Axis/PlotLineOrBand/PlotLineOrBand.js

@@ -51,9 +51,11 @@ class PlotLineOrBand {
             this.labelCollectors.push(() => {
                 const labels = [];
                 for (const axis of this.axes) {
-                    for (const { label, options } of axis.plotLinesAndBands) {
-                        if (label && !options?.label?.allowOverlap) {
-                            labels.push(label);
+                    for (const coll of ['plotBands', 'plotLines']) {
+                        for (const { label, options } of axis[coll]) {
+                            if (label && !options?.label?.allowOverlap) {
+                                labels.push(label);
+                            }
                         }
                     }
                 }
@@ -67,7 +69,7 @@ class PlotLineOrBand {
      *  Constructor
      *
      * */
-    constructor(axis, options) {
+    constructor(axis, options, coll) {
         /**
          * Related axis.
          *
@@ -83,6 +85,7 @@ class PlotLineOrBand {
          */
         this.options = options;
         this.id = options.id;
+        this.coll = coll;
     }
     /* *
      *
@@ -98,43 +101,28 @@ class PlotLineOrBand {
      */
     render() {
         fireEvent(this, 'render');
-        const { axis, options } = this, { chart, horiz, logarithmic } = axis, { color, events, zIndex = 0 } = options, { renderer, time } = axis.chart, groupAttribs = {}, 
+        const { axis, options } = this, { chart, horiz, logarithmic } = axis, { color, events, zIndex = 0 } = options, { renderer, styledMode, time } = axis.chart, 
         // These properties only exist on either band or line
         to = time.parse(options.to), from = time.parse(options.from), value = time.parse(options.value), borderWidth = options.borderWidth;
-        let optionsLabel = options.label, { label, svgElem } = this, path = [], group;
-        const isBand = defined(from) && defined(to), isLine = defined(value), isNew = !svgElem, attribs = {
-            'class': 'highcharts-plot-' + (isBand ? 'band ' : 'line ') +
-                (options.className || '')
-        };
-        let groupName = isBand ? 'bands' : 'lines';
-        // Set the presentational attributes
-        if (!chart.styledMode) {
-            if (isLine) {
-                attribs.stroke = color || 'var(--highcharts-neutral-color-40)';
-                attribs['stroke-width'] =
-                    options.width ?? 1;
-                if (options.dashStyle) {
-                    attribs.dashstyle = options.dashStyle;
-                }
-            }
-            else if (isBand) { // Plot band
-                attribs.fill = color || 'var(--highcharts-highlight-color-10)';
-                if (borderWidth) {
-                    attribs.stroke = options.borderColor;
-                    attribs['stroke-width'] = borderWidth;
-                }
-            }
+        let optionsLabel = options.label, { label, svgElem } = this, group;
+        const isBand = this.coll === 'plotBands', shortKey = isBand ? 'band' : 'line', groupName = `${shortKey}s-${zIndex}`, isNew = !svgElem, attribs = {
+            'class': `highcharts-plot-${shortKey} ${options.className || ''}`
+        }, strokeWidth = isBand ?
+            (borderWidth || 0) :
+            (options.width ?? 1);
+        // Set the stroke width before the path is calculated
+        if (!styledMode) {
+            attribs['stroke-width'] = strokeWidth;
         }
         // Grouping and zIndex
-        groupAttribs.zIndex = zIndex;
-        groupName += '-' + zIndex;
         group = axis.plotLinesAndBandsGroups[groupName];
         if (!group) {
             axis.plotLinesAndBandsGroups[groupName] = group =
                 renderer.g('plot-' + groupName)
                     .clip(chart.plotClipOuter)
-                    .attr(groupAttribs).add();
+                    .attr({ zIndex }).add();
         }
+        group[isNew ? 'attr' : 'animate']({ opacity: +axis.visible });
         // Create the path
         if (!svgElem) {
             /**
@@ -145,40 +133,58 @@ class PlotLineOrBand {
              */
             this.svgElem = svgElem = renderer
                 .path()
-                .attr(attribs)
-                .add(group);
+                .attr(attribs);
+        }
+        // Add it to the correct index while allowing dynamic z-index update
+        if (svgElem.parentGroup !== group) {
+            svgElem.add(group);
         }
         // Set the path or return
-        if (defined(value)) { // Plot line
+        let path;
+        if (!isBand && defined(value)) { // Plot line
             path = axis.getPlotLinePath({
                 value: logarithmic?.log2lin(value) ?? value,
                 lineWidth: svgElem.strokeWidth(),
                 acrossPanes: options.acrossPanes
             });
         }
-        else if (defined(from) && defined(to)) { // Plot band
+        else if (isBand && defined(from) && defined(to)) { // Plot band
             path = axis.getPlotBandPath(logarithmic?.log2lin(from) ?? from, logarithmic?.log2lin(to) ?? to, options);
         }
-        else {
-            return;
+        if (path) {
+            attribs.d = path;
+        }
+        // Apply the styling
+        if (!styledMode) {
+            if (isBand) { // Plot band
+                attribs.fill = color || 'var(--highcharts-highlight-color-10)';
+                if (borderWidth) {
+                    attribs.stroke = options.borderColor;
+                }
+            }
+            else {
+                attribs.stroke = color || 'var(--highcharts-neutral-color-40)';
+                if (options.dashStyle) {
+                    attribs.dashstyle = options.dashStyle;
+                }
+            }
         }
         // Common for lines and bands. Add events only if they were not added
         // before.
-        if (!this.eventsAdded && events) {
+        if (isNew && events) {
             objectEach(events, (_event, eventType) => {
                 svgElem?.on(eventType, (e) => {
                     events[eventType].apply(this, [e, this]);
                 });
             });
-            this.eventsAdded = true;
         }
         if ((isNew || !svgElem.d) && path?.length) {
-            svgElem.attr({ d: path });
+            svgElem.attr(attribs);
         }
         else if (svgElem) {
             if (path) {
                 svgElem.show();
-                svgElem.animate({ d: path });
+                svgElem.animate(attribs);
             }
             else if (svgElem.d) {
                 svgElem.hide();
@@ -218,7 +224,7 @@ class PlotLineOrBand {
      * @function Highcharts.PlotLineOrBand#renderLabel
      */
     renderLabel(optionsLabel, path, isBand, zIndex) {
-        const plotLine = this, axis = plotLine.axis, renderer = axis.chart.renderer, inside = optionsLabel.inside;
+        const plotLine = this, axis = plotLine.axis, chart = axis.chart, renderer = chart.renderer, inside = optionsLabel.inside;
         let label = plotLine.label;
         // Add the SVG element
         if (!label) {
@@ -229,25 +235,31 @@ class PlotLineOrBand {
              * @type {Highcharts.SVGElement}
              */
             plotLine.label = label = renderer
-                .text(this.getLabelText(optionsLabel), 0, 0, optionsLabel.useHTML)
-                .attr({
-                align: optionsLabel.textAlign || optionsLabel.align,
-                rotation: optionsLabel.rotation,
-                'class': 'highcharts-plot-' + (isBand ? 'band' : 'line') +
-                    '-label ' + (optionsLabel.className || ''),
-                zIndex
-            });
-            if (!axis.chart.styledMode) {
-                label.css(merge({
-                    // To allow theming, and in lack of a general place to set
-                    // default options for plot lines and bands, default to the
-                    // title color. If we expose the palette, we should use that
-                    // instead.
-                    color: axis.chart.options.title?.style?.color,
-                    fontSize: '0.8em',
-                    textOverflow: (isBand && !inside) ? '' : 'ellipsis'
-                }, optionsLabel.style));
-            }
+                .text('', 0, 0, optionsLabel.useHTML)
+                .attr({ zIndex });
+        }
+        label
+            .attr({
+            text: this.getLabelText(optionsLabel),
+            align: optionsLabel.textAlign || optionsLabel.align,
+            'class': 'highcharts-plot-' + (isBand ? 'band' : 'line') +
+                '-label ' + (optionsLabel.className || '')
+        })[label.placed ? 'animate' : 'attr']({
+            opacity: 1,
+            rotation: optionsLabel.rotation
+        });
+        if (!chart.styledMode) {
+            label.css(merge({
+                // To allow theming, and in lack of a general place to set
+                // default options for plot lines and bands, default to the
+                // title color. If we expose the palette, we should use that
+                // instead.
+                color: chart.options.title?.style?.color,
+                fontSize: '0.8em',
+                textOverflow: (isBand && !inside) ? '' : 'ellipsis'
+            }, optionsLabel.style));
+        }
+        if (!label.added) {
             label.add();
         }
         // Get the bounding box and align the label
@@ -271,12 +283,31 @@ class PlotLineOrBand {
                     axis.height - (label.alignAttr.y -
                         axis.top) : (optionsLabel.clip ?
                     (axis.width + axis.left) :
-                    axis.chart.chartWidth) - label.alignAttr.x) :
+                    chart.chartWidth) - label.alignAttr.x) :
                     bBoxWidth)) + 'px'
             });
         }
+        else if (label.textWidth) {
+            label.css({ width: 'auto' });
+        }
         label.show(true);
     }
+    /**
+     * Update the plot line or band with new options.
+     *
+     * @param {Highcharts.AxisPlotLinesOptions|Highcharts.AxisPlotBandsOptions} options
+     *        The new options to apply
+     * @param {boolean} [redraw=true]
+     *        Whether to redraw the plot guide immediately
+     *
+     * @function Highcharts.PlotLineOrBand#update
+     */
+    update(options, redraw = true) {
+        merge(true, this.options, options);
+        if (redraw) {
+            this.render();
+        }
+    }
     /**
      * Get label's text content.
      * @internal
@@ -288,15 +319,22 @@ class PlotLineOrBand {
             optionsLabel.text;
     }
     /**
-     * Remove the plot line or band.
-     *
-     * @function Highcharts.PlotLineOrBand#destroy
+     * Destroy the item's elements
      */
     destroy() {
+        destroyObjectProperties(this, this.axis);
+    }
+    /**
+     * Remove the plot line or band and destroy its elements.
+     *
+     * @function Highcharts.PlotLineOrBand#remove
+     */
+    remove() {
         // Remove it from the lookup
-        erase(this.axis.plotLinesAndBands, this);
-        delete this.axis;
-        destroyObjectProperties(this);
+        erase(this.axis[this.coll], this);
+        // Remove from options
+        erase(this.axis.options[this.coll] || [], this.options);
+        this.destroy();
     }
 }
 /* *
@@ -343,10 +381,24 @@ export default PlotLineOrBand;
  * In styled mode, the plot bands are styled by the `.highcharts-plot-band`
  * class in addition to the `className` option.
  *
+ * When doing `Chart.update()` or `Axis.update()`, the plot bands are updated
+ * by index or id. The following merging rules apply:
+ * - If `plotBands` are not defined in the new options, all existing plot bands
+ *   are kept.
+ * - If `plotBands` are defined without ids, the existing plot bands are updated
+ *   by index. If the new array has fewer plot bands, the remaining existing
+ *   plot bands are removed. If the new array has more plot bands, the extra
+ *   ones are added. An empty array removes all existing plot bands.
+ * - If `plotBands` are defined with ids, the existing plot bands are matched
+ *   by id, and remaining unmatched existing plot bands are removed.
+ *
  * @productdesc {highcharts}
  * In a gauge, a plot band on the Y axis (value axis) will stretch along the
  * perimeter of the gauge.
  *
+ * @sample    {highcharts} highcharts/xaxis/plotbands-color/
+ *            Basic plot band
+ *
  * @type      {Array<*>}
  * @product   highcharts highstock gantt
  * @apioption xAxis.plotBands
@@ -638,12 +690,23 @@ export default PlotLineOrBand;
  * In styled mode, the plot lines are styled by the
  * `.highcharts-plot-line` class in addition to the `className` option.
  *
+ * When doing `Chart.update()` or `Axis.update()`, the plot lines are updated
+ * by index or id. The following merging rules apply:
+ * - If `plotLines` are not defined in the new options, all existing plot lines
+ *   are kept.
+ * - If `plotLines` are defined without ids, the existing plot lines are updated
+ *   by index. If the new array has fewer plot lines, the remaining existing
+ *   plot lines are removed. If the new array has more plot lines, the extra
+ *   ones are added. An empty array removes all existing plot lines.
+ * - If `plotLines` are defined with ids, the existing plot lines are matched
+ *   by id, and remaining unmatched existing plot lines are removed.
+ *
  * @type      {Array<*>}
  * @product   highcharts highstock gantt
- * @sample {highcharts} highcharts/xaxis/plotlines-color/
- *         Basic plot line
- * @sample {highcharts} highcharts/series-solidgauge/labels-auto-aligned/
- *         Solid gauge plot line
+ * @sample    {highcharts} highcharts/xaxis/plotlines-color/
+ *            Basic plot line
+ * @sample    {highcharts} highcharts/series-solidgauge/labels-auto-aligned/
+ *            Solid gauge plot line
  * @apioption xAxis.plotLines
  */
 /**

package/es-modules/Core/Axis/PlotLineOrBand/PlotLineOrBandAxis.js

@@ -10,7 +10,7 @@
  *
  * */
 'use strict';
-import { erase, extend, isNumber } from '../../../Shared/Utilities.js';
+import { addEvent, extend, isNumber, splat } from '../../../Shared/Utilities.js';
 /* *
  *
  *  Composition
@@ -34,24 +34,7 @@ var PlotLineOrBandAxis;
      *  Functions
      *
      * */
-    /**
-     * Add a plot band after render time.
-     *
-     * @sample highcharts/members/axis-addplotband/
-     *         Toggle the plot band from a button
-     *
-     * @function Highcharts.Axis#addPlotBand
-     *
-     * @param {Highcharts.AxisPlotBandsOptions} options
-     * A configuration object for the plot band, as defined in
-     * [xAxis.plotBands](https://api.highcharts.com/highcharts/xAxis.plotBands).
-     *
-     * @return {Highcharts.PlotLineOrBand|undefined}
-     * The added plot band, or `undefined` if the options are not valid.
-     */
-    function addPlotBand(options) {
-        return this.addPlotBandOrLine(options, 'plotBands');
-    }
+    const getAdderFunction = (coll) => 
     /**
      * Add a plot band or plot line after render time. Called from
      * addPlotBand and addPlotLine internally.
@@ -59,65 +42,85 @@ var PlotLineOrBandAxis;
      * @internal
      * @function Highcharts.Axis#addPlotBandOrLine
      * @param {Highcharts.AxisPlotBandsOptions|Highcharts.AxisPlotLinesOptions} options
-     * The plotBand or plotLine configuration object.
+     *        The `plotBand` or `plotLine` configuration object.
      */
-    function addPlotBandOrLine(options, coll) {
-        const userOptions = this.userOptions;
-        let obj = new PlotLineOrBandClass(this, options);
+    function addPlotLineOrBand(options) {
+        var _a;
+        const plotItem = new PlotLineOrBandClass(this, options, coll);
         if (this.visible) {
-            obj = obj.render();
-        }
-        if (obj) { // #2189
-            if (!this._addedPlotLB) {
-                this._addedPlotLB = true;
-                (userOptions.plotLines || [])
-                    .concat(userOptions.plotBands || [])
-                    .forEach((plotLineOptions) => {
-                    this.addPlotBandOrLine(plotLineOptions);
-                });
-            }
-            // Add it to the user options for exporting and Axis.update
-            if (coll) {
-                // Workaround Microsoft/TypeScript issue #32693
-                const updatedOptions = (userOptions[coll] || []);
-                updatedOptions.push(options);
-                userOptions[coll] = updatedOptions;
-            }
-            this.plotLinesAndBands.push(obj);
+            plotItem.render();
         }
-        return obj;
-    }
-    /**
-     * Add a plot line after render time.
-     *
-     * @sample highcharts/members/axis-addplotline/
-     *         Toggle the plot line from a button
-     *
-     * @function Highcharts.Axis#addPlotLine
-     *
-     * @param {Highcharts.AxisPlotLinesOptions} options
-     * A configuration object for the plot line, as defined in
-     * [xAxis.plotLines](https://api.highcharts.com/highcharts/xAxis.plotLines).
-     *
-     * @return {Highcharts.PlotLineOrBand|undefined}
-     * The added plot line, or `undefined` if the options are not valid.
-     */
-    function addPlotLine(options) {
-        return this.addPlotBandOrLine(options, 'plotLines');
-    }
+        (_a = this.options)[coll] || (_a[coll] = this.userOptions[coll] = []);
+        this.options[coll].push(options);
+        this[coll].push(plotItem);
+        return plotItem;
+    };
     /** @internal */
     function compose(PlotLineOrBandType, AxisClass) {
         const axisProto = AxisClass.prototype;
         if (!axisProto.addPlotBand) {
             PlotLineOrBandClass = PlotLineOrBandType;
             extend(axisProto, {
-                addPlotBand,
-                addPlotLine,
-                addPlotBandOrLine,
+                addPlotBand: getAdderFunction('plotBands'),
+                addPlotLine: getAdderFunction('plotLines'),
                 getPlotBandPath,
-                removePlotBand,
-                removePlotLine,
-                removePlotBandOrLine
+                removePlotBand: removePlotBandOrLine,
+                removePlotLine: removePlotBandOrLine
+            });
+            addEvent(AxisClass, 'afterInit', function () {
+                // First time only, not on Axis.update()
+                if (!this.plotBands) {
+                    // Placeholder for plotlines and plotbands groups
+                    this.plotLinesAndBandsGroups = {};
+                    // Plot lines and bands from options
+                    for (const coll of ['plotBands', 'plotLines']) {
+                        this[coll] = [];
+                        for (const pOptions of splat(this.options[coll] || [])) {
+                            this[coll].push(new PlotLineOrBandClass(this, pOptions, coll));
+                        }
+                    }
+                }
+            });
+            // Update plot bands and lines one to one
+            addEvent(AxisClass, 'update', function ({ options }) {
+                for (const coll of ['plotBands', 'plotLines']) {
+                    // Check if we have new options to process, otherwise do
+                    // nothing with existing plot lines and bands
+                    if (options[coll]) {
+                        const plotItems = this[coll];
+                        splat(options[coll]).forEach((pOptions = {}, i) => {
+                            // Match by id
+                            let pItem;
+                            if (pOptions?.id) {
+                                pItem = plotItems.find((p) => p.id === pOptions.id);
+                            }
+                            // Match by index
+                            pItem || (pItem = plotItems[i]);
+                            // Update
+                            if (pItem) {
+                                pItem.update(pOptions, false);
+                                options[coll][i] = pItem.options;
+                                // Add
+                            }
+                            else {
+                                pItem = this[coll === 'plotBands' ?
+                                    'addPlotBand' :
+                                    'addPlotLine'](pOptions);
+                            }
+                            pItem.isActive = true;
+                        });
+                        // Remove inactive items from end to start
+                        let i = plotItems.length;
+                        while (i--) {
+                            if (!plotItems[i].isActive) {
+                                plotItems[i].remove();
+                            }
+                            else {
+                                delete plotItems[i].isActive;
+                            }
+                        }
+                    }
+                }
             });
         }
         return AxisClass;
@@ -188,23 +191,6 @@ var PlotLineOrBandAxis;
         }
         return result;
     }
-    /**
-     * Remove a plot band by its id.
-     *
-     * @sample highcharts/members/axis-removeplotband/
-     *         Remove plot band by id
-     * @sample highcharts/members/axis-addplotband/
-     *         Toggle the plot band from a button
-     *
-     * @function Highcharts.Axis#removePlotBand
-     *
-     * @param {string} id
-     *        The plot band's `id` as given in the original configuration
-     *        object or in the `addPlotBand` option.
-     */
-    function removePlotBand(id) {
-        this.removePlotBandOrLine(id);
-    }
     /**
      * Remove a plot band or plot line from the chart by id. Called
      * internally from `removePlotBand` and `removePlotLine`.
@@ -212,45 +198,7 @@ var PlotLineOrBandAxis;
      * @function Highcharts.Axis#removePlotBandOrLine
      */
     function removePlotBandOrLine(id) {
-        const plotLinesAndBands = this.plotLinesAndBands, options = this.options, userOptions = this.userOptions;
-        if (plotLinesAndBands) { // #15639
-            let i = plotLinesAndBands.length;
-            while (i--) {
-                if (plotLinesAndBands[i].id === id) {
-                    plotLinesAndBands[i].destroy();
-                }
-            }
-            ([
-                options.plotLines || [],
-                userOptions.plotLines || [],
-                options.plotBands || [],
-                userOptions.plotBands || []
-            ]).forEach(function (arr) {
-                i = arr.length;
-                while (i--) {
-                    if (arr[i]?.id === id) {
-                        erase(arr, arr[i]);
-                    }
-                }
-            });
-        }
-    }
-    /**
-     * Remove a plot line by its id.
-     *
-     * @sample highcharts/xaxis/plotlines-id/
-     *         Remove plot line by id
-     * @sample highcharts/members/axis-addplotline/
-     *         Toggle the plot line from a button
-     *
-     * @function Highcharts.Axis#removePlotLine
-     *
-     * @param {string} id
-     *        The plot line's `id` as given in the original configuration
-     *        object or in the `addPlotLine` option.
-     */
-    function removePlotLine(id) {
-        this.removePlotBandOrLine(id);
+        [...this.plotBands || [], ...this.plotLines || []].find((plotItem) => plotItem.id === id)?.remove();
     }
 })(PlotLineOrBandAxis || (PlotLineOrBandAxis = {}));
 /* *

package/es-modules/Core/Axis/RadialAxis.js

@@ -461,6 +461,47 @@ var RadialAxis;
                 (titleOptions.y || 0))
         };
     }
+    /**
+     * Before modifying the axis properities, save references to the unmodified
+     * properties so that they can be restored when switching back from radial
+     * to cartesian.
+     */
+    function saveUnmodified(axis) {
+        axis.unmodifiedProps || (axis.unmodifiedProps = [
+            'beforeSetTickPositions',
+            'createLabelCollector',
+            'getCrosshairPosition',
+            'getLinePath',
+            'getOffset',
+            'getPlotBandPath',
+            'getPlotLinePath',
+            'getPosition',
+            'getTitlePosition',
+            'isHidden',
+            'postTranslate',
+            'redraw',
+            'render',
+            'setAxisSize',
+            'setAxisTranslation',
+            'setCategories',
+            'setOptions',
+            'setScale',
+            'setTitle'
+        ].reduce((obj, fnName) => {
+            obj[fnName] = axis[fnName];
+            return obj;
+        }, {}));
+    }
+    /**
+     * Restore unmodified axis properties.
+     */
+    function unmodify(axis) {
+        const props = axis.unmodifiedProps;
+        if (isObject(props)) {
+            extend(axis, props);
+            delete axis.unmodifiedProps;
+        }
+    }
     /**
      * Modify radial axis.
      * @internal
@@ -584,6 +625,7 @@ var RadialAxis;
             return;
         }
         // Before prototype.init
+        saveUnmodified(this);
         if (angular) {
             if (isHidden) {
                 modifyAsHidden(this);
@@ -598,6 +640,9 @@ var RadialAxis;
             // Check which axis is circular
             isCircular = this.horiz;
         }
+        else {
+            unmodify(this);
+        }
         // Disable certain features on angular and polar axes
         if (angular || polar) {
             this.isRadial = true;
@@ -642,7 +687,7 @@ var RadialAxis;
             correctAngle + 360 : correctAngle, reducedAngle2 = reducedAngle1, translateY = 0, translateX = 0;
         if (axis.isRadial) { // Both X and Y axes in a polar chart
             ret = axis.getPosition(this.pos, (axis.center[2] / 2) +
-                relativeLength(labelOptions.distance ?? -25, axis.center[2] / 2) +
+                relativeLength(labelOptions.distance ?? 15, axis.center[2] / 2) +
                 axis.offset);
             // Automatically rotated
             if (labelOptions.rotation === 'auto') {
@@ -823,6 +868,8 @@ var RadialAxis;
                 start = this.postTranslate(this.angleRad, center[3] / 2);
                 center[0] = start.x - this.chart.plotLeft;
                 center[1] = start.y - this.chart.plotTop;
+                // After updating chart.inverted
+                delete this.sector;
                 // Axis len is used to lay out the ticks
                 this.len = this.width = this.height =
                     (center[2] - center[3]) / 2;
@@ -913,12 +960,8 @@ var RadialAxis;
         if (axis.isRadial) {
             endPoint = axis.getPosition(this.pos, axis.center[2] / 2 + tickLength);
             ret = [
-                'M',
-                x,
-                y,
-                'L',
-                endPoint.x,
-                endPoint.y
+                ['M', x, y],
+                ['L', endPoint.x, endPoint.y]
             ];
         }
         else {

package/es-modules/Core/Axis/ScrollbarAxis.js

@@ -121,6 +121,9 @@ var ScrollbarAxis;
                 }
             });
         }
+        else if (axis.scrollbar) {
+            axis.scrollbar = axis.scrollbar.destroy();
+        }
     }
     /**
      * Wrap rendering axis, and update scrollbar if one is created.