html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentLoad(function() {

  var stage = acgraph.create('container');

  var hoverGap;

  var chart1 = anychart.graph();

  chart1.data(data);

​

  chart1.bounds(0, 0, '50%', '100%');

  chart1.interactivity().hoverGap(1);

  hoverGap = chart1.interactivity().hoverGap();

  chart1.title().enabled(true).text('hoverGap is ' + hoverGap + '.\n It is harder to hover edge');

​

  var chart2 = anychart.graph(data);

  chart2.title().enabled(true).text('Scroll on mousewheel');

  chart2.bounds('50%', 0, '50%', '100%');

  chart2.interactivity().hoverGap(10);

  hoverGap = chart2.interactivity().hoverGap();

  chart2.title().enabled(true).text('hoverGap is ' + hoverGap);

​

  chart2.container(stage).draw();

  chart1.container(stage).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'},

  ]

};