Responsive Charts slightly bigger than container

[72gm]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
the svg element is marginally bigger than its parent container in responsive mode if parent container has padding

Expected behavior
the svg element would fit the parent container in responsive mode and take account of the padding

Reproduction of the problem
Use any container that has padding e.g. BS4 card
<div class="card"> <div class="card-header"> State Of The Parties </div> <div class="card-block" style="width:100%; min-height: 300px;"> <ngx-charts-bar-horizontal [scheme]="colorScheme" [results]="partyTotals" [yAxis]="true" [xAxis]="true" [legend]="false" [showGridLines]="false" [showXAxisLabel]="true" [showYAxisLabel]="true" [yAxisLabel]="Parties" [xAxisTickFormatting]="xBarFormat" (select)="onSelect($event)"> </ngx-charts-bar-horizontal> </div> </div>

What is the motivation / use case for changing the behavior?
Chart hangs outside its container

Windows 10

• ngx-charts version: 4.1.2
• Angular version: 2.4.7

[leon]

I'm having the same problem...

[leon]

I found the problem, I think

https://github.com/swimlane/ngx-charts/blob/master/src/common/base-chart.component.ts#L90

The code above tries to get the dimensions from the parent node of the component.
But since we don't have control over the parent node it may have paddings.

If I wrap the bar chart in a div with no paddings the error disappears.

Or if I change the code above to simply get the dimensions from the hostElem then it works.

const dims = hostElem.getBoundingClientRect();

But it might introduce other problems?

[marjan-georgiev]

Yes, the chart measures the dimensions of the parent container and sets its size to match them. If there is padding, it will be out of position.

@leon proposed a good solution for now - wrapping the chart in a div without padding.

I will investigate whether getting the dimensions from hostElem breaks anything, but for now please use what @leon suggested.

Thanks for reporting.

[leon]

What might happen if we get the size of the component from itself is that the component could grow with one render, then it measures itself and grows a bit more, and before you know it the chart has outgrown the whole universe ;)

This could be remedied by setting max-width: 100% on the component.

[sughodke]

@marjan-georgiev just wondering if there was any update on this.

I will investigate whether getting the dimensions from hostElem breaks anything, but for now please use what @leon suggested.

I was bit by this issue just now, the hostElem solution works on v6.1.0.
https://github.com/swimlane/ngx-charts/blob/master/src/common/base-chart.component.ts#L97

[gpit2286]

It also seems that when the charts are drawn within a fxFlex box, they are drawn before the flex box width is computed.

Onload:

After moving the window a little to get the observeables to fire:

Is there a way to get this polling to happen programmatically?

[tobihagemann]

Does the workaround still work? I didn't have any luck with "wrapping the chart in a div without padding". It seems like that the width of the chart ignores the parent element. Edit: It works for the height though.

<div class="card">
  <div class="card-body"><!-- this has padding -->
    <div><!-- this is the workaround I tried -->
      <ngx-charts-area-chart ...></ngx-charts-area-chart>
    </div>
  </div>
</div>

Using Bootstrap 4.0.0 and ngx-charts 7.0.1.

[jefficl]

tobihagermann I had no luck with the wrap either.

[Hypercubed]

Please reopen if this is still an issue.

[kwes01]

some one found a solution for this???

[dave-null]

This is still an issue for me, especially what @gpit2286 wrote. My version is
Angular CLI: 7.3.8
ngx-charts: 10.1.0

[gpit2286]

Just as an FYI. I have moved on from the ngx charts and moved to ng2-charts but it has the same issue with flex boxes. The way I fixed it was by doing this.

• On the div containing the chart, adding an *ngIf directive to hide the div on load.
• On ngInit I do my call to the API to get the data. After the data is accessed, I set the display variable to true.

What this does is delay's the rendering of the flex div until after there is content to display in it as the ngIf directive actually removes the HTML from the page. I don't really have time to make a stackblitz from this right now, but hopefully this helps everyone on thread.

[sebastiangug]

@gpit2286 sadly this doesn't work for me, I tried to set that variable to true OnInit, afterviewInit, aftercontentchecked, no luck, the containers still overlap. Any chance I could see some of your code?

@marjan-georgiev how can I use @leon 's solution? it seems to be inside the component itself, should I clone the repo and just use my parallel version of ngx-charts or is there a better way?

Thanks.

[gpit2286]

@sebastiangug https://stackblitz.com/edit/ngx-chart-in-flex

[willtheoct]

@Hypercubed still an issue

[marjan-georgiev]

@willtheoct please post a stackblitz so we can look into it.

To everyone, the immediate parent container must have its width and height set, and not have any padding, and the chart needs to be the only element inside of it.

i.e. if you remove the chart from the parent container, and inspect the element, it should not have a height 0, because that's what the chart will use for its dimension.

[willtheoct]

To everyone, the immediate parent container must have its width and height set, and not have any padding, and the chart needs to be the only element inside of it.

That's the problem. If you set width/height, you're not using flex. While it is a workaround, it limits the quality of the software produced.

[marjan-georgiev]

@willtheoct you can still use flex. We do in our product and it works fine. It just means you will need another container between your flex div and the chart.
Example:

<div with flex style="position: relative;">
  <div chart parent style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
    <chart></chart>
  </div>
</div>

The chart will fit to whatever the width/height of the flex div is before the chart is inserted. The flex div will not resize based on the chart though, so that's why I am saying it would need to have a size in its empty state.

If you still have issues, I would be happy to look at a stackblitz if you provide one.

[willtheoct]

I found out why this is so hard to reproduce: you need to put a flex container within a container that has set dimensions.
In this stackblitz, I update the chart values repeatedly to show the chart growing rapidly in a flex box.
https://stackblitz.com/edit/ngx-chart-in-flex-ybcx5i

[marjan-georgiev]

I found out why this is so hard to reproduce: you need to put a flex container within a container that has set dimensions.
In this stackblitz, I update the chart values repeatedly to show the chart growing rapidly in a flex box.
https://stackblitz.com/edit/ngx-chart-in-flex-ybcx5i

The issue in this particular example is the input in the same container as the chart. Here's what's happening:

• The chart measures the dimensions of the parent container, which let's say is 500px high; and draws itself to be 500px high.
• The parent container now contains a 500px high chart, and an input which is 20px high, so 520px in total
• Next update, the chart measures the dimensions of the parent container (520px), and draws itself to be 520px
• The parent container now updates itself to 540px (520 chart + 20 input)
• Rinse and repeat.

[marjan-georgiev]

Here's an updated stackblitz: https://stackblitz.com/edit/ngx-chart-in-flex-xmruvj?file=src/app/app.component.html

[willtheoct]

I see, that fixes it. It might be worth it to make the chart measure it's own container, then, instead of the parent - this seems to be causing the flex-related issues.

edit: something is still off. If you refresh your example with the stackblitz console open, you can retract the console to increase the size of the blue area. when expanding it back, the blue area does not return to its original size, and the chart cannot shrink.