html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile(

    // The data used in this sample can be obtained from the CDN

    'https://cdn.anychart.com/samples-data/graph/avengers/data.json',

    function (data) {

      // create graph chart

      var chart = anychart.graph(data);

​

      // set chart layout type

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

​

      // set chart background

      chart.background().fill({

        src:

          'https://cdn.anychart.com/samples-data/graph/avengers/bg.png',

        mode: 'fit'

      });

​

      // set nodes normal state size and stroke color

      chart.nodes().height(40).width(40).stroke('2 #022a45');

​

      // set nodes hovered state size and stroke color

      chart.nodes().hovered().height(60).width(60).stroke('2 #96b9cd');

​

      // set nodes selected state size and stroke color

      chart.nodes().selected().height(60).width(60).stroke('2 #96b9cd');

​

      // set edges normal state stroke color

      chart.edges().stroke('2 #022a45');

​

      // set edges hovered state stroke color

      chart.edges().hovered().stroke('2 #96b9cd');

​

      // set edges selected state stroke color

      chart.edges().selected().stroke('2 #96b9cd');

​

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

    }

  );

});