VisJS Network is not centered

I am trying to create a vis js network. This is how the graph should look like

Here is the code as seen on the page source

<script type="text/javascript">

             var options = {
              width: '1000px',
              height: '600px',
              nodes: {
              font: {
                multi: true,
                bold: {
                  mod: '',
                  color: '#940A0A'
                    }
                 }
               }
              };

              // create an array with nodes
              var devNodes = new vis.DataSet(<array-of-nodes>);

              // create an array with edges
              var devEdges = new vis.DataSet(<array-of-edges>);
              var devData = {
                nodes: devNodes,
                edges: devEdges
              };

              // create a network
              var devContainer = document.getElementById('networkDiv');
              var devNetwork = new vis.Network(devContainer, devData, options);
              devNetwork.on( 'select', function(properties) {
                var ids = properties.nodes;
                console.log('clicked nodes:', ids[0]);
                });
        </script>

and here is the corresponding html

<div class="panel panel-primary" id="devPanel">
                    <div class="panel-heading" id="devHeading">DEV</div>
                    <div class="panel-body">
                        <div id="networkDiv"></div>
                    </div>
                </div>

Now, I have to include this graph as part of a table. However, now the network is not rendered in the center of the div

here is the javascript

<script type="text/javascript">

             var options = {
              width: '1000px',
              height: '600px',
              nodes: {
              font: {
                multi: true,
                bold: {
                  mod: '',
                  color: '#940A0A'
                    }
                 }
               }
              };

              // create an array with nodes
              var devNodes = new vis.DataSet(<array-of-nodes>);

              // create an array with edges
              var devEdges = new vis.DataSet(<array-of-edges>);
              var devData = {
                nodes: devNodes,
                edges: devEdges
              };

              // create a network
              var devContainer = document.getElementById('networkDiv');
              var devNetwork = new vis.Network(devContainer, devData, options);
              devNetwork.on( 'select', function(properties) {
                var ids = properties.nodes;
                console.log('clicked nodes:', ids[0]);
                });
        </script>

here is the corresponding html

<tr>
                <td> val1 </td>
                <td> val2 </td>
                <td>

                    <p class="bg-success">

                val3  </p></td>
                <td>
                    <a href="blah">val4</a>
                </td>
                <td>
                    <button data-toggle="collapse" class="btn btn-info" data-target="#networkPanel">val5 button</button>
                </td>

            </tr>
<tr>
                <td colspan="5">
                    <div class="panel panel-primary panel-collapse collapse" id="networkPanel">
                        <div class="panel-heading">val2</div>
                        <div class="panel-body">
                            <div id="networkDiv"></div>
                        </div>
                    </div>
                </td>
            </tr>

So, in the second case, why does the network get rendered in the top left corner? How can i ensure that the network is always rendered in the iddle of the div?

You can use this hack for show/hide network canvas and this will solve the positioning problem of the network. I don't know whether is this the post suitable way or not. But this will do the trick. For the show hide functionality we can use

.hide {
 position: absolute !important;
 top: -9999px !important;
 left: -9999px !important;
}

Source

class instead of using display:none;. You can use toggleClass method to toggle between hide class and remove collapse functionality. Working demo can be found here.