Ngx-charts: Legend outside parent

[Liero]

If I place linechart inside parent with fixed height and set legendPosition="below", the legend is acually outside the parent:

To Reproduce

<div style="position: relative; height: 500px; background: lightsalmon">
  <ngx-charts-line-chart [results]="data" [legend]="true" [xAxis]="true"
     [yAxis]="true" legendPosition="below">
   </ngx-charts-line-chart>
</div>

Screenshots

Expected behavior
Legend should be inside parent, otherwise it does not make any sense.

ngx-charts version

"@swimlane/ngx-charts": "^12.0.1",
"@angular/core": "~7.2.0",

[Liero]

Is there any workaround?

[Lyelt]

I'm experiencing the same behavior. It seems rather undesirable to have to manually add padding to the container if I don't want the legend overlapping the content below the chart.

Not to mention that adding padding seems to break the responsiveness of the chart altogether (not surprising - I've seen that issue mentioned elsewhere).

[gary-holland]

I'm having similar problems with the chart infinitely resizing when legend is set "below". Here is a stackblitz for reference:

https://ngx-chart-in-flex-c6sutq.stackblitz.io

[beckyarauz]

I have the exact issue

[manolait]

+1

[vishnu-dev]

Please do something about this.

[marco-martins]

I have the same problem. But it's curious because seems to work properly in the page example.
https://swimlane.github.io/ngx-charts/#/ngx-charts/line-chart

[ezekiel747]

is there any update on this? would be very useful to have it working.
Thanks!

[AJAnderhub]

I am also having the same problem. Is there a workaround at least?

[danverde]

I'm running into this issue as well

[jarias0811]

Same issue here, is incredible something like this is happening

[ChelloApps]

Same problem here, I'm defining chart sizes in a configuration utility and this bug is then causing positioning to be incorrect for charts where the Legend is configured for 'below' display!

[manolait]

I have the exact issue

[CodeCakePie]

Same here...

Any updates on this?