Fixed #8031, columns overlapped xAxis.

highcharts · Apr 6, 2018 · c6ba2a4 · c6ba2a4
1 parent 350833e
commit c6ba2a4
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 3 deletions.
diff --git a/js/parts/StockChart.js b/js/parts/StockChart.js
@@ -860,6 +860,7 @@ Point.prototype.tooltipFormatter = function (pointFormat) {
  * this feature (#2754).
  */
 wrap(Series.prototype, 'render', function (proceed) {
+    var clipHeight;
     // Only do this on not 3d (#2939, #5904) nor polar (#6057) charts, and only
     // if the series type handles clipping in the animate method (#2975).
     if (
@@ -868,23 +869,27 @@ wrap(Series.prototype, 'render', function (proceed) {
         this.xAxis &&
         !this.xAxis.isRadial // Gauge, #6192
     ) {
+        // Include xAxis line width, #8031
+        clipHeight = this.yAxis.len - (this.xAxisLine ?
+            Math.floor(this.xAxis.axisLine.strokeWidth() / 2) :
+            0);
 
         // First render, initial clip box
         if (!this.clipBox && this.animate) {
             this.clipBox = merge(this.chart.clipBox);
             this.clipBox.width = this.xAxis.len;
-            this.clipBox.height = this.yAxis.len;
+            this.clipBox.height = clipHeight;
 
         // On redrawing, resizing etc, update the clip rectangle
         } else if (this.chart[this.sharedClipKey]) {
             this.chart[this.sharedClipKey].attr({
                 width: this.xAxis.len,
-                height: this.yAxis.len
+                height: clipHeight
             });
         // #3111
         } else if (this.clipBox) {
             this.clipBox.width = this.xAxis.len;
-            this.clipBox.height = this.yAxis.len;
+            this.clipBox.height = clipHeight;
         }
     }
     proceed.call(this);

diff --git a/samples/unit-tests/series-column/axis-line-width/demo.details b/samples/unit-tests/series-column/axis-line-width/demo.details
@@ -0,0 +1,6 @@
+---
+ resources:
+   - https://code.jquery.com/qunit/qunit-2.0.1.js
+   - https://code.jquery.com/qunit/qunit-2.0.1.css
+ js_wrap: b
+...
diff --git a/samples/unit-tests/series-column/axis-line-width/demo.html b/samples/unit-tests/series-column/axis-line-width/demo.html
@@ -0,0 +1,6 @@
+<script src="https://code.highcharts.com/highcharts.js"></script>
+
+<div id="qunit"></div>
+<div id="qunit-fixture"></div>
+
+<div id="container"></div>
diff --git a/samples/unit-tests/series-column/axis-line-width/demo.js b/samples/unit-tests/series-column/axis-line-width/demo.js
@@ -0,0 +1,22 @@
+QUnit.test('Column with xAxis lineWidth in Highstock (#8031).', function (assert) {
+    var chart = Highcharts.chart('container', {
+        chart: {
+            type: 'column'
+        },
+        xAxis: {
+            lineWidth: 17
+        },
+        series: [{
+            clip: true,
+            data: [400, 124]
+        }]
+    });
+
+    assert.strictEqual(
+        chart.clipBox.height ===
+        chart.plotHeight -
+        Math.floor(chart.xAxis[0].userOptions.lineWidth / 2),
+        true,
+        'The column is under xAxis'
+    );
+});