I'm setting up a chart where the legend is located below the line graph. For some reason, the legend seems to overlap with the x-axis above it. My settings for the legend are as follows:

 legend: {
            layout: 'horizontal',
            align: 'center',
            itemWidth: LegendWidth,
            verticalAlign: 'bottom',
            floating: true,
            margin: 25,
            borderWidth: 3,
            useHTML:true,
       }

Where LegendWidth is dynamically set. I've already added a value for margin but it still overlaps.

I'm setting up a chart where the legend is located below the line graph. For some reason, the legend seems to overlap with the x-axis above it. My settings for the legend are as follows:

 legend: {
            layout: 'horizontal',
            align: 'center',
            itemWidth: LegendWidth,
            verticalAlign: 'bottom',
            floating: true,
            margin: 25,
            borderWidth: 3,
            useHTML:true,
       }

Where LegendWidth is dynamically set. I've already added a value for margin but it still overlaps.

• javascript
• highcharts

1 Answer 1

You should set the legend.y to some positive number to move it further down.

legend: {
            layout: 'horizontal',
            align: 'center',
            itemWidth: LegendWidth,
            verticalAlign: 'bottom',
            floating: true,
            margin: 25,
            borderWidth: 3,
            useHTML:true,
            y : 25 /* pushes the legend 25 points down */
       }

Here is the doc, and here is a sample