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

[simpros]

Same here...

Any updates on this?

[ADEPTYS]

Faced the same issue, any updates on this?

[mperlines]

Any news related to this topic? Having the same problem

[friedrichroell]

im at "version": "20.1.0" and im facing the same problem. Would be amazing and hugely appreciated if this got fixed! :)

[megla-cschroepfer]

I am facing the same problem and could not find any reliable solution. When will a fix be available?

[logitimate]

Same issue as well.

[Liero]

Due to lack of support I recommend to find another charting components

[JonathanJPereira]

Same problem here

[mikeelsom]

Adding this to a global style sheet solved the issue for me

.chart-legend {
  display: inline-block;
}

[Basmatayeh]

this workaround worked with me

• increase the bottom padding of the div wrapper.

[ketka82uk]

Adding this to global stylesheet is what fixed for me (couldn't get legend on right)

.ngx-charts-outer { display: flex }

[megla-cschroepfer]

I just came across this problem yet again. None of the suggested fixes seems to work in my case so far because I am using the chart for an Angular element which is used inside another application. Any updates or other workarounds?

[awdorrin]

This seems to be a result of the height and width being applied to both the outer div and svg without accounting for the height of the legend.

<div class="ngx-charts-outer" style=width; 600px; height: 400px;">
  <svg class="ngx-charts" width="600" height="400">...

I worked around this by adding bottom-padding to a wrapper div, but I think the style on the ngx-charts-outer should be removed and placed in the css, making the height auto.

[reubenturk-ga]

I can confirm @awdorrin 's findings.

Although we're talking a different root cause from the original post now, this current breakage seems to have happened at https://github.com/swimlane/ngx-charts/commit/91acd8d111af65af226f81805bdc30c2081bd3b9

[ali-alamine]

any updates on this?

[ali-alamine]

adding this to the global style sheet does the trick but seems to break the responsiveness : .chart-legend{ display: block !important; }