[XY-plot] y axis label collides with y-axis

[diehbria]

with y axis with large values, the label can collide with the y-axis

Acceptance criteria

Beta Give feedback

1. Update y-axis label to always be rendered to the left of the y-axis

[gmuralidharreddy]

@nadeswal @diehbria for the quick fix, if I increase a bit more(30 to 40) nameGap option to the eCharts axisLabel then it looks like the below screenshots, but if we have a 6digit yAxis values then again we can see the issue.
To fix this issue maybe we need to provide a dynamic left-side spacing based on the yMin yMax values. Let me know if the below solution not looks good then we can start workaround on the dynamic spacing.

Right Legend:

Left Legend:

[diehbria]

@gmuralidharreddy it must be dynamic, is there a way to actually just place it to the left of the echarts canvas, rather than having to dynamically account for the size of the y-axis text? cannot solve this by just making an excessively large padding by default (charts should be compact as well where possible)

[gmuralidharreddy]

@diehbria There is an open issue(#9265) and In-review CR(19534) in the echarts. So this issue may be fixed once their CR gets merged. I linked the echarts open issue link in code under TODO comments. And also there is no way from echarts to put ylabel at the left of the canvas. If we provide a dynamic gap then yLabel will be completely undergoing to the left border and affecting the chart and legend width calculations.