question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

chart not rendering to container

See original GitHub issue

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>

highchartsprob

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:2
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
alekplaycommented, Feb 27, 2018

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.

0reactions
alekplaycommented, Feb 27, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CanvasJs chart not rendering - javascript - Stack Overflow
My chart is not rendering. When I load ...
Read more >
chart not rendering - CanvasJS.com
The project that you have shared seems to be a node.js project, which would give such error when it's not run on a...
Read more >
Not rendering in docker container | Blazor Forums | Syncfusion
Hi, Im on version v18.4.41, Ive been using syncfusion for a long time now, Ive noticed that when you run a blazor server...
Read more >
Exploring Recharts: what can be rendered inside a Recharts ...
Can we create a new react component which returns a Recharts component and render it inside the top level chart container ? Sadly,...
Read more >
Chart - Not rendering with date set with 150 points or more
To overcome this scenario, I suggest you increase the widget height and width to resolve the issue. If this suggestion doesn't help, could...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found