Incubator-echarts: Positioning vertical legends dynamically left/right to a chart

[sorenhoyer]

The problem:

As you can see in the image I've found no good way to position a vertical legend without hardcoding the width of the grid: { right: 200 }. This is not working well with very long and very short legends.

Expected behavior:

When you write legend: { orient: vertical, right: 10px } the legends really should not overlay the chart - it should automatically place itself beside it, with a default margin/padding. You should not have to defined a hardcoded pixel width for the grid to place the vertical legends beside it. Instead the legend section should dynamically adjust to the longest of the legends + padding.

Should work like this: https://www.highcharts.com/demo/line-basic

[luissmg]

You will have the same problem if you have horizontal legend. I always use horizontal legend and with scroll type. This way the legend will not overlay the chart BUT you will not have all the legend options available at once.

Code:

legend: {
    type: 'scroll',
    orient: 'horizontal'
}

As you can see in the image, you will always have the same height for the legend and, at least form me, is easier to manipulate. Despite this, I think you are right. This is just the way I use the legend in order to avoid your problem.

[pathtolearn]

You will have the same problem if you have horizontal legend. I always use horizontal legend and with scroll type. This way the legend will not overlay the chart BUT you will not have all the legend options available at once.

Code:

legend: {
    type: 'scroll',
    orient: 'horizontal'
}

As you can see in the image, you will always have the same height for the legend and, at least form me, is easier to manipulate. Despite this, I think you are right. This is just the way I use the legend in order to avoid your problem.

Thanks, now my graph looks much better.