Anychart displaying only last edge

Question

I am using anychart with the below data but for me only the last edge is getting visible everytime. I dont get what is the issue.

All the edges should be visible

anychart.onDocumentReady(function ()
{
  // create data
  const data = {
    nodes: [
        { id: "[email protected]", x: 100, y: 100 },
        { id: "[email protected]", x: 100, y: 200 },
        { id: "[email protected]", x: 200, y: 100 },
        { id: "[email protected]", x: 200, y: 200 },
        { id: "[email protected]", x: 300, y: 100 }
    ],
    edges: [
        { id: '', from: '[email protected]', to: '[email protected]' },
        { id: '', from: '[email protected]', to: '[email protected]'},
        { id: '', from: '[email protected]', to: '[email protected]' },
        { id: '', from: '[email protected]', to: '[email protected]' }
    ]
  };

  // create a chart and set the data
  const chart = anychart.graph(data);
  
  // set chart layout
  chart.layout().type("fixed");

  // set chart title
  chart.title("Network Graph: Basic Sample");

  // set container id
  chart.container("container");

  // draw chart
  chart.draw();
});

All the edges should be visibible

Answer 1

Solution # 1

Set a unique identifier for each edge. In your example, all of them have an empty string as the identifier, so only the last one will take effect. This is why only one is displayed, as you used only one identifier.

Wrong

edges: [
  { id: '', from: '[email protected]', to: '[email protected]' },
  { id: '', from: '[email protected]', to: '[email protected]'},
  { id: '', from: '[email protected]', to: '[email protected]' },
  { id: '', from: '[email protected]', to: '[email protected]' }
]

Successfully

edges: [
  { id: 'edge1', from: '[email protected]', to: '[email protected]' },
  { id: 'edge2', from: '[email protected]', to: '[email protected]'},
  { id: 'edge3', from: '[email protected]', to: '[email protected]' },
  { id: 'edge4', from: '[email protected]', to: '[email protected]' }
]

Solution # 2

By the way, specifying an ID is not required. If you don't provide one, AnyChart automatically assigns different IDs to all edges by default.

Successfully

edges: [
  { from: '[email protected]', to: '[email protected]' },
  { from: '[email protected]', to: '[email protected]'},
  { from: '[email protected]', to: '[email protected]' },
  { from: '[email protected]', to: '[email protected]' }
]

Example

anychart.onDocumentReady(function () {
  const data = {
    nodes: [
      { id: "[email protected]", x: 100, y: 100 },
      { id: "[email protected]", x: 100, y: 200 },
      { id: "[email protected]", x: 200, y: 100 },
      { id: "[email protected]", x: 200, y: 200 },
      { id: "[email protected]", x: 300, y: 100 }
    ],
    edges: [
      { from: '[email protected]', to: '[email protected]' },
      { from: '[email protected]', to: '[email protected]' },
      { from: '[email protected]', to: '[email protected]' },
      { from: '[email protected]', to: '[email protected]' }
    ]
  };

  const chart = anychart.graph(data);
  chart.layout().type("fixed");
  chart.title("Network Graph: Basic Sample");
  chart.container("container");
  chart.draw();
});

<!-- Anychart Base -->
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-base.min.js"></script>
<!-- Anychart: extension for Graph --> 
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-graph.min.js"></script>

<!-- Container for example -->
<div id="container" style="width: 100%; height: 200px;"></div>