Ngx-charts: Chart Reflow Needed

[queejie]

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

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

Current behavior
The chart reflow option does not seem to be available.

Expected behavior
To be able to get a handle for the chart so that reflow may be called.

Reproduction of the problem
A frequent problem I have with Highcharts and Angular is that the first rendering does not use the full space available until/unless the browser is resized. The workaround for this is to do a reflow on the chart every half second or so for three seconds or so.

What is the motivation / use case for changing the behavior?
The problem is in Highcharts, but they also provide the solution via reflow. I don't believe it is accessible via ngx-charts.

Please tell us about your environment:
Problem occurs on Mac OS X (dev/ng serve and Apache) and Linux (Apache).

• ngx-charts version: x.x.x
  7.0.1

• Angular version: 2.x.x
  5.1.3

• Browser:
  [all]

• Language:
  [Typescript 2.4.2]

[marjan-georgiev]

ngx-charts has this built in. The chart recalculates its dimensions after the first render and redraws itself if they are different. Could you post an example where you have that problem?

[queejie]

I will try, but it might take some time. The charts are within tabs in this case, and not visible until clicked. But we had the same issue in another app without tabs, and with using Highcharts directly using 'declare let'.

[marjan-georgiev]

Every chart has an update method, which is called when a change is detected or the browser is resized. This method recalculates everything and redraws the chart.

You should be able to get a reference to the chart using ViewChild, and call update on the instance if you want it to redraw on demand.

[queejie]

Ah, great. Thank you!

[queejie]

Also, I was not using an explicit [view] attribute. When I do that, it works just fine, but isn't responsive.

[henriquezago]

I still think that this is relevant. I'm designing a page that is responsive and I need a responsive width and the [view] worked awfully, it messes up the width ignoring the parent if I leave it null.

My problem is that I have 6 charts on the page and initially only the 3 first ones are being shown, the rest is hidden with a display: none on their parents. When I change the display property, the charts have insane height and width, not following their parents reflow.

From what I understood, initially the charts parent divs, got no height nor width because they're not being rendered and when the browser reflow, rendering the container divs, the charts (child) are not being resized and not following the natural browser reflow.

I can't expect from the user to resize the window after he clicks on "show more charts".

[PanwalaVandan]

Hello,
I am facing a same type of issue where I have multiple charts in Two Tabs.
All the charts are made through a single JSON, and the Tabs as well.
Like in the JSON first the tabs are defined and for every tab the chart are difined,

Now when the first tab open all the charts of First tab render properly, but in the second Tab the chart do not fit properly into the div container. But when I zoom the browser or open console. they get proper.

@queejie @marjan-georgiev can you help me on how to solve this problem?

[kevin192291]

I am facing this issue as well, I used Angular Material's schematics to create a sidebar with the content being a dashboard (call created from schematics) When the sidebar opens, the ngx-chart gets pushed out of the card.