Highcharts Sankey Chart - Is it possible to create sticky node tooltips?

Question

I would to add a clickable link inside a Sankey chart's node tooltip.

I tried both the stickOnContact and hideDelay configurations. They don't seem to work since every time my mouse leaves the node the tooltip it redraws itself as a point tooltip.

Any ideas would be appreciated.

https://jsfiddle.net/d3nt57xa/1/

Highcharts.chart('container', {

    title: {
        text: 'Highcharts Sankey Diagram'
    },
    accessibility: {
        point: {
            valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.'
        }
    },
    tooltip: {
        stickOnContact: true,
        distance:0,
        hideDelay:500
    },
    series: [{
        keys: ['from', 'to', 'weight'],
        data: [
            ['Portugal', 'Brazil', 2],
            ['Brazil', 'France', 1],
            ['France', 'Brazil', 1],
           
        ],
        type: 'sankey',
        name: 'Sankey demo series',
        plotOptions: {
            sankey: {
                dataLabels: {
                    style: {
                      textOutline: 'none',
                      color: '#393e49',
                    },
                    enabled: true,
                },
                tooltip: {                   
                    stickOnContact: true
                },
                nodeWidth: 4,
                keys: ['from', 'to', 'weight', 'custom'],
            }
        },
    }]

});

Answer 1

To be able to completely lock the tooltip in one place so that you can click on its content, in addition to setting tooltip.stickOnContact: true, you also need to disable the tooltip from following the mouse by changing the tooltip.followPointer property to false because, as it says documentation, for sankey this property is set to true by default.

You can add a link using the tooltip.pointFormatter() method, but you must remember to enable the use of HTML elements such as the <a> tag using the tooltip.useHTML property:

tooltip: {
  stickOnContact: true,
  followPointer: false,
  useHTML: true,
  pointFormatter: function() {
    const point = this;
    return `
      ${point.from} → ${point.to}: <b>${point.weight}</b><br/>
      <a target="_blank" href="https://www.highcharts.com/">https://www.highcharts.com</a>
    `;
  }
}

Demo: https://jsfiddle.net/BlackLabel/85fw40na/
API: https://api.highcharts.com/highcharts/tooltip.followPointer
https://api.highcharts.com/highcharts/tooltip.useHTML
https://api.highcharts.com/highcharts/tooltip.pointFormatter