Resize bug on Resize

[MichaelLazarevic]

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
When I resize my window / tab in any way, the bars within the chart (Using Vertical Bar) grow in size. This prompts the entire chart to grow in size, and no matter how many times I do it this never stops leading to an insane size.

Expected behavior
They would retain the same size or shrink to fit the window. Tested with and without flex-shrink, yet this seems to have 0 effect.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:
Windows 10, https and Visual Studio Code.

• ngx-charts version: x.x.x
  Latest Version

• Angular version: 2.x.x
  Angular 5

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web
  Chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  Angular 5s

[marjan-georgiev]

This happens if the container around the charts has a padding. Is that the case?
If so, just add another div around the chart with 0 padding and width and height set to 100%.

[MichaelLazarevic]

No padding, eventually worked out that the ever increasing size was caused by a missing [View] tag, though I am having issues getting the chart to properly fit into a property, as it often overlaps the sides (No padding / border / margin, and adding them doesn't fix it)

[marjan-georgiev]

Can you create a stackblitz where this can be reproduced? If you set the view input, the chart no longer resizes to fit the container.

[MichaelLazarevic]

If I don't set the view input and initialise the chart without it, then put the chart inside a container () it will pro-actively increase the size of the bars (Vertical Bar Chart) causing growth for the entire chart, without limits unless maximums are not set.

At the moment, with a View in place, this does not occur but any resizes cause the chart itself to clip over the edges of a , and while it does increase the size of the card the chart itself always remains bigger.

[marjan-georgiev]

Try adding a height style to the chart's parent container. If the container does not have a height set, its height will default to 0, so the chart does not resize to fit in that case.

[MichaelLazarevic]

I did, I used height / weight and even applied min/max. It would stop growing bigger after hitting a max but would always overlap with the card.

[marjan-georgiev]

Not sure what else it could be. If you can create a stackblitz I could take a look.

[JoshSchoen]

@MichaelLazarevic just a though and not sure what your markup looks like but if you have a number of nested div or other containers it's possible you are overriding some style props unintentionally. I would test it with a simple implementation outside your current implementation if you haven't already using @marjan-georgiev directions and see if that works, then refactor accordingly to simplify your markup. I personally have seen a couple of hard to debug issues like this using flexbox and it was due to nesting and style overrides.

[MichaelLazarevic]

Literally just have 1 graph in a single as I'm only testing how it works.

[marjan-georgiev]

Closing this for the time being. If you are able to reproduce and provide us with an example in stackblitz I would be happy to reopen.

[sarora2073]

fyi - experienced an issue where the chart keeps resizing (when there's a data change that would cause the chart to have to redraw). I was putting the chart in a mat-card element which I guess grows dynamically as well, but putting the chart in a div allowed it work responsively with flexbox without growing unexpectedly on each data change.

[rotobash]

Hi, I'm also experiencing this issue as well. I have made a minimal stackblitz that reproduces the issue. If you keep toggling the minimize/maximize button on the browser (on Chrome at least) the graph continues to grow, it doesn't seem to happen in the editor window though. Hope this helps!

Link to app
Link to editor

[evgenious]

Experienced the same issue in our implementation, might be some miscalculation on window resize, couldn't identify the bug so far.

[beckyarauz]

this is still an issue, whenever I resize the window the bar graph just keeps growing!, and if I set a max-height in the graph, the legends below overflow the container of the graph.

[Crocsx]

@marjan-georgiev
I am using bootstrap and maybe I set up incorrectly, but I have the problem too. I made an example here :

Just play with the resize or the console, and it will grow.

https://stackblitz.com/edit/swimlane-stacked-horizontal-bar-chart-ax7bpg

[archit324]

There is some issue with the library as height is getting dynamically calculated but it is getting increased always whenever the size of the window is changed.

[RuneHanssens]

Removing padding from the parent container fixed the issue for me.

[jjamaral]

+1

[antal-huck]

@marjan-georgiev I am using bootstrap and maybe I set up incorrectly, but I have the problem too. I made an example here :

Just play with the resize or the console, and it will grow.

https://stackblitz.com/edit/swimlane-stacked-horizontal-bar-chart-ax7bpg

Even when removing in above stackblizz demo the wrapper, the container, and the card stuff and placing the ngx-chart solely inside a div with padding 0, the bug persists.

This issue should be re-opened.

[annndrey]

Putting the chart inside a wrapper div container and setting it's max-height & min-height solves the issue.

Example:

          <div class="chart-wrapper">
            <ngx-charts-pie-chart
              [scheme]="colorScheme"
              [results]="gender_data"
              [gradient]="gradient"
              [legend]="showLegend"
              [animations]="animations"
              [labels]="showLabels"
              [doughnut]="isDoughnut"
              [arcWidth]="arcWidth"
              (select)="onSelect($event)"
              (activate)="onActivate($event)"
              (deactivate)="onDeactivate($event)"
              >
            </ngx-charts-pie-chart>
            </div>
        </mat-card-content>

and in css:

.chart-wrapper {
    max-height: 40vh;
    min-height: 40vh;
}