Add a horizontal scrollbar to ngx-graph

I'm currently working with a large dataset that spans several years. I'm using ngx-graph to visualize it. The dataset is too wide to fit on a single page, so I'm looking for a way to add a horizontal scrollbar to ngx-graph. This will allow the user to view the entire dataset.

I have also tried setting a fixed width to the parent container, but it is not working with the zooming. I've also posted a question in the GitHub. Github issue

Can someone please assist me with this problem?

HTML code:

<div class="space-top-16 vc-form-container">
<ngx-graph
class="mss-graph-container"
[layout]="dagreLayout"
[curve]="curve"
[links]="links"
[nodes]="nodes"
[autoZoom]="true"
[autoCenter]="true">
<ng-template #nodeTemplate let-node>
<svg
height="80"
[attr.width]="node.data.children && node.data.children.length > 0 ? '112' : '72'"
[attr.max-width]="112">
<foreignObject
height="80"
[attr.width]="node.data.children && node.data.children.length > 0 ? '112' : '72'"
[attr.max-width]="112">
<div class="vc-mss-device-node-wrapper">
<div class="vc-mss-device-node" (click)="$event.preventDefault(); showWidget(node)">
<span
class="vc-mss-device-icon material-icons"
[style.border-color]="'#dadbdc'"
[style.color]="node.data.icon.color"
>{{ node.data.icon.label }}</span
>
<div
xmlns="http://www.w3.org/1999/xhtml"
class="vc-mss-device-node-text body-s-1"
[matTooltip]="node.label"
[matTooltipPosition]="'above'">
{{ node.label }} - {{ node.data.type }}
</div>
</div>

@if (node.data.children && node.data.children.length > 0) {
<div class="vc-mss-device-node">
<button
mat-icon-button
class="vc-mss-device-expand-icon"
(click)="$event.preventDefault();
node.data.type !== 'INTERNET' ? (selectedNode = node) : (selectedNode = null)">
<mat-icon>{{ node.data.expanded ? 'expand_more' : 'expand_less' }}</mat-icon>
</button>
<span>({{ node.data.children.length }})</span>
</div>
}
</div>
</foreignObject>
</svg>
</ng-template>
<ng-template #linkTemplate let-link>
<svg:g class="edge" xmlns:svg="http://www.w3.org/2000/svg">
<path class="edge line mss-device-overview-line" [attr.d]="link.line"></path>
</svg:g>
</ng-template>
</ngx-graph>
</div>


SCSS:

:host {
display: block;
height: 100%;
width: 100%;

.vc-mss-device-node-wrapper {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;

.vc-mss-device-node {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;

.vc-mss-device-icon {
display: flex;
justify-content: center;
align-items: center;
height: 36px;
width: 36px;
border: 1px solid;
border-radius: 50%;
}

.vc-mss-device-node-text {
width: 56px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}

.vc-mss-device-node {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
cursor: pointer;

button.vc-mss-device-expand-icon {
height: 24px !important;
width: 24px !important;
box-shadow: none !important;

.mat-icon {
height: 24px;
width: 24px;
line-height: 24px;
font-size: 24px;
}

&.mat-mdc-icon-button:not([disabled]) {
&:hover,
&:focus-visible {
border-radius: 4px !important;
background-color: var(--primary-50);
}

&:focus-visible {
outline: 1px solid var(--primary-600);
outline-offset: 1px;
}
}
}
}
}

.mss-graph-container {
display: block;
height: calc(100vh - 345px);
width: 100%;
}

.mss-device-overview-line {
stroke: var(--outline);
stroke-width: 1;
}

.vc-mss-device-legend {
display: flex;
flex-direction: column;
gap: 8px;
position: absolute;
top: 32px;
left: 16px;
width: 150px;
background-color: var(--ghost-white);

.vc-mss-device-legend-item {
display: inline-flex;
align-items: center;
gap: 8px;
}
}
}

Continue reading...