xreality
Posts: 3
Joined: Thu Nov 29, 2018 7:36 am

Annotation outside of plot area

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
image1.png (10.57 KiB) Viewed 1599 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
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Annotation outside of plot area

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!
Sebastian Wędzel,
Highcharts Developer
xreality
Posts: 3
Joined: Thu Nov 29, 2018 7:36 am

Re: Annotation outside of plot area

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
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Annotation outside of plot area

Maik,

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

Kind regards!
Sebastian Wędzel,
Highcharts Developer
xreality
Posts: 3
Joined: Thu Nov 29, 2018 7:36 am

Re: Annotation outside of plot area

Hello bastss,

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

Best regards
Maik

Return to “Highcharts Usage”