My GraphComponent Does Not Show the Graph

If you're not sure how to correctly include the GraphComponent in your application, please check out Creating the Web Application in the developers' guide.

Possible issues

Most likely, you are facing a CSS issue. This can have multiple causes.

Is yfiles.css loaded?

Prior to yFiles for HTML 2.4 the CSS file yfiles.css was needed for yFiles to function properly. If using an earlier version make sure that you loaded it correctly.

Does the component have a valid size?

You need to set the size of the div element the GraphComponent lives in, e.g. like this:

<style>
#graphComponent {
  width: 100%;
  height: 100%;
}
</style>

or more explicitly like so

<style>
#graphComponent {
  width: 256px;
  height: 256px;
}
</style>

Of course a local declaration will work, too:

<div id="graphComponent" style="width:256px; height:256px"></div>

Open the JavaScript debugger (F12) and select the "Elements" tab. Use the "Select Element" tool or navigate through the DOM view to find the GraphComponent. The div element that represents the root of the GraphComponent's DOM subtree should have a reasonable, non-zero width and height. If not, check if the CSS rules that set the div size are applied.

Did you remove the component from the DOM and re-insert it later?

In this case, the problem most likely is that the resize mechanism is switched off. When the component is removed from the DOM, the property sizeChangedDetection is automatically set to SizeChangedDetectionMode.NONE for performance resons. Set it to AUTO, SENSOR or TIMER again to re-enable resize detection. If you don't know which value to use either use AUTO which is the default, or add code that remembers the old value before the element is removed from the DOM.