Social Graph

Select a theme:
                     <html>
<head>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-graph.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>
  
  <div id="container"></div>
  

  <script>

    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();
        }
      );
    });
  
</script>
</body>
</html>
Warning!

Social Graph

Social Graph
