Stretch the graph over the width of the page

Is your feature request related to a problem? Please describe. When displaying a tall graph using the dagre layout with many nodes and few steps, the labels on the links between nodes overlap and labels on them become unreadable.

Describe the solution you’d like The ability to stretch the graph over the width of the page.

Describe alternatives you’ve considered I could use Orientation.TOP_TO_BOTTOM but this would make the link labels difficult to read as the are mostly vertical. It would also not fit on the page well because the labels in the nodes are quite long. Maybe there are some things I missed, do you have any tips to make this readable?

Additional context Current issue:

Alternative solution:

[marjan-georgiev]

Interesting. When removing the view attribute, the graph is actually not resized in regards to the parent container. Is his expected? As the documentation says that this should be the case.

The parent element of the component needs to have a width and height set on it, so the graph component can fill it.

See how the ‘.page’ div on this demo does it:

.page {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

https://stackblitz.com/edit/ngx-graph-demo?file=src%2Fapp%2Fapp.component.scss

[Ionaru]

I played with the settings in an attempt to get something readable and eventually settled on this:

export class IndustryGraphLayout extends DagreLayout {
    settings: DagreSettings = {
        orientation: Orientation.TOP_TO_BOTTOM,
        ranker: 'network-simplex',
        rankPadding: 300,
    };
}