Proper visualization in Neo4j browser but improper using Neovis


(Sucheta) #1


I am facing an issue while using Neovis.js . I get improper visualization in my front-end which uses Neovis.js code. And when i run the same query in Neo4j Desktop version/browser , i get proper visualization.
I believe the issue is that the names and not the relationships need to be displayed.
Is there a cypher query for displaying the node names and not the relationship names.

Actual Proper Visualization in Neo4j Browser

Improper Visualization using Neovis.js


 var cypherQuery = "MATCH (n) OPTIONAL MATCH (n)-[r]-(m) RETURN n,r,m";

         var config = {
             container_id: "viz",
             server_url: "bolt://localhost:11001/",
             server_user: "neo4j",
             server_password: "llib1",
             labels: {
                 "Banking": {
                     "caption": "name",
                     "size": "pagerank",
                     "community": "community"
             relationships: {
                 "cc": {
                     "thickness": "weight",
                     "caption": false
           initial_cypher:cypherQuery ,        
            arrows: true,
         this.viz = new NeoVis.default(config);  

When my cypher query is this ->

 var cypherQuery = "MATCH (n)--(m) RETURN n,m;"


  var cypherQuery = "MATCH (n) RETURN n;"

in Neovis.js code, i get only the nodes and not the relationships unlike in Neo4j browser

Please help resolve.

(William Lyon) #2

Hi Sucheta - could you please clarify what you mean by improper visualization? It sounds like you want to change the captions for the nodes and/or relationships? Could you please give an example of what you'd like the Neovis visualization to include?

Regarding only displaying nodes, Neovis will only show the nodes, relationships, and paths explicitly returned in the Cypher query. So if you run

MATCH (n)-->(m) RETURN n,m

only nodes will shown as the query is only returning nodes (n and m). If you'd like to include relationships in the visualization you'll need to explicitly return relationships (or paths):

MATCH (n)-[r]->(m) RETURN n,r,m

(Sucheta) #3

Hi William,

I will let you have a closer look. Please check the images -

Neo4j Browser Picture -


Here i have all the nodes with proper relationship names as well as proper node names.

Image using Neovis.js in front-end


Here the relationship names are proper . But the node names as the same as relationship names, which is improper.

The issue is , i ran a code from NodeJS and uploaded the database in Neo4j application . So the visualization in Neo4j browser of that uploaded database is the same. But that using the Neovis.js is improper, as seen in the images above.

Please help to resolve this distinction. Because eventually i shall be displaying using Neovis.js

(William Lyon) #4

So the node caption is not what you want. To change node caption you'll just need to add an entry in the labels object in the config to specify the property value that should be used for the caption for each node label. If no configuration is specified then the node label is used.

So you would add something like:

 labels: {
             "Banking": {
                 "caption": "name",
                 "size": "pagerank",
                 "community": "community"
             "Parameter": {
               "caption": "name"