html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentLoad(function() {

  var chart = anychart.graph(data);

​

  var hoverGap = chart.interactivity().hoverGap();

​

  var titleText = 'Distance between edge and mouse cursor that you can interact with edge is ' + hoverGap;

  chart.title()

    .enabled(true)

    .text(titleText);

​

  chart.container('container').draw();

});

​

var data = {

  nodes: [

    {id: 'a'},

    {id: 'a1'},

    {id: 'a2'},

    {id: 'a3'},

    {id: 'a4'},

    {id: 'a5'},

    {id: 'a6'},

    {id: 'b'},

    {id: 'b1'},

    {id: 'b2'},

    {id: 'b3'},

    {id: 'b4'},

    {id: 'b5'},

    {id: 'b6'}

  ],

  edges: [

    {from: 'a', to: 'b'},

    {from: 'a', to: 'a1'},

    {from: 'a', to: 'a2'},

    {from: 'a', to: 'a3'},

    {from: 'a', to: 'a4'},

    {from: 'a', to: 'a5'},

    {from: 'a', to: 'a6'},

    {from: 'b', to: 'b1'},

    {from: 'b', to: 'b2'},

    {from: 'b', to: 'b3'},

    {from: 'b', to: 'b4'},

    {from: 'b', to: 'b5'},

    {from: 'b', to: 'b6'},

  ]

};