Highcharts official support forum

Posted: **Fri Nov 30, 2018 10:49 pm**

I want to place annotations on the y-axis but outside of the plot area. These should be placed with a connector (callout) at the same height as the PlotLines.
However, the settings do not work correctly there (see image - the red one). The alignment should be horizontal 'right' and vertical 'centered'. So that the connector on the right side is on the axis.

: image1.png (10.57 KiB) Viewed 1632 times

Code: Select all

annotations: [{
    labelOptions: {
      align: 'right',
      verticalAlign: 'middle',
      //distance: 0,
      overflow: 'allow',
      crop: false
    },
    labels: [{
      point: {
        x: -6,
        y: 273,
        yAxis: 0
      },
      format: 'wrong right middle'
    }]
  }
]

Distance gives a wrong result. If activate this the annotation jumps to another position. It just seems to work for vertical displacement.
My current workaround is, I add a callout as css style. But this is not the way to go.

https://jsfiddle.net/xreality/dskfv986/

Thanks
Maik

Posted: **Mon Dec 03, 2018 2:16 pm**

Hello xreality!

As is written in API: "Options for configuring annotations, for example labels, arrows or shapes. Annotations can be tied to points, axis coordinates or chart pixel coordinates." - there is no information about using annotations with plotLine, so labelOptions like align or verticalAlign doesn't work properly with plotLines. Actually, this type of annotation doesn't exist in normal Highcharts core, but we can create it by using renderer function. API: https://api.highcharts.com/class-refere ... erer#label. Check this example: https://jsfiddle.net/Bastss/m9a1b72x/.

Used functions and properties:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-refere ... derer#path

Best regards!

Posted: **Wed Dec 05, 2018 12:32 pm**

Hello bastss, thank you for your answer!

That's right, the annotations are not meant for PlotLines. I do not really do that either. I would like to align these only with the value of the PlotLine on the Y-axis. PlotLine and Annotation have no direct connection.

I expect the verticalAlign: 'middle' to center the annotation in vertical direction. But I still have to specify distance. The same problem with the horizontal alignment with align: 'right' is not right. In my example, you must explicitly specify x: -62. Since I do not know how wide the box is (different text), the error-prone.

Here ist a better example: https://jsfiddle.net/xreality/nrcy3oew/

Maik

Posted: **Thu Dec 06, 2018 10:24 am**

Maik,

You got an answer at StackOverflow https://stackoverflow.com/questions/535 ... 0#53594430. For the future - please don't duplicate topics.

Kind regards!

Posted: **Thu Dec 06, 2018 11:13 am**

Hello bastss,

sorry, I'm not sure the same users read both forums.

Best regards
Maik

Highcharts official support forum

Annotation outside of plot area

Annotation outside of plot area

Re: Annotation outside of plot area

Re: Annotation outside of plot area

Re: Annotation outside of plot area

Re: Annotation outside of plot area