html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentLoad(function() {

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

  var chart1 = anychart.graph();

  chart1.data(data);

  chart1.title().enabled(true).text('Edges interactivity is disabled. \n One path for all edges. \n Edge\'s tooltip is unavailable.');

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

  chart1.interactivity().edges(false);

​

  var chart2 = anychart.graph(data);

  chart2.title().enabled(true).text('Edges interactivity is enabled. \n Each edge has own path. \n Edge\'s tooltip works fine.');

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

  chart2.interactivity().edges(true);

​

  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'},

  ]

};