Ngx-charts: Is Chart using available space properly in responsive mode

[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
Charts in responsive mode (no view set) not using up available parent space (Marjan asked to raise from gitter)

Expected behavior
Charts would use up more of the available space

Reproduction of the problem

State Of The Parties

[doughnut]="false" [gradient]="gradient" (select)="onSelect($event)">

What is the motivation / use case for changing the behavior?
Charts would be better responsive if they used the space available better on smaller viewports

Windows 10

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

[StanFisher]

@marjan-georgiev Since this bug is a high priority, is there a known workaround? If not, is there a timeframe for when this issue is targeted to be fixed? Thanks!

[marjan-georgiev]

This should be fixed in the latest release. We probably missed closing this issue as there was a duplicate one. Please let me know if you still see it.

[StanFisher]

@marjan-georgiev Thank you for the quick response. I'm still seeing the issue. It looks like the drawing of the pie graph always takes into account the space the labels would take up, even if they aren't shown. You can see the large amount of padding that is included when I make the size of the view port 175 x 175. I'm seeing the same thing when I select _Fit Container_.

[StanFisher]

@marjan-georgiev I see the problem. If you take a look at PieChartComponent starting at line 87, you will see that when deselecting Show Labels, margins still contains [30, 80, 30, 80]. The update needs to reset the margins to the intended default of [20, 20, 20, 20].

This brings up another question though. Why are the margins being set at all? I would think that when I want to fit to the container, there should be no margins. Do you agree?

Also, since the margin is hard-coded to 20 pixels all around and the calculations for the height and width are made using the margins, you will see the effective margins get bigger as the size gets smaller. This is another reason why I think the margins should be removed. Instead, the spacing inside a container should be handled by CSS.

[PiiSmith]

Exactly the problems mentioned by StanFisher above, are addressed by this pull request https://github.com/swimlane/ngx-charts/pull/759 , which makes this hard coded "border" of 20, 20, 20, 20 or 30, 80, 30, 80 optional.

[furevor]

Hello! Still no one solution for now from developers? It looks like this workaround has broken, because of hardcoded margins inside 'update()' method. Looks like there is only one solution - reimplement chart with zero margins?

P.S. I need a workaround for BarVerticalComponent

[PiiSmith]

Well my pull request and the solution I proposed was ignored, so we moved one and used something different to display a pie-chart in a very limited space. The pull request is now older than a year.

[furevor]

Well my pull request and the solution I proposed was ignored, so we moved one and used something different to display a pie-chart in a very limited space. The pull request is now older than a year.

Thanks for replay, is there any possibility to look at your PR? It seems that workaround shouldn't be complex, I have copy/pasted code from BarVerticalComponent and changed margins to zero..

[marjan-georgiev]

Hi all, just merged the PR, will be in the next release. Would need to add the margins input to all charts before we release, so they are all consistent. If anyone is interested in working on that, please let me know.

Thanks!

[furevor]

Hi all, just merged the PR, will be in the next release. Would need to add the margins input to all charts before we release, so they are all consistent. If anyone is interested in working on that, please let me know.

Thanks!

Hello! Sounds great! Sorry, have no idea how to contact you, but I have noticed one important thing in PieGridComponent. There is no ability for hiding label and also there is hardcoded padding and baseline in getSeries(), const baselineLabelHeight = 20;, const padding = 10;.
I have added a new input parameter 'showLabel' and wrapped svg text label with it, using , but I am not sure I am ready for PR now, maybe I can try to do that after your next release with customizable margins, or you know better way how to customize also 'hide/show' label functionality with correct padding of PieGridComponent.
Thank you very much!

[marjan-georgiev]

@furevor could you check whether this PR solve all of that for you, please? https://github.com/swimlane/ngx-charts/pull/1000

[furevor]

@furevor could you check whether this PR solve all of that for you, please? #1000

I have added some comments to this PR, this all are important changes which I also have implemented in my copy component previously, but not exactly all I was talking about. I need to hide this'Total' label, but when I just hide or delete it, I am getting extra margins like this

And for now I don't know how to fix it properly