Legend not showing correctly

[alc32]

If the text is a bit long, it is shown above the options, and if window size is small, text is not displayed properly.
Codepen

[junedchhipa]

HI Alejandro,

Thanks for reporting the issue.

The legends are drawn by SVG methods so not easily controlled with CSS. The toolbar is a collection of simple HTML elements and is customizable with the help of CSS.
So, we can move the toolbar up/down if it's getting in the way when we put the legends at the top. Or we can move the legends in options which I will show in the example below.

The reason - why I haven't set defaults for each of these options is that all users will have different requirements where to put the legends / where to put the toolbar, etc.
So, I leave up to the users to customize with simple tweaks (margin/offsets) - where they want to put these elements. That doesn't mean I haven't checked for possibilities that can go wrong when setting these tweaks. It's just that it is difficult to test all the possibilities of these placements.

To fight your issue of too lengthy legends,
I have tweaked the legend property to the following

legend: {
    show: true,
    position: "top",
    containerMargin: {
      top: 30
    }
  },

This will give enough space for the toolbar that floats in the top-right corner.

And - to fight your issue of "too long legends getting cropped in mobile", we can set the responsive options to set the smaller font size for legends in smaller devices.

responsive: [
    {
      breakpoint: 500,
      options: {
        legend: {
          fontSize: "11px"
        }
      }
    }
  ]

Here is the complete codepen example