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

Annotation outside of plot area

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
image1.png (10.57 KiB) Viewed 97 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
Posts: 140
Joined: Wed Oct 17, 2018 10:59 am

Re: Annotation outside of plot area

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!

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

Re: Annotation outside of plot area

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

bastss
Posts: 140
Joined: Wed Oct 17, 2018 10:59 am

Re: Annotation outside of plot area

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!

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

Re: Annotation outside of plot area

Thu Dec 06, 2018 11:13 am

Hello bastss,

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

Best regards
Maik

Return to “Highcharts Usage”