How to create a directional network graph with html and javascript?

Question

What it should look like:

When I hover above the connection some information saved inside the connection should be displayed. This is how far I got with my limited expirience and scripts from anychart:

anychart.onDocumentReady(function () {

    // create data
    var data = {
      nodes: [
        {id: "A"},
        {id: "B"},
        {id: "C"}
      ],
      edges: [
        {from: "A", to: "B", info: ["foo_one", "foo_two"]},
        {from: "B", to: "A", info: "foo_three"},
        {from: "C",   to: "A", info: "foo_four"}
      ]
    };

    // create a chart and set the data
    var chart = anychart.graph(data);

    // prevent zooming the chart with the mouse wheel
    chart.interactivity().zoomOnMouseWheel(true);
    
    // enable labels of nodes
    chart.nodes().labels().enabled(true);

    // configure labels of nodes
    chart.nodes().labels().format("{%id}");
    chart.nodes().labels().fontSize(12);
    chart.nodes().labels().fontWeight(600);

    // configure tooltips of nodes
    chart.nodes().tooltip().useHtml(true);
    chart.nodes().tooltip().format(
      "<span style='font-weight:bold'>{%id} {%last_name}</span><br>group: {%group}"
    );

    // configure tooltips of edges
    chart.edges().tooltip().format("{%info}");

    // set the chart title
    chart.title("Network Graph: ABC");

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

    // initiate drawing the chart
    chart.draw();
});

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

<div id="container"></div>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-graph.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-exports.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-ui.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>

So what is missing is:

• arrows instead of lines for connections/edges to see the direction.
• two separate arrows if a relation is bi-directional in order to see both tooltip lables.

If I would need to use a different lib/script I would do it, if it is free.