Highcharts exporting SVG with data pre-selected

Question

I’m trying to export a Highcharts sankey diagram to SVG, and I would like to have several different vector files with different parts of the diagram highlighted selected (clicked on), so I can fade between them in a pre-recorded presentation. I can’t figure out any way to make the Export module export an SVG that has been highlighted by clicking on it—-it exports only the “plain” graph. Can anyone help?

I’ve attached screenshots of what I’m after, since I can’t figure out how to get them to export as vector files. No matter what, the data is always exported looking like the first diagram:

But I would also like it exported as the following two diagrams with various parts of the data selected:

Answer 1

Here is my idea how to achieve it with using the exporting.menuItemDefinition feature.

• create the global flag for each node, like customSVGExport1,

• create the custom export menu buttons with functionality which changes the flag to true and trigger the SVG downloading (and chart rendering once again),

  onclick: function() {
    customSVGExport1 = true;
    this.exportChart({
      type: 'image/svg+xml'
    });
  },
  

  • below function will be triggered:

     chart: {
       events: {
         render() {
           let chart = this;
    
           if (customSVGExport1) {
            // Trigger point hover event
            chart.series[0].nodes[0].onMouseOver();
            // Hide tooltip for export
            chart.tooltip.label.hide();
            // Set flag back to false;
            customSVGExport = false;
          } else if (customSVGExport2) {
             chart.series[0].nodes[1].onMouseOver();
             chart.tooltip.label.hide();
             customSVGExport = false;
          }
        }
      }
    },
    

Demo: https://jsfiddle.net/BlackLabel/x67jwsmo/

API: https://api.highcharts.com/highcharts/exporting.menuItemDefinitions

API: https://api.highcharts.com/highcharts/chart.events.render