html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

    anychart.onDocumentReady(function() {

​

  // create data

  var data= {

    "nodes":[

      {id:'Kate Austin', height: '30', fill: '#64b5f6'},

      {id:'Reece Gray'},

      {id:'Darren Burch'},

      {id:'Leslie Bailey'},

      {id:'Nova Fisher'},

​

      {id:'Jack Austin', height: '30', fill: '#64b5f6'},

      {id:'Jamie Montoya'},

      {id:'Sawyer Mack'},

      {id:'Hugo Love'},

​

      {id:'Sophie Lilly', height: '30', fill: '#64b5f6'},

      {id:'Ivy Mcintyre'},

      {id:'Evie West'},

​

      {id: 'Elsie Mcbride', height: '20', fill: '#64b5f6'},

      {id:'Jude Mcbride'},

    ],

​

    "edges":[

      {from: 'Kate Austin', to:'Reece Gray'},

      {from: 'Kate Austin', to:'Darren Burch'},

      {from: 'Kate Austin', to:'Leslie Bailey'},

      {from: 'Kate Austin', to:'Nova Fisher'},

      {from: 'Kate Austin', to:'Jack Austin'},

​

      {from: 'Jack Austin', to:'Jamie Montoya'},

      {from: 'Jack Austin', to:'Sawyer Mack'},

      {from: 'Jack Austin', to:'Hugo Love'},

      {from: 'Jack Austin', to:'Sophie Lilly'},

      {from: 'Jack Austin', to:'Elsie Mcbride'},

​

      {from: 'Elsie Mcbride', to:'Jude Mcbride'},

​

      {from: 'Sophie Lilly', to:'Ivy Mcintyre'},

      {from: 'Sophie Lilly', to:'Evie West'},

    ]}

​

  var chart = anychart.graph(data);

​

  chart.title("Relationship Graph");

​

  // configure nodes

  chart.nodes().labels().enabled(true);

  chart.nodes().labels().fontSize(12);

​

  chart.nodes().normal().fill("white");

  chart.nodes().normal().stroke("1 black");

  chart.nodes().shape('circle');

​

  chart.nodes().hovered().fill("white");

  chart.nodes().hovered().stroke("2 black");

  chart.nodes().hovered().shape('circle');

​

  chart.layout().type('force');

​

  // initiate drawing the chart

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

});