I have this chart:
https://jsfiddle.net/GarfieldKlon/txu215w6/
Highcharts.chart('container', {
chart: {
type: 'bar',
borderWidth: 1,
},
title: {
text: 'Fruit Consumption',
align: 'left',
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges'],
},
yAxis: {
title: {
text: 'Fruit eaten',
},
},
series: [{
name: 'Jane',
data: [1, 0, 4],
}, {
name: 'Marsupilami',
data: [1, 0, 4],
}, {
name: 'Johnny',
data: [5, 7, 3],
}],
legend: {
enabled: true,
align: 'left',
layout: 'vertical',
symbolRadius: 0,
},
caption: {
text: '<b>The caption renders at the bottom of the chart, and is ' +
'included if the chart is exported.</b><br><em>Lorem ipsum dolor ' +
'sit amet, consectetur adipiscing elit, sed do eiusmod tempor ' +
'incididunt ut labore et dolore magna aliqua. Ut enim ad minim ' +
'veniam, quis nostrud exercitation ullamco laboris nisi ut ' +
'aliquip ex ea commodo consequat. Duis aute irure dolor in ' +
'reprehenderit in voluptate velit esse cillum dolore eu fugiat ' +
'nulla pariatur. Excepteur sint occaecat cupidatat non proident, ' +
'sunt in culpa qui officia deserunt mollit anim id est ' +
'laborum.</em><br><em>Lorem ipsum dolor ' +
'sit amet, consectetur adipiscing elit, sed do eiusmod tempor ' +
'incididunt ut labore et dolore magna aliqua. Ut enim ad minim ' +
'veniam, quis nostrud exercitation ullamco laboris nisi ut ' +
'aliquip ex ea commodo consequat. Duis aute irure dolor in ' +
'reprehenderit in voluptate velit esse cillum dolore eu fugiat ' +
'nulla pariatur. Excepteur sint occaecat cupidatat non proident, ' +
'sunt in culpa qui officia deserunt mollit anim id est ' +
'laborum.</em>',
},
credits: {
enabled: false,
},
});
And the legend should be placed above the caption and both, the caption and the legend, should be aligned with the 0 grid line.
But the legend is overlapping the caption. Why? And how can I solve it?