with enough items legend takes all space, series becomes invisible

[techpuls-damir]

With enough data items legend pushes out chart area so it becomes invisible. The problem is especially common on mobile.
Is there a way to reserve space for chart area. (legend should probably be scrollable or pageable)

This is JS needed in example CodePen, it is horizonal stacked barchart but it is same with other chart types:

var options = {
legend: { horizontalAlign: "left", position: "bottom" },
chart: {
toolbar: { show: false },
type: "bar",
stacked: true,
height: 300,
width: 200,
stackType: "100%"
},
series: [
{ data: [1], name: "Series Name 1" },
{ data: [2], name: "Series name 2" },
{ data: [3], name: "Series name 3" },
{ data: [4], name: "Series name 4" },
{ data: [5], name: "Series name 5" },
{ data: [6], name: "Series name 6" },
{ data: [7], name: "Series name 7" },
{ data: [8], name: "Series name 8" },
{ data: [9], name: "Series name 9" },
{ data: [10], name: "Series name 10" },
{ data: [11], name: "Series name 11" },
{ data: [12], name: "Series name 12" },
],
grid: { show: false },
plotOptions: { bar: { horizontal: true } },
xaxis: {
categories: [""],
floating: true,
axisTicks: { show: false },
axisBorder: { show: false },
labels: { show: false }
},
yaxis: {
floating: true,
axisTicks: { show: false },
axisBorder: { show: false },
labels: { show: false }
}
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

[Arjun3023]

Hey. Sorry to disturb, but any updates on this?
I've been facing the same issue too.

[Arjun3023]

Temporarily, you can customize the css

.apexcharts-legend{
    max-height: 50px !important;
}

[junedchhipa]

You also have an option to set the legend's height in the config

legend: {
  height: 100
}