Fixed #7428, legend overlapped title and subtitle when vertically ali…

…gned to top.
highcharts · Dec 1, 2017 · 3d35563 · 3d35563
1 parent b8556f3
commit 3d35563
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 20 deletions.
diff --git a/js/parts/Legend.js b/js/parts/Legend.js
@@ -577,6 +577,7 @@ Highcharts.Legend.prototype = {
 				/(lbv|lm|ltv)/
 			], function (alignments, side) {
 				if (alignments.test(alignment) && !defined(margin[side])) {
+
 					// Now we have detected on which side of the chart we should
 					// reserve space for the legend
 					chart[marginNames[side]] = Math.max(
@@ -589,7 +590,13 @@ Highcharts.Legend.prototype = {
 								(side % 2) ? 'x' : 'y'
 							] +
 							pick(options.margin, 12) +
-							spacing[side]
+							spacing[side] +
+							(
+								side === 0 ?
+									chart.titleOffset +
+										chart.options.title.margin :
+									0
+							) // #7428
 						)
 					);
 				}
@@ -614,7 +621,8 @@ Highcharts.Legend.prototype = {
 			legendHeight,
 			box = legend.box,
 			options = legend.options,
-			padding = legend.padding;
+			padding = legend.padding,
+			alignTo;
 
 		legend.itemX = padding;
 		legend.itemY = legend.initialItemY;
@@ -718,10 +726,20 @@ Highcharts.Legend.prototype = {
 		});
 
 		if (display) {
+
+			// If aligning to the top, adjust for the title (#7428)
+			alignTo = chart.spacingBox;
+			if (options.verticalAlign === 'top' && !options.floating) {
+				alignTo = merge(alignTo, {
+					y: alignTo.y + chart.titleOffset +
+						chart.options.title.margin
+				});
+			}
+
 			legendGroup.align(merge(options, {
 				width: legendWidth,
 				height: legendHeight
-			}), true, 'spacingBox');
+			}), true, alignTo);
 		}
 
 		if (!chart.isResizing) {

diff --git a/samples/highcharts/demo/line-ajax/demo.js b/samples/highcharts/demo/line-ajax/demo.js
@@ -58,8 +58,6 @@ $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=analytics.
         legend: {
             align: 'left',
             verticalAlign: 'top',
-            y: 20,
-            floating: true,
             borderWidth: 0
         },
 
@@ -101,20 +99,6 @@ $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=analytics.
             }
         }, {
             name: 'New visitors'
-        }],
-        responsive: {
-            rules: [{
-                condition: {
-                    maxWidth: 600
-                },
-                chartOptions: {
-                    legend: {
-                        verticalAlign: 'bottom',
-                        y: 0,
-                        floating: false
-                    }
-                }
-            }]
-        }
+        }]
     });
 });