Fixed #18960, dumbbell data labels position issue.

highcharts · May 10, 2023 · 8840936 · 8840936
1 parent e07b3f9
commit 8840936
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 95 deletions.
diff --git a/ts/Series/ColumnRange/ColumnRangeSeries.ts b/ts/Series/ColumnRange/ColumnRangeSeries.ts
@@ -176,103 +176,105 @@ class ColumnRangeSeries extends AreaRangeSeries {
         return columnProto.translate3dShapes.apply(this, arguments as any);
     }
 
-}
-
+    public afterColumnTranslate(): void {
+        /**
+         * Translate data points from raw values x and y to plotX and plotY
+         * @private
+         */
+        const yAxis = this.yAxis,
+            xAxis = this.xAxis,
+            startAngleRad = (xAxis as RadialAxis.AxisComposition).startAngleRad,
+            chart = this.chart,
+            isRadial = this.xAxis.isRadial,
+            safeDistance = Math.max(chart.chartWidth, chart.chartHeight) + 999;
+
+        let height: number,
+            heightDifference: number,
+            start: number,
+            plotHigh: number,
+            y: number;
+
+        // eslint-disable-next-line valid-jsdoc
+        /**
+         * Don't draw too far outside plot area (#6835)
+         * @private
+         */
+        function safeBounds(pixelPos: number): number {
+            return clamp(pixelPos, -safeDistance, safeDistance);
+        }
 
-addEvent(ColumnRangeSeries, 'afterColumnTranslate', function (): void {
-    /**
-     * Translate data points from raw values x and y to plotX and plotY
-     * @private
-     */
-    const yAxis = this.yAxis,
-        xAxis = this.xAxis,
-        startAngleRad = (xAxis as RadialAxis.AxisComposition).startAngleRad,
-        chart = this.chart,
-        isRadial = this.xAxis.isRadial,
-        safeDistance = Math.max(chart.chartWidth, chart.chartHeight) + 999;
-
-    let height: number,
-        heightDifference: number,
-        start: number,
-        plotHigh: number,
-        y: number;
-
-    // eslint-disable-next-line valid-jsdoc
-    /**
-     * Don't draw too far outside plot area (#6835)
-     * @private
-     */
-    function safeBounds(pixelPos: number): number {
-        return clamp(pixelPos, -safeDistance, safeDistance);
-    }
+        // Set plotLow and plotHigh
+        this.points.forEach((point): void => {
+            const shapeArgs = point.shapeArgs || {},
+                minPointLength = this.options.minPointLength,
+                plotY = point.plotY,
+                plotHigh = yAxis.translate(
+                    point.high, 0 as any, 1 as any, 0 as any, 1 as any
+                );
 
-    // Set plotLow and plotHigh
-    this.points.forEach((point): void => {
-        const shapeArgs = point.shapeArgs || {},
-            minPointLength = this.options.minPointLength,
-            plotY = point.plotY,
-            plotHigh = yAxis.translate(
-                point.high, 0 as any, 1 as any, 0 as any, 1 as any
-            );
-
-        if (isNumber(plotHigh) && isNumber(plotY)) {
-            point.plotHigh = safeBounds(plotHigh);
-            point.plotLow = safeBounds(plotY);
-
-            // adjust shape
-            y = point.plotHigh;
-            height = pick(
-                (point as any).rectPlotY,
-                point.plotY
-            ) - point.plotHigh;
-
-            // Adjust for minPointLength
-            if (Math.abs(height) < (minPointLength as any)) {
-                heightDifference = ((minPointLength as any) - height);
-                height += heightDifference;
-                y -= heightDifference / 2;
-
-            // Adjust for negative ranges or reversed Y axis (#1457)
-            } else if (height < 0) {
-                height *= -1;
-                y -= height;
+            if (isNumber(plotHigh) && isNumber(plotY)) {
+                point.plotHigh = safeBounds(plotHigh);
+                point.plotLow = safeBounds(plotY);
+
+                // adjust shape
+                y = point.plotHigh;
+                height = pick(
+                    (point as any).rectPlotY,
+                    point.plotY
+                ) - point.plotHigh;
+
+                // Adjust for minPointLength
+                if (Math.abs(height) < (minPointLength as any)) {
+                    heightDifference = ((minPointLength as any) - height);
+                    height += heightDifference;
+                    y -= heightDifference / 2;
+
+                // Adjust for negative ranges or reversed Y axis (#1457)
+                } else if (height < 0) {
+                    height *= -1;
+                    y -= height;
+                }
+
+                if (isRadial && this.polar) {
+
+                    start = point.barX + startAngleRad;
+                    point.shapeType = 'arc';
+                    point.shapeArgs = this.polar.arc(
+                        y + height,
+                        y,
+                        start,
+                        start + point.pointWidth
+                    );
+                } else {
+
+                    shapeArgs.height = height;
+                    shapeArgs.y = y;
+                    const { x = 0, width = 0 } = shapeArgs;
+                    // #17912, aligning column range points
+                    // merge if shapeArgs contains more properties e.g. for 3d
+                    point.shapeArgs = merge(point.shapeArgs,
+                        this.crispCol(x, y, width, height));
+
+                    point.tooltipPos = chart.inverted ?
+                        [
+                            yAxis.len + yAxis.pos - chart.plotLeft - y -
+                                height / 2,
+                            xAxis.len + xAxis.pos - chart.plotTop - x -
+                                width / 2,
+                            height
+                        ] : [
+                            xAxis.left - chart.plotLeft + x + width / 2,
+                            yAxis.pos - chart.plotTop + y + height / 2,
+                            height
+                        ]; // don't inherit from column tooltip position - #3372
+                }
             }
+        });
+    }
+}
 
-            if (isRadial && this.polar) {
-
-                start = point.barX + startAngleRad;
-                point.shapeType = 'arc';
-                point.shapeArgs = this.polar.arc(
-                    y + height,
-                    y,
-                    start,
-                    start + point.pointWidth
-                );
-            } else {
-
-                shapeArgs.height = height;
-                shapeArgs.y = y;
-                const { x = 0, width = 0 } = shapeArgs;
-                // #17912, aligning column range points
-                // merge if shapeArgs contains more properties e.g. for 3d
-                point.shapeArgs = merge(point.shapeArgs,
-                    this.crispCol(x, y, width, height));
-
-                point.tooltipPos = chart.inverted ?
-                    [
-                        yAxis.len + yAxis.pos - chart.plotLeft - y -
-                            height / 2,
-                        xAxis.len + xAxis.pos - chart.plotTop - x -
-                            width / 2,
-                        height
-                    ] : [
-                        xAxis.left - chart.plotLeft + x + width / 2,
-                        yAxis.pos - chart.plotTop + y + height / 2,
-                        height
-                    ]; // don't inherit from column tooltip position - #3372
-            }
-        }
-    });
+addEvent(ColumnRangeSeries, 'afterColumnTranslate', function (): void {
+    ColumnRangeSeries.prototype.afterColumnTranslate.apply(this);
 }, { order: 5 });
 
 /* *

diff --git a/ts/Series/Dumbbell/DumbbellSeries.ts b/ts/Series/Dumbbell/DumbbellSeries.ts
@@ -483,6 +483,16 @@ class DumbbellSeries extends AreaRangeSeries {
 
         return pointAttribs;
     }
+
+    /**
+     * Set the shape arguments for dummbells.
+     * @private
+     */
+    public setShapeArgs(): void {
+        colProto.translate.apply(this);
+        columnRangeProto.afterColumnTranslate.apply(this);
+    }
+
 }
 
 /* *
@@ -496,15 +506,13 @@ interface DumbbellSeries {
     crispCol: typeof colProto.crispCol;
     trackerGroups: Array<string>;
     translatePoint: typeof AreaRangeSeries.prototype['translate'];
-    setShapeArgs: typeof columnRangeProto['translate'];
     seriesDrawPoints: typeof AreaRangeSeries.prototype['drawPoints'];
 }
 extend(DumbbellSeries.prototype, {
     crispCol: colProto.crispCol,
     drawGraph: noop,
     drawTracker: ColumnSeries.prototype.drawTracker,
     pointClass: DumbbellPoint,
-    setShapeArgs: columnRangeProto.translate,
     seriesDrawPoints: areaRangeProto.drawPoints,
     trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
     translatePoint: areaRangeProto.translate