# The graph display on using Neovis.js can be more presentable

**URL:** <https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457>\
**Category:** Neo4j Visualization Library (NVL)\
**Tags:** browser, cypher, operations, neovis\
**Created:** [October 15, 2018, 7:28am UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457 "2018-10-15T07:28:09Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![sucheta](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/sucheta/32/4444_2.png) [@sucheta](https://community.neo4j.com/u/sucheta)\
**Post date:** [October 15, 2018, 7:28am UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/1 "2018-10-15T07:28:09Z")

</div>

Hi,

As we use the Neo4j desktop or browser version, we get a beautiful output . Like this -

 ![neovis-2](https://us1.discourse-cdn.com/flex021/uploads/neo4jcommunity/original/2X/c/c2d1fc5667b93007fc99f610ce0193089dfcd7b5.png)

But when i use the browser version , i get an output that is not presentable and neither does the node name appears inside the circle.

 ![neovis-1](https://us1.discourse-cdn.com/flex021/uploads/neo4jcommunity/original/2X/2/26abc7ad5026bfa8ed08c55ef9837240431a42b0.png)

Please help. I want the same output as presented in the Neo4j tool to be displayed in the browser.

---

<div class="post-metadata">

**Author:** ![lyonwj](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/lyonwj/32/27358_2.png) [@lyonwj](https://community.neo4j.com/u/lyonwj)\
**Post date:** [October 15, 2018, 12:52pm UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/2 "2018-10-15T12:52:03Z")

</div>

Could you clarify what you mean by "not presentable"? What are you expecting that is different from the results?

As for your comment about node name not appearing inside the circle - in neovis.js node captions are positioned below the node. As neovis will scale the size of the node relative to a property value we've found this caption positioning to be the most consistently readable.

---

<div class="post-metadata">

**Author:** ![sucheta](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/sucheta/32/4444_2.png) [@sucheta](https://community.neo4j.com/u/sucheta)\
**Post date:** [October 15, 2018, 12:58pm UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/3 "2018-10-15T12:58:33Z")

</div>

Oh ok. I was referring to the graphs as presented in Neo4j browser/desktop version look more beautiful and has good features as against the Neovis.js represented version.

I thought maybe there is someway to make it look better.

P.S : I apologize for writing it as 'not presentable' .

---

<div class="post-metadata">

**Author:** ![sucheta](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/sucheta/32/4444_2.png) [@sucheta](https://community.neo4j.com/u/sucheta)\
**Post date:** [October 15, 2018, 1:03pm UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/4 "2018-10-15T13:03:34Z")

</div>

Can you point out where in the Neovis.js file can we reduce the size of the relationship names ?

---

<div class="post-metadata">

**Author:** ![lyonwj](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/lyonwj/32/27358_2.png) [@lyonwj](https://community.neo4j.com/u/lyonwj)\
**Post date:** [October 15, 2018, 1:26pm UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/5 "2018-10-15T13:26:08Z")

</div>

No need to apologize - I was just trying to determine what styling aspects you thought were most important and could be improved 🙂

In the image you shared it seems like the readability of the captions could be improved by increasing the length of the relationships and spacing nodes further out. This can be accomplished by reducing the "springiness" of the the relationships for the physics simulation that determines layout and [can be configured in vis.js (the underlying visualization library used by neovis.js)](http://visjs.org/docs/network/). Unfortunately, we don't expose much of that configuration in neovis.js. There are a few [open issues](https://github.com/neo4j-contrib/neovis.js/issues/19) requesting this.

Neovis.js was originally conceived to have all styling optimized and specified by results of graph algorithms (like centralities, community detection, etc) and most generic graph visualization features are currently lacking or not exposed from vis.js. As more folks are using neovis.js for more generic graph visualization and not necessarily to visualize the results of graph algorithms we'll need to update neovis.js to support these use cases - which is something we want to do. In the mean time, you might have better luck using vis.js directly and then you'll have all of the styling / configuration available.

---

<div class="post-metadata">

**Author:** ![lyonwj](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/lyonwj/32/27358_2.png) [@lyonwj](https://community.neo4j.com/u/lyonwj)\
**Post date:** [October 15, 2018, 1:27pm UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/6 "2018-10-15T13:27:54Z")

</div>

Default styling is pulled in from here: [https://github.com/neo4j-contrib/neovis.js/blob/master/src/defaults.js](https://github.com/neo4j-contrib/neovis.js/blob/master/src/defaults.js)

You should be able to update styling in that `visjs` object to overwrite the defaults used by neovis.js.

---

<div class="post-metadata">

**Author:** ![sucheta](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/sucheta/32/4444_2.png) [@sucheta](https://community.neo4j.com/u/sucheta)\
**Post date:** [October 16, 2018, 5:50am UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/7 "2018-10-16T05:50:54Z")

</div>

Hi William,

I searched through a visjs network diagrams and they have the display as expected. Like i would like to keep an image for nodes instead of the circular figures. it is possible in visjs.

But here minor changes in neovis.js file in visjs JSON is not reflected. Like i changed and added a few more key-value pairs like repulsion, avoidOverlap,central Gravity, nodeDistance and changed the fontsize,damping,inherit,scalefactor,etc-

```
   visjs: {
        interaction: {
        click:true,
        hover: true,
        hoverConnectedEdges: true,
        selectConnectedEdges: false,
    // multiselect: true,
        multiselect: 'alwaysOn',
        zoomView: true,
        experimental: { }
       },
     physics: {
        barnesHut: {
            damping: 10.9,
            avoidOverlap: 1,
            centralGravity: 0.2
        },
        repulsion:{
          nodeDistance: 1000,
        },
      },
      nodes: {
        mass: 4,
        shape: 'neo',
        labelHighlightBold: false,
        widthConstraint: {
            maximum: 40
        },
        heightConstraint: {
            maximum: 40
        },
        image:'Tata-logo.png',
        size :90,
        font:{color:'#eeeeee', size: 30},
    },
    edges: {
        hoverWidth: 2,
        selectionWidth: 0,
        smooth: {
            type: 'continuous',
            roundness: 0.15
        },
        font: {
            size: 1,
            strokeWidth: 0,
            align: 'top'
        },
        color: {
            inherit: true
        },
        arrows: {
            to: {
                enabled: true,
                type: 'arrow',
                scaleFactor: 0
             }
           }
         }
     }

```

But nothing seems to reflect in the output.

 ![neovis-16oct](https://us1.discourse-cdn.com/flex021/uploads/neo4jcommunity/original/2X/4/4d58522697fc2b88f18e6d33f4374693f026a276.png)

Please help.  
It also gives errors in my angular counterpart but nevertheless it still compiles after giving errors like -

[1]

```
 ERROR in ./src/assets/neovis.js 31333:19
 Module parse failed: Unexpected token (31333:19)
 You may need an appropriate loader to handle this file type.
 | * to the next pending observer.
 | */
 > this.url = url;

```

[2]

```
  ERROR in ./src/assets/neovis.js 20783:26
 Module parse failed: Unexpected token (20783:26)
 You may need an appropriate loader to handle this file type.
 | encoding = encoding || state.defaultEncoding;
 | if (encoding !== state.encoding) {
 > chunk = bufferShim.f

```

Can you also suggest if i can integrate another outside vis.js file for a network diagram and integrate it with our neovis.js file. Because even if i put an external angular vis.js file , the database info remains in neovis.js.

Like here is the JSfiddle for a network diagram that we can integrate with our neovis.js -

> **[Network Demo using vis.js - JSFiddle - Code Playground](http://jsfiddle.net/e7uodse2/773/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Thank you for your time and consideration.

---

<div class="post-metadata">

**Author:** ![soumalyas](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/soumalyas/32/6715_2.png) [@soumalyas](https://community.neo4j.com/u/soumalyas)\
**Post date:** [April 9, 2020, 6:17am UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/9 "2020-04-09T06:17:03Z")

</div>

Hi,

I am using neovis.js and embedded the graph in my web page. However, the graph is of very small size as shown below -

![image](https://us1.discourse-cdn.com/flex021/uploads/neo4jcommunity/original/2X/b/b9d6f552ae31787ead97cfdfd60ae1888f94948d.png)

And below is my code in React web app.

 ![image](https://us1.discourse-cdn.com/flex021/uploads/neo4jcommunity/original/2X/8/8d5edab6897e1a04f3a6accfec520b236a82831e.png)

I am new to React and neovis and would like to control the height, width, color and other properties in my web app. Please help.

---

<div class="post-metadata">

**Author:** ![adam\_cowley](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/adam_cowley/32/145_2.png) [@adam\_cowley](https://community.neo4j.com/u/adam_cowley)\
**Post date:** [April 9, 2020, 10:27am UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/10 "2020-04-09T10:27:56Z")

</div>

Hey, welcome to the community. It looks like the size hasn't taken. Have you added any style to the #viz container?

---

<div class="post-metadata">

**Author:** ![soumalyas](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/soumalyas/32/6715_2.png) [@soumalyas](https://community.neo4j.com/u/soumalyas)\
**Post date:** [April 11, 2020, 4:58am UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/11 "2020-04-11T04:58:36Z")

</div>

> [@adam\_cowley](#):
>
> size hasn't taken. Have you added any style to the #viz

Hello Adam,  
Yes, I had added heigth and width for the div. Still it is not working. Please help.

---

<div class="post-metadata">

**Author:** ![adam\_cowley](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/adam_cowley/32/145_2.png) [@adam\_cowley](https://community.neo4j.com/u/adam_cowley)\
**Post date:** [April 11, 2020, 7:27am UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/12 "2020-04-11T07:27:34Z")

</div>

Do you have a repository that replicates your problem online? If not, if you can upload one I will take a look

---

<div class="post-metadata">

**Author:** ![soumalyas](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/soumalyas/32/6715_2.png) [@soumalyas](https://community.neo4j.com/u/soumalyas)\
**Post date:** [April 11, 2020, 11:07am UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/13 "2020-04-11T11:07:59Z")

</div>

Thanks Adam for your initiative. I have a repository ([https://github.com/soumalyas/neoviztest.git](https://github.com/soumalyas/neoviztest.git)) and presently using a neo4j sandbox which would expire shortly.

---

<div class="post-metadata">

**Author:** ![adam\_cowley](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/adam_cowley/32/145_2.png) [@adam\_cowley](https://community.neo4j.com/u/adam_cowley)\
**Post date:** [April 11, 2020, 1:17pm UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/14 "2020-04-11T13:17:58Z")

</div>

I've just cloned and set the height/width of the container in your index.css file and everything looks good:

```css
#viz {
  width: 900px;
  height: 1700px;
}

```

 ![image](https://us1.discourse-cdn.com/flex021/uploads/neo4jcommunity/original/2X/6/681fc4d6375a13297ff1bbdfb4c469a28ccdbd31.jpeg)

You could also change your render function to set the CSS dynamically using props:

```auto
  render(){
    const viz={
      width: '900px',
      height: '1700px',
      border: '1px solid lightgray',
      font: '22pt arial',
    }

    return (
      <div><h1>React Neovis Example</h1>
        <div id="viz" style={viz}>

        </div>
      </div>
    );
  }

```

(it looks like you weren't using the `viz` variable)

---

<div class="post-metadata">

**Author:** ![soumalyas](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/soumalyas/32/6715_2.png) [@soumalyas](https://community.neo4j.com/u/soumalyas)\
**Post date:** [April 12, 2020, 5:18am UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/15 "2020-04-12T05:18:38Z")

</div>

Many thanks Adam. Yes, I missed the variable.

---

<div class="post-metadata">

**Author:** ![depire](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/depire/32/5915_2.png) [@depire](https://community.neo4j.com/u/depire)\
**Post date:** [April 14, 2020, 2:49pm UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/16 "2020-04-14T14:49:12Z")

</div>

Hello everybody,  
Does anyone know how to set up the color of edges ?  
I would like to put color depending on properties of edges.

Thanks.  
Alexandre

---

<div class="post-metadata">

**Author:** ![abhishekjayant1](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/abhishekjayant1/32/4175_2.png) [@abhishekjayant1](https://community.neo4j.com/u/abhishekjayant1)\
**Post date:** [May 21, 2021, 9:14am UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/17 "2021-05-21T09:14:49Z")

</div>

Hi Alexandre,  
This video might help you [link](https://www.youtube.com/watch?v=0-1A7f8993M&t=960s)

---

<div class="post-metadata">

**Author:** ![jainendra.kumar.rai](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/jainendra.kumar.rai/32/21860_2.png) [@jainendra.kumar.rai](https://community.neo4j.com/u/jainendra.kumar.rai)\
**Post date:** [February 4, 2022, 3:08pm UTC](https://community.neo4j.com/t/the-graph-display-on-using-neovis-js-can-be-more-presentable/2457/18 "2022-02-04T15:08:49Z")

</div>

![image](https://us1.discourse-cdn.com/flex021/uploads/neo4jcommunity/original/3X/f/f/ff0a1491cd6daf1ec15433a8551052a717926503.jpeg)

I am using Neovis.JS library to showing it on browsers.  
It's not looking very clean with 1000 nodes but it's looking very clean in Neo4j desktop verson.  
Please suggest me better way to make it more clearable