HighChart.js : How to group nodes in organization chart

Question

I want to make a family tree using Highchart.js organization chart. For a married couple, I want to display either:

(1) the nodes connected to each other (as seen in the below image between nodes at the top) or

(2) group them together.

Is there a function in Highchart.js that I can achieve this?

I have tried to use some functions as written in https://api.highcharts.com/highcharts/series.organization but haven't found what I needed.

https://jsfiddle.net/k4ped9fj/

<script>
    Highcharts.chart('container', {

      chart: {
        height: 400,
        inverted: true
      },
      title: {
        text: ""
      },
      series: [{
        type: 'organization',
        name: 'Family Tree',
        keys: ['from', 'to'],

        data: [
        ['1','2'],['3','1'],['3','4'],['3','8'],['3','16'],['3','22'],['16','10'],['16','25']
        ],
        levels: [{
          color: '#008fd5',
          dataLabels: {
            color: 'white'
          },
          height: 25
        }],
        linkColor: "#ccc",
        linkLineWidth: 1,
        linkRadius: 0,

        nodes: [

                { name: "Sarah Collin", description: "7/5/1990", tags: ["T1and4"], id: "1", pid: 3, FirstName: "Sarah", LastName: "Collin", Birthdate: "7/5/1990", Alive: "1", SpouseID: "4", image: "photo.png" },
                { name: "Sofia Collin", description: "1/1/2017", id: "2", pid: 1, FirstName: "Sofia", LastName: "Collin", Birthdate: "1/1/2017", Alive: "1", image: "photo.png" },
                { name: "Richard Dolson", description: "7/7/1953-1/1/2016", id: "3", FirstName: "Richard", LastName: "Dolson", Birthdate: "7/7/1953", Alive: "0", DeathDate: "1/1/2016", image: "photo.png" },
                { name: "Adam Collin", description: "2/1/1990", tags: ["T1and4"], id: "4", pid: 3, FirstName: "Adam", LastName: "Collin", Birthdate: "2/1/1990", Alive: "0", Allergy: "Medicine", SpouseID: "1", image: "photo.png" },
                { name: "Jennifer Dolson", description: "1/2/1996", id: "8", pid: 3, FirstName: "Jennifer", LastName: "Dolson", Birthdate: "1/2/1996", Alive: "1", image: "photo.png" },
                { name: "Elias Wittek", description: "", id: "10", pid: 16, FirstName: "Elias", LastName: "Wittek", Alive: "1", image: "photo.png" },
                { name: "David Wittek", description: "2/1/1999", tags: ["T16and26"], id: "16", pid: 3, FirstName: "David", LastName: "Wittek", Birthdate: "2/1/1999", Alive: "1", SpouseID: "26", image: "photo.png" },
                { name: "Jeff Dolson", description: "2/1/2000", id: "22", pid: 3, FirstName: "Jeff", LastName: "Dolson", Birthdate: "2/1/2000", Alive: "0", image: "photo.png",layout:'hanging' , offset: '50%' },
                { name: "Will Wittek", description: "", id: "25", pid: 16, FirstName: "Will", LastName: "Wittek", Alive: "1", image: "photo.png" },
                { name: "Tracy Dolson", description: "2/1/2000", tags: ["T16and26"], id: "26", FirstName: "Tracy", LastName: "Dolson", Birthdate: "2/1/2000", Alive: "1", SpouseID: "16", image: "photo.png" }
        ],

        colorByPoint: false,
        color: '#007ad0',
        dataLabels: {
          color: 'white'
        },
        shadow: {
            color: '#ccc',
            width: 15,
            offsetX: 0,
            offsetY: 0
        },
        hangingIndent: 10,
        borderColor: '#ccc',
        nodePadding: 5,
        nodeWidth: 80
      }],
      credits: {
        enabled: false
    },

      tooltip: {
        outside: true,
        formatter: function () {
            return '<b>' + this.point.name.toUpperCase() + '</b><br/>' +
                '<span>' + this.point.description.toUpperCase() + '</span><br/>' 
        }
      },
      exporting: {
        allowHTML: true,
        sourceWidth: 800,
        sourceHeight: 400
      }

    });
</script>

Answer 1

Unfortunately, this feature is not supported. However, you can achieve it using Highcharts.SVGRenderer.path and plotting custom link between two nodes. Check the code and demo posted below.

Code:

  chart: {
    height: 400,
    inverted: true,
    events: {
        render: function() {
        var chart = this,
            node1,
          node2,
          graphic;

        if (chart.customLink) {
            chart.customLink.destroy();
        }

        chart.series[0].nodes.forEach(function (node) {
          if (node.id === "3") {
                        node1 = node;
          } else if (node.id === "31") {
            node2 = node;
          }
        });

        graphic = chart.renderer.path([
            'M',
          node1.shapeArgs.y + node1.shapeArgs.height / 2,
          chart.plotHeight - node1.shapeArgs.x - node1.shapeArgs.width / 2 + 10,
          'L',
          node2.shapeArgs.y + node2.shapeArgs.height / 2,
          chart.plotHeight - node2.shapeArgs.x - node1.shapeArgs.width / 2 + 10,
          'Z'
        ]).attr({
          'stroke-width': 1,
          stroke: '#ccc'
        }).add();

        chart.customLink = graphic;
      }
    }
  }

Demo:

• https://jsfiddle.net/BlackLabel/tjr5gue2/1/

API reference:

• https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path