Redraw Highcharts Organization Chart after collapse

Question

I'm using Highcharts to create organization charts that where each node can be collapsed when clicked as in provided example : http://jsfiddle.net/vegaelce/83uktasc/

It works well but it would be better if it is possible to "redraw" the chart once a node is fold/unfold (to optimise the space left and realign the nodes). I tried without success :

chart.redraw();

Have you any idea how to make this ?

Thanks in advance

Answer 1

You need to set new data to implement the required feature. Nodes are hidden on svg level and they are not ignored in the redraw.

function getData(to) {
    const data = [
        ...
    ];

    if (to) {
        const filters = [to];
        return data.filter(el => {
            const matched = filters.find(filter => filter === el[0]);

            if (matched) {
                filters.push(el[1]);
            }

            return !matched;
        });
    }
    return data;
}

Highcharts.chart('container', {
    ...,
    plotOptions: {
        series: {
            point: {
                events: {
                    click: function() {
                        if (this.linksFrom.length) {
                            this.series.setData(getData(this.title || this.name));
                        } else {
                            this.series.setData(getData());
                        }
                    }
                }
            }
        }
    }
});

---

Live demo: http://jsfiddle.net/BlackLabel/5njf0cwq/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData