New annotation position not respected after moving, copying and reexporting

[ppcmetrics-thp]

Expected behaviour

The new position of the annotation must be respected on a new download/copy process.

Actual behaviour

• download or copy the chart -> annotation position as expected
• move the annotation
• download or copy the chart -> annotation position NOT as expected, resp. stays on the previous position

You can move the annotation initially before the first download/copy -> annotation positions are as expected. But on a further export after an additional change the positions are like the once from the first export.

Live demo with steps to reproduce

https://jsfiddle.net/4Lvc63e9/ (from #12789, but uses the latest code from https://code.highcharts.com/)

Product version

latest

Affected browser(s)

Chrome

[ppcmetrics-thp]

I could fix it by adding following lines to Exporting.ts#L1216:

const chartHeightFactor = chart.chartHeight / options.exporting.sourceHeight;
const chartWidthFactor = chart.chartWidth / options.exporting.sourceWidth;
options.annotations.forEach((annotation, index) => {
    if (
        typeof annotation.labels[0] !== 'undefined' &&
        typeof chart.annotations[index]?.labels[0]?.options !== 'undefined'
    ) {
        annotation.labels[0].x = chart.annotations[index].labels[0].options.x * chartWidthFactor;
        annotation.labels[0].y = chart.annotations[index].labels[0].options.y * chartHeightFactor;
    }
});

Since I don't think this is the right place in the code to fix the bug, I waited to submit a pull request.

[karolkolodziej]

Hi @ppcmetrics-thp!
Thank you for reporting the issue!

Your suggestion seems to be valid, thank you for that!

[ppcmetrics-thp]

Hi @karolkolodziej , but is this really the right place to fix the bug? Isn't there an update function in the annotation module which needs to be fixed instead of the export function?

[ppcmetrics-thp]

@karolkolodziej When preparing the pull request I'm getting following error in VS Code:
Property 'annotations' does not exist on type 'ChartComposition'.ts(2339)
This error comes from the line:
typeof chart.annotations[index]?.labels[0]?.options !== 'undefined'

I suppose this error would fail the defined GitHub actions. Could you show me please how I can avoid this error?

Changing the line like following doesn't solve the problem:
typeof chart?.annotations[index]?.labels[0]?.options !== 'undefined'

[karolkolodziej]

We have this thing called AnnotationChart and this should be used to properly access the type.

Altho as I think about it, putting annotation-related code into the exporting module isn't ideal. It looks like a good workaround but maybe there is a better place for the fix.

[pawelfus]

Possible workarounds:

Workaround 1:

https://jsfiddle.net/BlackLabel/yazgf9xj/

Snippet:

Highcharts.Annotation.prototype.onMouseUp = function() {
  const chart = this.chart,
    annotation = this.target || this,
    annotationsOptions = chart.options.annotations,
    index = chart.annotations.indexOf(annotation);
  this.removeDocEvents();

  // annotationsOptions[index] = annotation.options;
}

Workaround 2:
https://jsfiddle.net/BlackLabel/yazgf9xj/2/

Highcharts.Annotation.prototype.onMouseUp = function() {
  const chart = this.chart,
    annotation = this.target || this,
    annotationsOptions = chart.options.annotations,
    index = chart.annotations.indexOf(annotation);
  this.removeDocEvents();
  
  annotation.options.labels = annotation.labels.map(label => label.options);
  annotation.options.shapes = annotation.shapes.map(shape => shape.options);

  annotationsOptions[index] = annotation.options;
}