AnyChart JS: Network Graph Nodes Overlapped

Question

Here I load the JSON file and plot them as network graph to visualize relationship between entity. The data has around 60 relationships and I plotted successfully with JavaScript code as follows:

fetch('data.json')
        .then((response) => response.json())
        .then((jsonData) => {
          const dataSample = JSON.parse(jsonData);
          const nodes = dataSample.relation.map((relation) => ({
            id: relation.target_relation,
            relation_type: relation.relation_type,
          }));

          nodes.push({
            id: dataSample.party_source,
            relation_type: '-',
          });

          const edges = dataSample.relation.map((relation) => ({
            from: dataSample.party_source,
            to: relation.target_relation,
            relation_type: relation.relation_type,
          }));

          // graph data
          const data = {
            nodes,
            edges,
          };

          const chart = anychart.graph(data);

          // node configuration
          const configNodes = chart.nodes();
          configNodes.normal().height(20);
          configNodes.hovered().height(25);

          configNodes.tooltip().useHtml(true);
          configNodes.tooltip().format(`Party ID: {%id}`);

          // edge configuration
          const configEdges = chart.edges();
          configEdges.labels().enabled(true);
          configEdges.labels().format('{%relation_type}');
          configEdges.labels().fontSize(12);
          configEdges.labels().fontColor('black');
          configEdges.labels().fontWeight(500);

          configEdges.tooltip().useHtml(true);
          configEdges
            .tooltip()
            .format(`Party Source: {%from}<br>Party Target: {%to}`);
          configEdges.arrows({
            enabled: true,
            size: 8,
          });

          configEdges.stroke({
            color: '#7998FF',
            thickness: '1.5',
          });

          chart.listen('mouseOver', function (e) {
            // change the cursor style
            document.body.style.cursor = 'pointer';
          });

          chart.listen('mouseOut', function (e) {
            // set the default cursor style
            document.body.style.cursor = 'auto';
          });

          // chart behaviour
          chart.container('container');

          chart.draw();
        });

Unfortunately, I got each node on the network graph overlapped or not properly separated between nodes like picture below:

How to add spacing between nodes in order to avoid the overlapping, I have been searching on the documentation for the network graph, but not found any API function to perform that. Is it supposed to be a small sized data to produce a proper network graph?

Answer 1

Looking at their examples in this playground they are using this to influence the layout. Have you tried playing around with the iterationcount?

     // set chart layout settings
     chart.layout({ iterationCount: 0 });

Source https://playground.anychart.com/gallery/src/Network_Graph/Radial_Graph