Restrict annotation box to move out of the chart Area

[mgopidi]

Expected behaviour

Ability to restrict the drag of annotation label with in the chart area. Avoid it from crossing the plot area if a user manually drags it.

Actual behaviour

Currently, when an annotation is dragged from its position across the boundaries in certain directions, it crosses the plot area and disappears completely. Hence, this makes it difficult to spot or drag it back inside the chart again.

Live demo with steps to reproduce

https://jsfiddle.net/manisha_Reddy/wary6qzu/4/.

Product version

Observed in high-charts 8.0.4 currently

Affected browser(s)

Google Chrome, internet explorer

Reference of the original issue : https://www.highcharts.com/forum/viewtopic.php?f=9&t=44467&p=157529#p157529

[pawelfus]

Hi @mgopidi

Thank you for reporting the issue.

Steps:

• Drag&drop annotation to the right edge of the chart. Observe two issues: first one, annotation is dragged to the right, but label is moved to the left. Second one when reaching right edge, we use original y-position to start justifying:
  

Implementation PoC
Change how justifiedOptions are generated. Instead of mirror-translation, implement snap-to-edge logic.
Demo: https://jsfiddle.net/BlackLabel/9b6cnrga/
Snippet:

Highcharts._modules["annotations/controllable/ControllableLabel.js"].justifiedOptions = function(chart, label, alignOptions, alignAttr) {
  var align = alignOptions.align,
    verticalAlign = alignOptions.verticalAlign,
    padding = label.box ? 0 : (label.padding || 0),
    bBox = label.getBBox(),
    off,
    //
    options = {
      align: align,
      verticalAlign: verticalAlign,
      x: alignOptions.x,
      y: alignOptions.y,
      width: label.width,
      height: label.height
    },
    //
    x = alignAttr.x - chart.plotLeft,
    y = alignAttr.y - chart.plotTop;
  // Off left
  off = x + padding;
  if (off < 0) {
    if (align === 'right') {
      options.align = 'left';
    } else {
      options.x = chart.plotLeft;
    }
  }
  // Off right
  off = x + bBox.width - padding;
  if (off > chart.plotWidth) {
    if (align === 'left') {
      options.align = 'right';
    } else {
      options.x = chart.plotWidth - bBox.width / 2 - chart.plotLeft;
    }
  }
  // Off top
  off = y + padding;
  if (off < 0) {
    if (verticalAlign === 'bottom') {
      // options.verticalAlign = 'top';
    } else {
      // options.y = alignOptions.y + bBox.height;
    }
  }
  // Off bottom
  off = y + bBox.height - padding;
  if (off > chart.plotHeight) {
    if (verticalAlign === 'top') {
      options.verticalAlign = 'bottom';
    } else {
      options.y = chart.plotHeight - chart.plotTop - bBox.height * 1.5;
    }
  }
  return options;
};

To do:

• - check why alignAttr.x has negative value on init. Related to the positioner
• - check why there's unnatural delay when dragging to the right (might be related to the one above)
• - make sure that annotation is limited to the pane, not to the plotting area
• - normalize justify options to the pane/chart dimensions (e.g. on "drop" event or directly in the method) + test chart resize
• - update docs
• - check if we can enable overflow: "justify" option in StockTools

[mgopidi]

Hi,

Thank you for looking into these issues, I also wanted to show you the behavior where it is crossing the boundary and disappearing few times:

[Coltcarnevle]

Was this issue ever fixed? I still see this as an issue with highcharts.

[raf18seb]

Hi @Coltcarnevle,

seems like it's working fine now. Please test a demo with a current version of Highcharts: https://jsfiddle.net/manisha_Reddy/wary6qzu/4/

Could you confirm whether the problem is gone? And, if there's still a problem, could you please provide steps to reproduce it?

[kevin-onemodel]

I am facing this issue in my Highcharts React app. Currently using v9.0.1.

I am wondering which version do I need to upgrade to at minimum to have this fixed? Hesitant to upgrade to current stable version due to breaking changes.

Thanks!

[bm64]

Hello @kevin-onemodel

It looks like it was fixed in v9.1.0 so this is the minimal version you'd want to update to. See the demo