Echarts- how to show horizontal scroll bar with 3 lines of legend, and after that scroll if items doesn't fit in 3 lines

See more:

Javascript

Typescript

Angular6

I am using ECharts to show the trend data in line chart. I have 50 series to show in the line chart. Every series has a legend to show. I want to show the legends on top of the chart. But, I want to show the legends in maximum 3 lines. And if legends doesn't fit in the 3 lines then I want to show the vertical scroll. But, I am not able to show the vertical scroll with maximum of 3 lines of legends. Every line should show more than one legend in it.

option = {

    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}'
    },
    legend: [{
        left: 'left',width:'50%',
        type:'scroll',
        orient:'vertical',
        height:'100',
        selectedMode:'multiple',
        //pageButtonPosition:'end',
        //formatter:'legend {name} ',
        data: ['saaaaaaaaaaaaaaa0', 'saaaaaaaaaaaaaaa1','saaaaaaaaaaaaaaa2','saaaaaaaaaaaaaaa3'
        ,'saaaaaaaaaaaaaaa4','saaaaaaaaaaaaaaa8'
        , 'saaaaaaaaaaaaaaa9','saaaaaaaaaa10','saaaaaaaaaa13','saaaaaaaaaa14','saaaaaaaaaa11'
        , 'saaaaaaaaaa12','saaaaaaaaaa15','saaaaaaaaaa16'
        ,'saaaaaaaaaa17'],

    },
    {
        left: 'right',width:'50%',height:'auto',
        data: ['saaaaaaaaaaaaaaa5','saaaaaaaaaaaaaaa6','saaaaaaaaaaaaaaa7'],

    }
    ],
    xAxis: {
        type: 'category',
        name: 'x',
        splitLine: {show: false},
        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
    },
    grid: {
       height:'auto'

    },
    yAxis: {
        type: 'log',
        name: 'y'
    },
    series: [
        {
            name: 'saaaaaaaaaaaaaaa0',
            type: 'line',
            data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
        },
        {
            name: 'saaaaaaaaaaaaaaa1',
            type: 'line',
            data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
        },
        {
            name: 'saaaaaaaaaaaaaaa2',
            type: 'line',
            data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
        },
          {
            name: 'saaaaaaaaaaaaaaa3',
            type: 'line',
            data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
        },
        {
            name: 'saaaaaaaaaaaaaaa4',
            type: 'line',
            data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
        },
        {
            name: 'saaaaaaaaaaaaaaa5',
            type: 'line',
            data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
        },
          {
            name: 'saaaaaaaaaaaaaaa6',
            type: 'line',
            data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
        },
        {
            name: 'saaaaaaaaaaaaaaa7',
            type: 'line',
            data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
        },
              {
            name: 'saaaaaaaaaaaaaaa8',
            type: 'line',
            data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
        },
        {
            name: 'saaaaaaaaaaaaaaa9',
            type: 'line',
            data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
        },
        {
            name: 'saaaaaaaaaa10',
            type: 'line',
            data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
        },
          {
            name: 'saaaaaaaaaa11',
            type: 'line',
            data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
        },
        {
            name: 'saaaaaaaaaa12',
            type: 'line',
            data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
        },
        {
            name: 'saaaaaaaaaa13',
            type: 'line',
            data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
        },
          {
            name: 'saaaaaaaaaa14',
            type: 'line',
            data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
        },
        {
            name: 'saaaaaaaaaa15',
            type: 'line',
            data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
        }
    ]
};

What I have tried:

Quote:

I tried with vertical and horizontal scroll. In vertical scroll, it shows only one legend in one line. this is the problem. Actually, ECharts should show the what ever possible legends in one line. If there is enough space to have 2 legends in one line, it should show 2 legends in one line. It should show 3 lines and if all legends doesn't fit in three lines, then should add vertical scroll. But, currently legends overlap to chart.