score:1

Accepted answer

You need to keep the options 'left by a user' and recreate shapes/labels on the export chart load event with those kept options. Depending on what a user can do in your chart keeping the options might be complex but for simple shapes/labels it comes down to saving attrs and css options.

// the labels storage
const customLabels = []

// a util for creating a label and saving its options
function createLabel (renderer, { args, attr, css }) {
   const label = renderer.label(...args).attr(attr).css(css).add()

   label.userOptions = { args, attr, css}

   return label
}

const chart = Highcharts.chart('container', {
    chart: {
        events: {
            redraw () {
                const userOptions = {
                  args: ['The chart was just redrawn', 100, 120],
                  attr: {
                        fill: Highcharts.getOptions().colors[0],
                        padding: 10,
                        r: 5,
                        zIndex: 8
                    },
                    css: {
                        color: '#FFFFFF'
                    }
                }

               const label = createLabel(this.renderer, userOptions)

               customLabels.push(label)
            }
        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }],

    exporting: {
      chartOptions: {
        chart: {
          events: {
            load () { // recreate the labels
              this.labelsForExport = customLabels.map(({ userOptions }) => createLabel(this.renderer, userOptions))
            },

            destroy () { // clean up the labels
              this.labelsForExport.forEach(label => label.destroy())
            }
          }
        }
      }
    }
});

live example


Related Query

More Query from same tag