Feedfedfat Feedfedfat - 1 month ago 20
Javascript Question

In Highcharts, how to prevent legend pagination down arrow button get cut off?

With Highcharts, while the legend box aligns at right of the chart, with lots of legend items, it provides a legend item pagination, and scroll up/down buttons. However, sometimes the scroll down button got cut off from the right edge of the window.

enter image description here

I found out it only happens when the legend items' texts are too short (1 letter), which causes the width of the legend box to be not wide enough to cover the whole pagination button set.

I don't know why Highcharts doesn't take the width of the pagination button set as a parameter while calculating the legend box width. I believe this is an issue that Highcharts needs to solve.

Anyway, is there a nice way to solve this problem? I couldn't find any properties in

legend
to make it work.

Here is a fiddle of this issue, not as terrible as the image, but still makes a point.
https://jsfiddle.net/scottszb1987/aquurLfc/

Answer

Use x and y offsets to align legend, to achieve your expected result following x offset value will fix the issue

legend:{
  align: "right",
  floating: true,
  verticalAlign: "middle",
  layout: "vertical",
  x:-3
}

Updated fiddle- https://jsfiddle.net/Nagasai_Aytha/aquurLfc/16/