highcharts 13.0.0 → 13.0.1

package/es-modules/Series/AreaRange/AreaRangeSeries.js

@@ -13,9 +13,10 @@
 import AreaRangePoint from './AreaRangePoint.js';
 import H from '../../Core/Globals.js';
 const { noop } = H;
+import RangeDataLabel from '../RangeDataLabel.js';
 import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
-const { area: AreaSeries, area: { prototype: areaProto }, column: { prototype: columnProto } } = SeriesRegistry.seriesTypes;
-import { addEvent, defined, extend, isArray, isNumber, merge, pick } from '../../Shared/Utilities.js';
+const { area: AreaSeries, area: { prototype: areaProto } } = SeriesRegistry.seriesTypes;
+import { addEvent, defined, extend, isArray, isNumber, merge } from '../../Shared/Utilities.js';
 /* *
  *
  *  Constants
@@ -99,12 +100,10 @@ const areaRangeSeriesOptions = {
     trackByArea: true,
     /**
      * Extended data labels for range series types. Range series data
-     * labels use no `x` and `y` options. Instead, they have `xLow`,
-     * `xHigh`, `yLow` and `yHigh` options to allow the higher and lower
-     * data label sets individually.
+     * labels can be positioned individually by defining them as an array
+     * and setting `alignToKey` to `high` or `low`.
      *
      * @declare Highcharts.SeriesAreaRangeDataLabelsOptionsObject
-     * @exclude x, y
      * @since   2.3.0
      * @product highcharts highstock
      *
@@ -112,39 +111,103 @@ const areaRangeSeriesOptions = {
      */
     dataLabels: {
         align: void 0,
+        formatter: RangeDataLabel.formatter,
         verticalAlign: void 0,
         /**
          * X offset of the lower data labels relative to the point value.
          *
+         * Deprecated. Use a data labels array with `alignToKey: 'low'` and
+         * the regular `x` option instead.
+         *
          * @sample highcharts/plotoptions/arearange-datalabels/
          *         Data labels on range series
          * @sample highcharts/plotoptions/arearange-datalabels/
          *         Data labels on range series
+         * @deprecated 13.0.1
          */
         xLow: 0,
         /**
          * X offset of the higher data labels relative to the point value.
          *
+         * Deprecated. Use a data labels array with `alignToKey: 'high'` and
+         * the regular `x` option instead.
+         *
          * @sample highcharts/plotoptions/arearange-datalabels/
          *         Data labels on range series
+         * @deprecated 13.0.1
          */
         xHigh: 0,
         /**
          * Y offset of the lower data labels relative to the point value.
          *
+         * Deprecated. Use a data labels array with `alignToKey: 'low'` and
+         * the regular `y` option instead.
+         *
          * @sample highcharts/plotoptions/arearange-datalabels/
          *         Data labels on range series
+         * @deprecated 13.0.1
          */
         yLow: 0,
         /**
          * Y offset of the higher data labels relative to the point value.
          *
+         * Deprecated. Use a data labels array with `alignToKey: 'high'` and
+         * the regular `y` option instead.
+         *
          * @sample highcharts/plotoptions/arearange-datalabels/
          *         Data labels on range series
+         * @deprecated 13.0.1
          */
         yHigh: 0
     }
 };
