How to properly update the nodes on a Highcharts Sankey?

Question

I'm trying to build a toggle switch to change between two different data sets on a Highcharts Sankey chart. The data is more or less updating properly, however the nodes don't get destroyed on each chart.update() so the new set of nodes are redrawn on top of the old set.

Here is the update part of the code:

$('#yearToggle').click(function() {
    if (mySankey.title.textStr == 'Tomorrow') {
        myData = myData2;
        myNodes = myNodes2;
        myYear = 'Today'
    } else {
        myData = myData1;
        myNodes = myNodes1;
        myYear = 'Tomorrow'
    };
    mySankey.update({
        series: {
            data: myData,
            nodes: myNodes
        },
        title: {
            text: myYear
        }
    });
});

I'm sure there are more elegant ways to handle the toggle click portion, but my key concern is the correct updating of the node object within the series. Any help would be appreciated.

Here's the full fiddle: http://jsfiddle.net/j7kwrctn/3/

EDIT: Here's my updated fiddle that uses .destroy() on the nodes prior to updating the data. This works, but isn't ideal as it means there's no smooth animation, which is very helpful in showing what has changed by how much: http://jsfiddle.net/0ex7rpfh/2/

After trying different functions I don't think it is possible to do what you are after without using [**`remove()`**](https://api.highcharts.com/class-reference/Highcharts.Series#remove) and then adding the whole series again. It seems silly to have to do that, but I could not figure out how to remove nodes in one series that are not in the other when toggling between them. Of course, [**`removePoint()`**](https://api.highcharts.com/class-reference/Highcharts.Series#removePoint) could be used, but then you would have find the difference and remove differences, which is even more work. — ewolden, Jul 31 '18 at 11:33
Thanks for the reply. For now I've done something along the lines of your first suggestion, which is to use .destroy() on the nodes prior to adding them again. This works well enough, but it does mean there's no animation on the toggle which is unfortunate. I'll keep trying. — Moss, Jul 31 '18 at 13:25

score 1 · Accepted Answer · answered Aug 02 '18 at 05:57

It's a bug related with Sankey series type, and it's reported here: https://github.com/highcharts/highcharts/issues/8682 At this moment this issue is already fixed, so you just need to import Highcharts version directly from GitHub master branch, by changing links from:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>

to:

<script src="https://github.highcharts.com/highcharts.js"></script>
<script src="https://github.highcharts.com/modules/sankey.js"></script>

Live example: http://jsfiddle.net/9w7fczj2/

How to properly update the nodes on a Highcharts Sankey?

1 Answers1