[v5] legend positioning

[clmz]

how can I set the position of the legend below the chart, e.g. in v4:

chart.legend({
position: 'bottom-left',
})

but this (and many many more properties) don't work anymore and it seems that there's no doc for this?

futher:
What leads to a cropped itemLabel?

when my code is like this:

.legend('color', { itemLabel: 'Total', layout: 'flex', width: 1000, });

[Aarebecca]

In v5, there are two separate configuration items for layout: position and layout.
The position configuration determines where the components are located within different areas of the icon, such as up, down, left, and right.
The layout configuration, on the other hand, determines how the components are arranged within their respective areas.

For example, in the following code snippet, we position the legend to the left, which may result in a crowded space. To solve this issue, we adjust the size of the legend to provide enough space.

.legend('color', {
    size: 100,
    position: 'left'
  })

If we want to achieve the layout shown in the bottom left of the image, we can use the "layout" configuration. Currently, v5 supports flex layouts, and we can configure a layout like this:

  .legend('color', {
    size: 100,
    position: 'left',
    layout: {
      alignItems: 'flex-end'
    }
  })

This will align the items within the legend to the bottom of the area, as shown in the image.