+/* *
+ *
+ *  Functions
+ *
+ * */
+/**
+ * Normalize the dataLabels config into a per-label array. Resolves the
+ * `alignToKey` default (`high` for the first label, `low` for the second) and
+ * maps the deprecated `xLow/xHigh/yLow/yHigh` offsets onto each label's `x/y`.
+ * @internal
+ */
+function getRangeDataLabelOptions(series) {
+    const dataLabels = series.options.dataLabels;
+    if (isArray(dataLabels)) {
+        return Array.from({
+            length: Math.max(dataLabels.length, 2)
+        }, (_, index) => {
+            const options = dataLabels[index], defaultAlignToKey = index === 0 ? 'high' :
+                index === 1 ? 'low' :
+                    series.pointValKey, alignToKey = options?.alignToKey ?? defaultAlignToKey;
+            return merge(options ?? { enabled: false }, { alignToKey });
+        });
+    }
+    if (dataLabels?.alignToKey) {
+        return [
+            merge(dataLabels, dataLabels.alignToKey === 'high' ? {
+                x: dataLabels.xHigh,
+                y: dataLabels.yHigh
+            } : dataLabels.alignToKey === 'low' ? {
+                x: dataLabels.xLow,
+                y: dataLabels.yLow
+            } : {})
+        ];
+    }
+    return [
+        merge(dataLabels, {
+            alignToKey: 'high',
+            x: dataLabels?.xHigh,
+            y: dataLabels?.yHigh
+        }),
+        merge(dataLabels, {
+            alignToKey: 'low',
+            x: dataLabels?.xLow,
+            y: dataLabels?.yLow
+        })
+    ];
+}
 /* *
  *
  *  Class
@@ -218,7 +281,7 @@ class AreaRangeSeries extends AreaSeries {
                 rectPlotX: point.rectPlotX,
                 yBottom: point.yBottom,
                 // `plotHighX` is for polar charts
-                plotX: pick(point.plotHighX, point.plotX),
+                plotX: point.plotHighX ?? point.plotX,
                 plotY: point.plotHigh,
                 isNull: point.isNull
             };
@@ -268,151 +331,27 @@ class AreaRangeSeries extends AreaSeries {
         this.areaPath.xMap = lowerPath.xMap;
         return linePath;
     }
-    /**
-     * Extend the basic drawDataLabels method by running it for both lower and
-     * higher values.
-     * @internal
-     */
     drawDataLabels() {
-        const data = this.points, length = data.length, originalDataLabels = [], dataLabelOptions = this.options.dataLabels, inverted = this.chart.inverted;
-        let i, point, up, upperDataLabelOptions, lowerDataLabelOptions;
+        const series = this, dataLabelOptions = series.options.dataLabels;
         if (dataLabelOptions) {
-            // Split into upper and lower options. If data labels is an array,
-            // the first element is the upper label, the second is the lower.
-            //
-            // TODO: We want to change this and allow multiple labels for both
-            // upper and lower values in the future - introducing some options
-            // for which point value to use as Y for the dataLabel, so that this
-            // could be handled in Series.drawDataLabels. This would also
-            // improve performance since we now have to loop over all the points
-            // multiple times to work around the data label logic.
-            if (isArray(dataLabelOptions)) {
-                upperDataLabelOptions = dataLabelOptions[0] || {
-                    enabled: false
-                };
-                lowerDataLabelOptions = dataLabelOptions[1] || {
-                    enabled: false
-                };
-            }
-            else {
-                // Make copies
-                upperDataLabelOptions = extend({}, dataLabelOptions);
-                upperDataLabelOptions.x = dataLabelOptions.xHigh;
-                upperDataLabelOptions.y = dataLabelOptions.yHigh;
-                lowerDataLabelOptions = extend({}, dataLabelOptions);
-                lowerDataLabelOptions.x = dataLabelOptions.xLow;
-                lowerDataLabelOptions.y = dataLabelOptions.yLow;
-            }
-            // Draw upper labels
-            if (upperDataLabelOptions.enabled || this.hasDataLabels?.()) {
-                // Set preliminary values for plotY and dataLabel
-                // and draw the upper labels
-                i = length;
-                while (i--) {
-                    point = data[i];
-                    if (point) {
-                        const { plotHigh = 0, plotLow = 0 } = point;
-                        up = upperDataLabelOptions.inside ?
-                            plotHigh < plotLow :
-                            plotHigh > plotLow;
-                        point.y = point.high;
-                        point._plotY = point.plotY;
-                        point.plotY = plotHigh;
-                        // Store original data labels and set preliminary label
-                        // objects to be picked up in the uber method
-                        originalDataLabels[i] = point.dataLabel;
-                        point.dataLabel = point.dataLabelUpper;
-                        // Set the default offset
-                        point.below = up;
-                        if (inverted) {
-                            if (!upperDataLabelOptions.align) {
-                                upperDataLabelOptions.align = up ?
-                                    'right' : 'left';
-                            }
-                        }
-                        else {
-                            if (!upperDataLabelOptions.verticalAlign) {
-                                upperDataLabelOptions.verticalAlign = up ?
-                                    'top' :
-                                    'bottom';
-                            }
-                        }
-                    }
-                }
-                this.options.dataLabels = upperDataLabelOptions;
-                if (areaProto.drawDataLabels) {
-                    // #1209:
-                    areaProto.drawDataLabels.apply(this, arguments);
-                }
-                // Reset state after the upper labels were created. Move
-                // it to point.dataLabelUpper and reassign the originals.
-                // We do this here to support not drawing a lower label.
-                i = length;
-                while (i--) {
-                    point = data[i];
-                    if (point) {
-                        point.dataLabelUpper = point.dataLabel;
-                        point.dataLabel = originalDataLabels[i];
-                        delete point.dataLabels;
-                        point.y = point.low;
-                        point.plotY = point._plotY;
-                    }
-                }
+            const rangeOptions = getRangeDataLabelOptions(series);
+            // Resolve value references like `{y}` against the aligned key
+            rangeOptions.forEach(RangeDataLabel.applyAlignToKeyValue);
+            series.options.dataLabels = rangeOptions;
+            if (areaProto.drawDataLabels) {
+                // #1209
+                areaProto.drawDataLabels.call(series);
             }
-            // Draw lower labels
-            if (lowerDataLabelOptions.enabled || this.hasDataLabels?.()) {
-                i = length;
-                while (i--) {
-                    point = data[i];
-                    if (point) {
-                        const { plotHigh = 0, plotLow = 0 } = point;
-                        up = lowerDataLabelOptions.inside ?
-                            plotHigh < plotLow :
-                            plotHigh > plotLow;
-                        // Set the default offset
-                        point.below = !up;
-                        if (inverted) {
-                            if (!lowerDataLabelOptions.align) {
-                                lowerDataLabelOptions.align = up ?
-                                    'left' : 'right';
-                            }
-                        }
-                        else {
-                            if (!lowerDataLabelOptions.verticalAlign) {
-                                lowerDataLabelOptions.verticalAlign = up ?
-                                    'bottom' :
-                                    'top';
-                            }
-                        }
-                    }
-                }
-                this.options.dataLabels = lowerDataLabelOptions;
-                if (areaProto.drawDataLabels) {
-                    areaProto.drawDataLabels.apply(this, arguments);
-                }
+            series.options.dataLabels = dataLabelOptions;
+            for (const point of series.points) {
+                const labels = point.dataLabels ?? [];
+                point.dataLabelUpper = labels.find((label) => (RangeDataLabel.resolveAlignToKey(series, label.options
+                    ?.alignToKey) === 'high'));
+                point.dataLabel = labels.find((label) => (RangeDataLabel.resolveAlignToKey(series, label.options
+                    ?.alignToKey) === 'low'));
             }
-            // Merge upper and lower into point.dataLabels for later destroying
-            if (upperDataLabelOptions.enabled) {
-                i = length;
-                while (i--) {
-                    point = data[i];
-                    if (point) {
-                        point.dataLabels = [
-                            point.dataLabelUpper,
-                            point.dataLabel
-                        ].filter(function (label) {
-                            return !!label;
-                        });
-                    }
-                }
-            }
-            // Reset options
-            this.options.dataLabels = dataLabelOptions;
         }
     }
-    alignDataLabel() {
-        columnProto.alignDataLabel.apply(this, arguments);
-    }
     modifyMarkerSettings() {
         const series = this, originalMarkerSettings = {
             marker: series.options.marker,
@@ -463,7 +402,7 @@ class AreaRangeSeries extends AreaSeries {
             if (defined(point.plotHighX)) {
                 point.plotX = point.plotHighX;
             }
-            point.y = pick(point.high, point.origProps.y); // #15523
+            point.y = point.high ?? point.origProps.y; // #15523
             point.negative = point.y < (series.options.threshold || 0);
             if (series.zones.length) {
                 point.zone = point.getZone();
@@ -561,6 +500,7 @@ extend(AreaRangeSeries.prototype, {
     pointValKey: 'low',
     setStackedPoints: noop
 });
+RangeDataLabel.compose(AreaRangeSeries);
 SeriesRegistry.registerSeriesType('arearange', AreaRangeSeries);
 /* *
  *

package/es-modules/Series/AreaRange/AreaRangeSeriesDefaults.js

@@ -95,12 +95,10 @@ const AreaRangeSeriesDefaults = {
     trackByArea: true,
     /**
      * Extended data labels for range series types. Range series data
-     * labels use no `x` and `y` options. Instead, they have `xLow`,
-     * `xHigh`, `yLow` and `yHigh` options to allow the higher and lower
-     * data label sets individually.
+     * labels can be positioned individually by defining them as an array
+     * and setting `alignToKey` to `high` or `low`.
      *
      * @declare Highcharts.SeriesAreaRangeDataLabelsOptionsObject
-     * @exclude x, y
      * @since   2.3.0
      * @product highcharts highstock
      * @apioption plotOptions.arearange.dataLabels
@@ -111,35 +109,75 @@ const AreaRangeSeriesDefaults = {
         /**
          * X offset of the lower data labels relative to the point value.
          *
+         * Deprecated. Use a data labels array with `alignToKey: 'low'` and
+         * the regular `x` option instead.
+         *
          * @sample highcharts/plotoptions/arearange-datalabels/
          *         Data labels on range series
          * @sample highcharts/plotoptions/arearange-datalabels/
          *         Data labels on range series
+         * @deprecated 13.0.1
          */
         xLow: 0,
         /**
          * X offset of the higher data labels relative to the point value.
          *
+         * Deprecated. Use a data labels array with `alignToKey: 'high'` and
+         * the regular `x` option instead.
+         *
          * @sample highcharts/plotoptions/arearange-datalabels/
          *         Data labels on range series
+         * @deprecated 13.0.1
          */
         xHigh: 0,
         /**
          * Y offset of the lower data labels relative to the point value.
          *
+         * Deprecated. Use a data labels array with `alignToKey: 'low'` and
+         * the regular `y` option instead.
+         *
          * @sample highcharts/plotoptions/arearange-datalabels/
          *         Data labels on range series
+         * @deprecated 13.0.1
          */
         yLow: 0,
         /**
          * Y offset of the higher data labels relative to the point value.
          *
+         * Deprecated. Use a data labels array with `alignToKey: 'high'` and
+         * the regular `y` option instead.
+         *
          * @sample highcharts/plotoptions/arearange-datalabels/
          *         Data labels on range series
+         * @deprecated 13.0.1
          */
         yHigh: 0
     }
 };
+/**
+ * The point key to use for positioning this data label.
+ * Possible values are `low` and `high`. In the legacy array form, the first
+ * label defaults to `high` and the second label defaults to `low`.
+ *
+ * @type      {"low"|"high"}
+ * @validvalue ["low", "high"]
+ * @product   highcharts highstock
+ * @apioption plotOptions.arearange.dataLabels.alignToKey
+ */
+/**
+ * Callback JavaScript function to format the data label. Note that if a
+ * `format` is defined, the format takes precedence and the formatter is
+ * ignored.
+ *
+ * By default, the data label renders the value of the point key it is
+ * [aligned to](#plotOptions.arearange.dataLabels.alignToKey). Define a
+ * [format](#plotOptions.arearange.dataLabels.format) or `formatter` to
+ * display other values.
+ *
+ * @type      {Highcharts.DataLabelsFormatterCallbackFunction}
+ * @product   highcharts highstock
+ * @apioption plotOptions.arearange.dataLabels.formatter
+ */
 /**
  * A `arearange` series. If the [type](#series.arearange.type) option is not
  * specified, it is inherited from [chart.type](#chart.type).

package/es-modules/Series/Bellcurve/BellcurveSeries.js

@@ -66,7 +66,7 @@ class BellcurveSeries extends AreaSplineSeries {
      *
      * */
     setData(data, redraw = true, animation, updatePoints) {
-        let alteredData;
+        let alteredData = [];
         if (typeof data !== 'undefined' && data.length > 0) {
             // Support data array of objects (#24073).
             data = data
@@ -76,7 +76,11 @@ class BellcurveSeries extends AreaSplineSeries {
                 .filter(isNumber);
             this.setMean(data);
             this.setStandardDeviation(data);
-            alteredData = this.derivedData(this.mean || 0, this.standardDeviation || 0);
+            if (isNumber(this.mean) &&
+                isNumber(this.standardDeviation) &&
+                this.standardDeviation > 0) {
+                alteredData = this.derivedData(this.mean, this.standardDeviation);
+            }
         }
         super.setData.call(this, alteredData, redraw, animation, updatePoints);
     }
@@ -96,12 +100,12 @@ class BellcurveSeries extends AreaSplineSeries {
         }
     }
     setMean(data) {
-        const series = this;
-        series.mean = correctFloat(BellcurveSeries.mean(data || []));
+        const mean = BellcurveSeries.mean(data || []);
+        this.mean = isNumber(mean) ? correctFloat(mean) : void 0;
     }
     setStandardDeviation(data) {
-        const series = this;
-        series.standardDeviation = correctFloat(BellcurveSeries.standardDeviation(data || [], series.mean));
+        const sd = BellcurveSeries.standardDeviation(data || [], this.mean);
+        this.standardDeviation = isNumber(sd) ? correctFloat(sd) : void 0;
     }
 }
 /* *

package/es-modules/Series/BoxPlot/BoxPlotSeries.js

@@ -10,10 +10,12 @@
  *
  * */
 'use strict';
+import { borderRadiusObject } from '../../Extensions/BorderRadius.js';
 import BoxPlotSeriesDefaults from './BoxPlotSeriesDefaults.js';
 import ColumnSeries from '../Column/ColumnSeries.js';
 import H from '../../Core/Globals.js';
 const { noop } = H;
+import RangeDataLabel from '../RangeDataLabel.js';
 import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
 import { crisp, extend, merge, pick, relativeLength } from '../../Shared/Utilities.js';
 /* *
@@ -71,8 +73,9 @@ class BoxPlotSeries extends ColumnSeries {
         // Do the translation on each point dimension
         series.points.forEach(function (point) {
             pointArrayMap.forEach(function (key) {
-                if (point[key] !== null) {
-                    point[key + 'Plot'] = yAxis.translate(point[key], 0, 1, 0, 1);
+                const value = point[key];
+                if (value !== null) {
+                    point[`${key}Plot`] = yAxis.translate(value, false, true, false, true);
                 }
             });
             point.plotHigh = point.highPlot; // For data label validation
@@ -161,19 +164,19 @@ class BoxPlotSeries extends ColumnSeries {
                         options.dashStyle);
                     point.medianShape.attr(medianAttr);
                 }
-                let d;
                 // The stem
                 const stemX = crisp((point.plotX || 0) + (series.pointXOffset || 0) +
                     ((series.barW || 0) / 2), point.stem.strokeWidth());
-                d = [
-                    // Stem up
-                    ['M', stemX, q3Plot],
-                    ['L', stemX, highPlot],
-                    // Stem down
-                    ['M', stemX, q1Plot],
-                    ['L', stemX, lowPlot]
-                ];
-                point.stem[verb]({ d });
+                point.stem[verb]({
+                    d: [
+                        // Stem up
+                        ['M', stemX, q3Plot],
+                        ['L', stemX, highPlot],
+                        // Stem down
+                        ['M', stemX, q1Plot],
+                        ['L', stemX, lowPlot]
+                    ]
+                });
                 // The box
                 if (doQuartiles) {
                     const boxStrokeWidth = point.box.strokeWidth();
@@ -181,15 +184,11 @@ class BoxPlotSeries extends ColumnSeries {
                     q3Plot = crisp(q3Plot, boxStrokeWidth);
                     x = crisp(x, boxStrokeWidth);
                     right = crisp(right, boxStrokeWidth);
-                    d = [
-                        ['M', x, q3Plot],
-                        ['L', x, q1Plot],
-                        ['L', right, q1Plot],
-                        ['L', right, q3Plot],
-                        ['L', x, q3Plot],
-                        ['Z']
-                    ];
-                    point.box[verb]({ d });
+                    // Optionally round the corners of the box
+                    const r = Math.min(relativeLength(borderRadiusObject(options.borderRadius).radius, right - x), (right - x) / 2, Math.abs(q1Plot - q3Plot) / 2);
+                    point.box[verb]({
+                        d: renderer.symbols.roundedRect(x, Math.min(q1Plot, q3Plot), right - x, Math.abs(q1Plot - q3Plot), { r })
+                    });
                 }
                 // The whiskers
                 if (pointWhiskerLength) {
@@ -202,11 +201,12 @@ class BoxPlotSeries extends ColumnSeries {
                 }
                 // The median
                 medianPlot = crisp(point.medianPlot, point.medianShape.strokeWidth());
-                d = [
-                    ['M', x, medianPlot],
-                    ['L', right, medianPlot]
-                ];
-                point.medianShape[verb]({ d });
+                point.medianShape[verb]({
+                    d: [
+                        ['M', x, medianPlot],
+                        ['L', right, medianPlot]
+                    ]
+                });
             }
         }
     }
@@ -226,10 +226,9 @@ extend(BoxPlotSeries.prototype, {
     pointArrayMap: ['low', 'q1', 'median', 'q3', 'high'],
     // Defines the top of the tracker
     pointValKey: 'high',
-    // Disable data labels for box plot
-    drawDataLabels: noop,
     setStackedPoints: noop // #3890
 });
+RangeDataLabel.compose(BoxPlotSeries);
 SeriesRegistry.registerSeriesType('boxplot', BoxPlotSeries);
 /* *
  *

package/es-modules/Series/BoxPlot/BoxPlotSeriesDefaults.js

@@ -29,13 +29,27 @@
  *         Jittered scatter plot on top of a box plot
  *
  * @extends      plotOptions.column
- * @excluding    borderColor, borderRadius, borderWidth, groupZPadding,
+ * @excluding    borderColor, borderWidth, groupZPadding,
  *               states, boostThreshold, boostBlending
  * @product      highcharts
  * @requires     highcharts-more
  * @optionparent plotOptions.boxplot
  */
 const BoxPlotSeriesDefaults = {
+    /**
+     * The corner radius of the border surrounding the box. A number
+     * signifies pixels. A percentage string, like for example `50%`, signifies
+     * a size relative to the box width.
+     *
+     * @sample {highcharts} highcharts/demo/violin-plot/
+     *         Box plot with rounded corners
+     *
+     * @type    {number|string|Highcharts.BorderRadiusOptionsObject}
+     * @default 0
+     * @since   13.0.1
+     * @product highcharts
+     */
+    borderRadius: 0,
     /**
      * The Y axis value to serve as the base for the columns, for
      * distinguishing between values above and below a threshold. If `null`,
@@ -247,6 +261,24 @@ const BoxPlotSeriesDefaults = {
      * @default   high
      * @apioption plotOptions.boxplot.colorKey
      */
+    /**
+     * The point key used to position a box plot data label.
+     *
+     * @typedef {"low"|"q1"|"median"|"q3"|"high"} Highcharts.BoxPlotPointValKey
+     */
+    /**
+     * The point key to use for positioning this data label.
+     * Possible values are `low`, `q1`, `median`, `q3` and `high`.
+     *
+     * @sample {highcharts} highcharts/series-boxplot/data-labels/
+     *         Multiple data labels
+     *
+     * @type      {Highcharts.BoxPlotPointValKey}
+     * @default   high
+     * @validvalue ["low", "q1", "median", "q3", "high"]
+     * @product   highcharts
+     * @apioption plotOptions.boxplot.dataLabels.alignToKey
+     */
     /**
      * The color of the whiskers, the horizontal lines marking low and high
      * values. When `undefined`, the general series color is used.

package/es-modules/Series/Bubble/BubbleSeries.js

@@ -391,6 +391,21 @@ BubbleSeries.defaultOptions = merge(ScatterSeries.defaultOptions, {
      * @since 6.1.0
      */
     animationLimit: 250,
+    /**
+     * When using automatic point colors pulled from the global
+     * [colors](colors) or series-specific
+     * [plotOptions.bubble.colors](series.colors) collections, this option
+     * determines whether the chart should receive one color per series or
+     * one color per point.
+     *
+     * In styled mode, the `colors` or `series.colors` arrays are not
+     * supported, and instead this option gives the points individual color
+     * class names on the form `highcharts-color-{n}`.
+     *
+     * @type      {boolean}
+     * @default   false
+     * @apioption plotOptions.bubble.colorByPoint
+     */
     /**
      * Whether to display negative sized bubbles. The threshold is given
      * by the [zThreshold](#plotOptions.bubble.zThreshold) option, and negative

package/es-modules/Series/Bullet/BulletSeries.js

@@ -100,7 +100,7 @@ class BulletSeries extends ColumnSeries {
                             x: point.x,
                             y: targetVal,
                             options: {}
-                        }).color || series.color)) || void 0, point.color, series.color),
+                        })?.color || series.color)) || void 0, point.color, series.color),
                         stroke: pick(targetOptions.borderColor, point.borderColor, series.options.borderColor),
                         'stroke-width': targetOptions.borderWidth,
                         r: targetOptions.borderRadius

package/es-modules/Series/Candlestick/CandlestickSeries.js

@@ -49,11 +49,11 @@ class CandlestickSeries extends OHLCSeries {
             (isUp ? (options.upLineColor || stroke) : stroke);
         // Select or hover states
         if (state) {
-            const stateOptions = options.states[state];
+            const stateOptions = options.states?.[state] || {};
             attribs.fill = stateOptions.color || attribs.fill;
             attribs.stroke = stateOptions.lineColor || attribs.stroke;
-            attribs['stroke-width'] =
-                stateOptions.lineWidth || attribs['stroke-width'];
+            attribs['stroke-width'] = stateOptions.lineWidth ||
+                attribs['stroke-width'];
         }
         return attribs;
     }