chart not rendering to container

hello,

I have the problem that the chart is not rendered to its container. I tried some css but no success yet. Either the chart is to small like in the picture - or the chart covers the whole page… as soon as I resize the window it gets rendered correctly… reflow or redraw - no success. I could run a resize function after the content is inialiazied… but this just can’t be the solution… any ideas? somebody?

`.chart { display: block; border: 3px solid yellow;

}

.chart-wrapper { border: 3px solid orangered; width: 100% !important; }`

<div class="row" style="padding: 0.625rem;" id="testing"> <div class="chart-wrapper" id="chart-wrapper"> <div class="chart" [chart]="chart" id="chart-wrapper0" name="output" ></div> </div> </div>

[alekplay]

Sorry to dig up such an old issue, but I’m having the same/ similar issue. My container is dynamically sized to fit its parent, but even when specifying the width and height the chart defaults to its 400px height.

I’ve stripped my layout as bare as possible to try to remove any doubts as to what the issue may be. The following is what I have:

<div style="width: 641px; height: 273px;"> <div [chart]="chart"></div> </div>

Yet the chart is 641px by 400px. The container div is the correct size from inspecting it using Chrome.

I am not initializing this component at all before the data is present, I’ve tried wrapping the chart generation code in a window.setTimeout() block, using both ngOnInit() and ngAfterViewInit(). Nothing seems to work.

Using my original flex layout, the chart sizes correctly once I resize the window. However it does not do so on initial load. Any workaround, such as how to trigger the reflow event after a small delay is welcome. Although I’d prefer to have it work without any such hacks.

Sidenote: It might be worth mentioning that I’m using the candlestick chart of the StockChart module.

[alekplay]

One very hacky workaround I’ve found is to manually trigger a window resize event in ngAfterViewInit() using window.dispatchEvent(new Event('resize')); as this will resize the chart correctly. A problem with this solution is that the chart will flash with the wrong size before quickly being resized. To counter this, I’ve set a property ready to false which sets the opacity of the container div to 0 to begin with, and then update this ready property to true when I send the window resize event.

This produces the intended behavior, albeit very hacky. Would love to know of any other solutions that may look nicer.

I should also add that I switched my container to being of type flex as this causes the chart to size correctly on resize. Specifying the width/ height directly as in my previous example does not reflow the chart.