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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With