Vis network overlapping numbers issue

160 Views Asked by At

Right now I am working on a project (Angular 8) using Visnetwork, everything working fine, except overlapping number on lines, can we do this without separating lines, I mean can we change the position of numbers on one line? can you help me out. (please check this screenshot)

    var edges = [
      { from: 2, to: 1, color:'#FF7F50', label: "2",     arrows: "top",},
      { from: 1, to: 2, color:'#FF7F50', label: "2",     arrows: "top"},
      { from: 6, to: 5, color:'#1085E0', label: "12",    arrows: "top",},
      { from: 5, to: 6, color:'#1085E0', label: "5",     arrows: "top"},
      { from: 5, to: 5, color:'pink',    label: "5",     arrows: "top"},

      { from: 6, to: 6, color:'#1085E0', label: "5",     arrows: "top"},
      { from: 7, to: 2, color:'red'    , label: "8",     arrows: "middle"},
      { from: 4, to: 5, color:'#FF7F50', title: "Title", arrows: "to, from"},
      { from: 6, to: 7, color:'#0C7D1A', title: "Title", arrows: "middle"}
    ];
1

There are 1 best solutions below

1
On
var edges = [
  { from: 2, to: 1, color:'#FF7F50', label: "2",     arrows: "top", smooth: { type: "curvedCW", roundness: 0.2 } },
  { from: 1, to: 2, color:'#FF7F50', label: "2",     arrows: "top", smooth: { type: "curvedCW", roundness: 0.2 } },
  { from: 6, to: 5, color:'#1085E0', label: "12",    arrows: "top", smooth: { type: "curvedCW", roundness: 0.2 } },
  { from: 5, to: 6, color:'#1085E0', label: "5",     arrows: "top", smooth: { type: "curvedCW", roundness: 0.2 } },
  { from: 5, to: 5, color:'pink',    label: "5",     arrows: "top", smooth: { type: "curvedCW", roundness: 0.2 } },

  { from: 6, to: 6, color:'#1085E0', label: "5",     arrows: "top", smooth: { type: "curvedCW", roundness: 0.2 } },
  { from: 7, to: 2, color:'red'    , label: "8",     arrows: "middle", smooth: { type: "curvedCW", roundness: 0.2 } },
  { from: 4, to: 5, color:'#FF7F50', title: "Title", arrows: "to, from", smooth: { type: "curvedCW", roundness: 0.2 } },
  { from: 6, to: 7, color:'#0C7D1A', title: "Title", arrows: "middle", smooth: { type: "curvedCW", roundness: 0.2 } }
];

Please see Stackblitz