html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentLoad(function () {

  var chart = anychart.graph();

  chart.data(data);

  chart.title().enabled(true).text('Change arrows position.');

​

  // Enable arrows.

  chart.edges().arrows().enabled(true);

  // Change arrows position. Now it located at the middle of the edge.

  chart.edges().arrows().position('50%');

​

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

  ]

};