Highcharts Demo

author(s): Paweł Fus

by jeffersonswartz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>

<div id="container"></div>


<button onclick="updateData()">
 Update Data
</button>

CSS

#container {
  min-width: 320px;
  max-width: 800px;
  margin: 0 auto;
  height: 500px;
}

JavaScript

Highcharts.wrap(
  Highcharts.seriesTypes.networkgraph.prototype, 'generatePoints',
  function(p) {
    if (this.nodes) {
      this.nodes.forEach(function(node) {
        node.destroy();
      });
      this.nodes.length = 0;
    }
    return p.apply(this, Array.prototype.slice.call(arguments, 1));
  }
);

// Add the nodes option through an event call. We want to start with the parent
// item and apply separate colors to each child element, then the same color to
// grandchildren.
Highcharts.addEvent(
  Highcharts.seriesTypes.networkgraph,
  'afterSetOptions',
  function(e) {
    var colors = Highcharts.getOptions().colors,
      i = 0,
      nodes = {};
    e.options.data.forEach(function(link) {

      if (link[0] === 'Proto Indo-European') {
        nodes['Proto Indo-European'] = {
          id: 'Proto Indo-European',
          marker: {
            radius: 20
          }
        };
        nodes[link[1]] = {
          id: link[1],
          marker: {
            radius: 10
          },
          color: colors[i++]
        };
      } else if (nodes[link[0]] && nodes[link[0]].color) {
        nodes[link[1]] = {
          id: link[1],
          color: nodes[link[0]].color
        };
      }
    });

    e.options.nodes = Object.keys(nodes).map(function(id) {
      return nodes[id];
    });
  }
);

let chart = Highcharts.chart('container', {
  chart: {
    type: 'networkgraph'
  },
  plotOptions: {
    networkgraph: {
      layoutAlgorithm: {
        enableSimulation: true
      }
    },
    point: {
      events: {
        click: function(event) {
          console.log(event);
        }
      }
    }
  },

  series: [{
    dataLabels: {
      enabled: true,
      linkTextPath: {
        attributes: {
          dy: 12
        }
      },
      linkFormat: '{point.fromNode.name} \u2192 {point.toNode.name}',
      textPath: {
        enabled: true,
        attributes: {
          dy: 14,
          startOffset: '45%',
          textLength: 80
        }
      },
    ...