I am developing a series chart of efficiencies (in percentage) over time.

I have specific requirements for the legend:

• Clicking on a legend item leaves the series on the chart but fades the line, markers and legend item so that they appear as ‘inactive’
• Clicking on an ‘inactive’ legend item undoes the fade, so the line, markers and legend item appear as ‘active’
• Add checkboxes for each legend item – deselecting and selecting a checkbox have the same effect as clicking on the associated legend item
• Group series by a category header (in the fiddle that is the ‘Chrystalline Si Cells’) – clicking on this header or it’s associated checkbox makes the entire series group ‘active’ or ‘inactive’

All of this is working in a fiddle - https://jsfiddle.net/slaws/0wjpcaqt/138/ - which uses styledMode and a custom legend and dynamically sets the opacity of the chart and custom legend elements:

      $('.highcharts-legend-item.highcharts-series-' + value).css('opacity', new_opacity);
      $('.highcharts-series.highcharts-series-' + value).css('opacity', new_opacity);
      $('.highcharts-markers.highcharts-series-' + value).css('opacity', new_opacity);

However I am struggling with one more key requirement, which is to export the current state of the chart to an image or PDF, with all of series exported with their current 'active' or 'inactive' state. So, if a series is faded, it should be exported as faded to the image or PDF.

Here are screenshots to illustrate:

• This is the display of chart in the browser with the Multichrystalline series inactive
• This is how that chart is exported to PNG - I want the Multichrystalline series to be exported to look like it did in the browser, with it's line, markers and legend item faded to make it appear ‘inactive’

Any suggestions how I export the chart with it’s styling currently in effect?

PS The legend in the fiddle may start off misaligned, but rerunning it corrects that.