Fixed #15664, updating gantt outer border lineColor/lineWidth didnt work

highcharts · May 7, 2021 · 3d1ffcf · 3d1ffcf
1 parent c5a840c
commit 3d1ffcf
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 26 deletions.
diff --git a/samples/unit-tests/gantt/grid-axis/demo.js b/samples/unit-tests/gantt/grid-axis/demo.js
@@ -256,6 +256,16 @@ QUnit.test('Vertical Linear axis horizontal placement', function (assert) {
         axes[2].x + axes[2].width,
         'Right outer linear axis horizontal placement'
     );
+
+    chart.yAxis[1].update({
+        lineColor: 'red'
+    });
+
+    assert.strictEqual(
+        chart.yAxis[1].grid.axisLineExtra.attr('stroke'),
+        'red',
+        '#15664: axisLineExtra stroke should be updated'
+    );
 });
 
 /**

diff --git a/ts/Core/Axis/GridAxis.ts b/ts/Core/Axis/GridAxis.ts
@@ -770,6 +770,8 @@ class GridAxis {
             gridOptions = options.grid || {};
 
         if (gridOptions.enabled === true) {
+            const min = axis.min || 0,
+                max = axis.max || 0;
 
             // @todo acutual label padding (top, bottom, left, right)
             axis.maxLabelDimensions = axis.getMaxLabelDimensions(
@@ -820,29 +822,47 @@ class GridAxis {
                     // for the vertical grid axis.
                     if (!axis.horiz && axis.chart.marginRight) {
                         const upperBorderStartPoint = startPoint,
-                            upperBorderEndPoint = ['L', axis.left, startPoint[2]],
+                            upperBorderEndPoint: SVGPath.Segment = [
+                                'L',
+                                axis.left,
+                                startPoint[2] || 0
+                            ],
                             upperBorderPath = [upperBorderStartPoint, upperBorderEndPoint],
-                            lowerBorderEndPoint = ['L', axis.chart.chartWidth - axis.chart.marginRight,
-                                axis.toPixels(axis.max as any + axis.tickmarkOffset)],
-                            lowerBorderStartPoint = ['M', endPoint[1],
-                                axis.toPixels(axis.max as any + axis.tickmarkOffset)],
+                            lowerBorderEndPoint: SVGPath.Segment = [
+                                'L',
+                                axis.chart.chartWidth - axis.chart.marginRight,
+                                axis.toPixels(max + axis.tickmarkOffset)
+                            ],
+                            lowerBorderStartPoint: SVGPath.Segment = [
+                                'M',
+                                endPoint[1] || 0,
+                                axis.toPixels(max + axis.tickmarkOffset)
+                            ],
                             lowerBorderPath = [lowerBorderStartPoint, lowerBorderEndPoint];
 
-                        if (!axis.grid.upperBorder && axis.min as any % 1 !== 0) {
-                            axis.grid.upperBorder = axis.grid.renderBorder(upperBorderPath as any);
+                        if (!axis.grid.upperBorder && min % 1 !== 0) {
+                            axis.grid.upperBorder = axis.grid.renderBorder(upperBorderPath);
                         }
                         if (axis.grid.upperBorder) {
+                            axis.grid.upperBorder.attr({
+                                stroke: options.lineColor,
+                                'stroke-width': options.lineWidth
+                            });
                             axis.grid.upperBorder.animate({
-                                d: upperBorderPath as any
+                                d: upperBorderPath
                             });
                         }
 
-                        if (!axis.grid.lowerBorder && axis.max as any % 1 !== 0) {
-                            axis.grid.lowerBorder = axis.grid.renderBorder(lowerBorderPath as any);
+                        if (!axis.grid.lowerBorder && max % 1 !== 0) {
+                            axis.grid.lowerBorder = axis.grid.renderBorder(lowerBorderPath);
                         }
                         if (axis.grid.lowerBorder) {
+                            axis.grid.lowerBorder.attr({
+                                stroke: options.lineColor,
+                                'stroke-width': options.lineWidth
+                            });
                             axis.grid.lowerBorder.animate({
-                                d: lowerBorderPath as any
+                                d: lowerBorderPath
                             });
                         }
                     }
@@ -852,6 +872,10 @@ class GridAxis {
                     if (!axis.grid.axisLineExtra) {
                         axis.grid.axisLineExtra = axis.grid.renderBorder(linePath);
                     } else {
+                        axis.grid.axisLineExtra.attr({
+                            stroke: options.lineColor,
+                            'stroke-width': options.lineWidth
+                        });
                         axis.grid.axisLineExtra.animate({
                             d: linePath
                         });
@@ -878,30 +902,37 @@ class GridAxis {
                     (axis.linkedParent && axis.linkedParent.scrollbar)
                 )
             ) {
-                const max = axis.max as any,
-                    min = axis.min as any,
-                    tickmarkOffset = axis.tickmarkOffset,
+                const tickmarkOffset = axis.tickmarkOffset,
                     lastTick = axis.tickPositions[axis.tickPositions.length - 1],
                     firstTick = axis.tickPositions[0];
 
                 // Hide/show firts tick label.
-                if (min - firstTick > tickmarkOffset) {
-                    (axis.ticks[firstTick].label as any).hide();
-                } else {
-                    (axis.ticks[firstTick].label as any).show();
+                let label = axis.ticks[firstTick].label;
+                if (label) {
+                    if (min - firstTick > tickmarkOffset) {
+                        label.hide();
+                    } else {
+                        label.show();
+                    }
                 }
 
                 // Hide/show last tick mark/label.
-                if (lastTick - max > tickmarkOffset) {
-                    (axis.ticks[lastTick].label as any).hide();
-                } else {
-                    (axis.ticks[lastTick].label as any).show();
+                label = axis.ticks[lastTick].label;
+                if (label) {
+                    if (lastTick - max > tickmarkOffset) {
+                        label.hide();
+                    } else {
+                        label.show();
+                    }
                 }
 
-                if (lastTick - max < tickmarkOffset && lastTick - max > 0 && axis.ticks[lastTick].isLast) {
-                    (axis.ticks[lastTick].mark as any).hide();
-                } else if (axis.ticks[lastTick - 1]) {
-                    (axis.ticks[lastTick - 1].mark as any).show();
+                const mark = axis.ticks[lastTick].mark;
+                if (mark) {
+                    if (lastTick - max < tickmarkOffset && lastTick - max > 0 && axis.ticks[lastTick].isLast) {
+                        mark.hide();
+                    } else if (axis.ticks[lastTick - 1]) {
+                        mark.show();
+                    }
                 }
             }
         }