VisNetwork.Blazor

Blazor component for vis.js/vis-network.

Demo

You may see a working example here

Get Started

Install the NuGet package: VisNetwork.Blazor

Install using the Package Manager in your IDE or using the command line:

dotnet add package VisNetwork.Blazor

• Add the following using directives to your root _Imports.razor file, or any other .razor file where you want to use vis-network.

@using VisNetwork.Blazor

• Add the following to the relevant sections of Program.cs.

using VisNetwork.Blazor;

builder.Services.AddVisNetwork();

vis-network

• Add a Network component in your .razor file and configure it as you need. See Sample-app for example usage.

<Network Id="my-id" Data="@data" />

Providing custom options

To provide custom options the Options parameter can be used.

<Network Id="my-id" Data="@data" Options="NetworkOptions" />

private NetworkOptions NetworkOptions(Network network)
{
    return new NetworkOptions
    {
        AutoResize = true,
        Nodes = new NodeOption
        {
            BorderWidth = 1
        }
    };
}

Options can also be applied to the Network using the SetOptions API method.