nishikantparmariam
Posts: 34
Joined: Thu Jan 12, 2023 10:58 am
Location: Hyderabad, India

Axis plotLines like zoom behavior with custom text and line annotation

Hi,
My use-case is to write custom binding for allowing adding a horizontal line along with text, I have been able to do it - https://jsfiddle.net/8h3rktqo/

As you can see in drag callback, when line is dragged, I am also dragging text label associated with the line.

Problem - See this GIF - https://pasteboard.co/ABbsWt160PP9.gif

Because the text label is associated with xAxis, when I zoom into a region, the text label can go out of chart's zoomed view. Ideally, for text label I want that its y should be associated with yAxis but x should rather be static w.r.t chart without any axis. Something like its https://api.highcharts.com/highcharts/a ... bels.point being {x: 288, y: 9, yAxis: 0} here x is plotX and y is w.r.t. zeroth yAxis.

I've been able to make it work partially but there are issues with drag callback and visibility of control point, can someone please suggest a solution having appropriate drag callback and control point's positioner callback?

My solution - https://jsfiddle.net/o0nmf7xq/
Demo GIF - https://pasteboard.co/aS05WHepGjcm.gif

Thanks!
nishikantparmariam
Posts: 34
Joined: Thu Jan 12, 2023 10:58 am
Location: Hyderabad, India

Re: Axis plotLines like zoom behavior with custom text and line annotation

Additional Question -

Is it possible to specify something like plotLines.label.align and the text label takes left, center or right position on the horizontal line - it also respects zoom and resize.
nishikantparmariam
Posts: 34
Joined: Thu Jan 12, 2023 10:58 am
Location: Hyderabad, India

Re: Axis plotLines like zoom behavior with custom text and line annotation

My use-case: We have an internal API that earlier used yAxis.plotLines, now we are trying to allow users to switch to these kind of annotations as they offer more options like backgroundColor, dragging behavior etc. For backward compatibility, I found this zoom behavior + align/verticalAlign not being present. Would greatly appreciate to know on how these can be implemented on this custom annotation.
jedrzej.r
Posts: 742
Joined: Tue Jan 24, 2023 11:21 am

Re: Axis plotLines like zoom behavior with custom text and line annotation

Hi!

Thanks for reaching out to us with your inquiry!

Your primary solution is very good, it just needed little tweaks to make it work exactly as intended: https://jsfiddle.net/BlackLabel/t20huwo1/ - the changes are added from line 31 to 36.

As per your additional question, indeed, the label.align property isn't aligning items in relation to the plot area. Fortunatelly, there is a positioner function callback on labels object (which sadly isn't a part of the public API).

Demo: https://jsfiddle.net/BlackLabel/v10mqt87/

References:
https://github.com/highcharts/highchart ... #L537-L545

Let me know if that was helpful for you.
Best regards!
Jędrzej Ruta
Highcharts Developer
nishikantparmariam
Posts: 34
Joined: Thu Jan 12, 2023 10:58 am
Location: Hyderabad, India

Re: Axis plotLines like zoom behavior with custom text and line annotation

Thanks a lot, this helps.

There was an issue with position of control point and label that it did not add them both where user clicked, I fixed it using chart.plotLeft/chart.plotTop at appropriate places.

Another question - I am trying to mimic the `rotation` of axis plot line, I have been successfully in doing so for horizontal lines but for vertical lines, it seems I need to set correct values of rotationOriginX and rotationOriginY in label.graphic.attr API.

My solution - https://jsfiddle.net/35Larx1v/

To reproduce -

- Click add annotation and click anywhere on chart
- Now, click rotation annotation button.

Notice that rotation origin of my label and plotLines label seem different, how can I achieve same as that of plotLines? FWIW, the point to which label will be associated with, will be the control point of line.
nishikantparmariam
Posts: 34
Joined: Thu Jan 12, 2023 10:58 am
Location: Hyderabad, India

Re: Axis plotLines like zoom behavior with custom text and line annotation

I think, I was able to solve it using align in annotations (setting it to left - same as the default textAlign in plotLines) and padding properly -

https://jsfiddle.net/35Larx1v/1/
jedrzej.r
Posts: 742
Joined: Tue Jan 24, 2023 11:21 am

Re: Axis plotLines like zoom behavior with custom text and line annotation

I'm glad to hear that you were able to find a solution by yourself!

If any glitches arise please inform as soon as possible.
Best regards!
Jędrzej Ruta
Highcharts Developer
nishikantparmariam
Posts: 34
Joined: Thu Jan 12, 2023 10:58 am
Location: Hyderabad, India

Re: Axis plotLines like zoom behavior with custom text and line annotation

Thanks for pointing to positioner function! I was able to write a working positioner to perfectly mimic align behavior of plotLines w.r.t. plot area along with showing control point that allows dragging the line + label freely.

I am facing two issues that seem very similar, can you please help -


Reproducer - https://jsfiddle.net/o69z8wsh/6/


Issue 1 - Downloading -

1. Click add annotation and add line annotation on chart
2. Click on added line and drag it using the control point - it should drag both x and y of the added label
3. Download chart's PNG

Notice that weirdly the x position of label is still what it was in beginning (i.e. left of chart), whereas y position of line is correct in exported in PNG.


Issue 2 - Updating

(Refresh the page once)
1. Click add annotation and add line annotation on chart
2. Click on added line and drag it using the control point - it should drag both x and y of the added label
3. Click update annotation button

Notice that again, weirdly the x position of label is still what it was in beginning (i.e. left of chart), whereas y position of line is correct and text is updated.
nishikantparmariam
Posts: 34
Joined: Thu Jan 12, 2023 10:58 am
Location: Hyderabad, India

Re: Axis plotLines like zoom behavior with custom text and line annotation

Hi, I am listing down a bunch of more bugs/issues I've encountered while trying to mimic plotLines.

My goal is that (say for horizontal line), if y is same, then the position of text label w.r.t line should be exactly what it looks like if that horizontal line was drawn using plotLines.

For reference, I've drawn a horizontal line already using plotLines API and gave it options like align, textAlign, x, y offset, and fontSize. My aim is that when I click on chart at exact y (but any x), it adds exact line using annotations, so we can compare. I've mostly figured out things like adjusting x/y offset & label's width in label positioner function, but still facing below issues - can you please help?

Reproducer - https://jsfiddle.net/d7mczhs9/ (I've left some inline questions in the code, can you please check those as well?)


Issue 1

GIF - https://pasteboard.co/OTTDaYbgS2hR.gif (This seems to work sometimes well with single line text)

Steps -

1. Click on add annotation and then try to click on chart with exact same y as of already added plotLine.
2. Notice that added annotation's label and plotLine's label have exact position - that's good thing.
3. Click on the line, drag it and then again try to match the position of both label - It seems like right after dragging starts somehow the position of annotation's label w.r.t the line changes - I want it to retain the same relative position as it was when added for the first time.

Issue 2

If I increase fontSize (in both plotLines and annotations) to say 20px, the exact position of label w.r.t line is not achieved like above + dragging again messes up like above.

GIF - https://pasteboard.co/1SVrA0nabUJh.gif


Issue 3

- Seems like default x, y offset for plotLines is x=10 and y=-4 i.e. giving x=10 and y=-4 has same effect as not providing these options. Upon some trial/error, I found that to place annotation label exactly like plotLines, we need to give offset as x=0 and y=-7. This means whatever is user's x, y offset in plotLines, we need to do x-=10 and y-=3 to translate it to annotations equivalent to get exact visual position (the behavior I want). Is this expected/correct? Is there a better way to solve this? Does it depend on fontSize?

- To position the label correctly, it had to add additional offset of x=10 and y=-7 in positioner function, seems like this does not work well if fontSize changes (issue 2), can you suggest a solution that works for different cases?



Thanks a lot for helping us here! Looking forward for your response on these.
jedrzej.r
Posts: 742
Joined: Tue Jan 24, 2023 11:21 am

Re: Axis plotLines like zoom behavior with custom text and line annotation

Hi again!

Thanks for elaborating about the issues and providing reproducible demos with explanation!

As for the first & second (regarding your previous post), it seems that the label need to be translated in order to mantain it's position during exporting as well as updating. Unforunately, it seems that the control point position returns to the original position, thus making it impossible to manipulate label position correctly after update. I'll need to investigate it further, as it might have something to do with the drag event outcome.

Demo: https://jsfiddle.net/BlackLabel/pv37odax/

As per the last post: the line annotations and plotLines might differ in outcome, as for example if you drag the line annotation to the top border of plot area, the label will shrink it's position to mantain inside the chart area, which compromises the original position of the label. I'll have to dive deeper into this inquiries and I'll get back to you with an exhaustive answer as soon as possible.

Best regards!
Jędrzej Ruta
Highcharts Developer
jedrzej.r
Posts: 742
Joined: Tue Jan 24, 2023 11:21 am

Re: Axis plotLines like zoom behavior with custom text and line annotation

Hi again!

Per your last post on this thread, I was able to come with an updated solution: https://jsfiddle.net/BlackLabel/d43s6k7u/.

The default values for the plotLine are as follows:

Code: Select all

{
 align: horiz && isBand && 'center',
 x: horiz ? !isBand && 4 : 10,
 verticalAlign: !horiz && isBand && 'middle',
 y: horiz ? isBand ? 16 : 10 : isBand ? 6 : -4,
 rotation: horiz && !isBand && 90
}
There is no need to increase the offset with additional values like -4/-10/-7, the workaround pasted in the demo on line 165 should make the solution work just fine.
Please note that the plotLines use a simplified logic for generating text labels, whereas in annotations it is more complex logic, which can result in a slight difference of the labels' position overall.

If any glitches arise please inform as soon as possible.
Best regards!
Jędrzej Ruta
Highcharts Developer
nishikantparmariam
Posts: 34
Joined: Thu Jan 12, 2023 10:58 am
Location: Hyderabad, India

Re: Axis plotLines like zoom behavior with custom text and line annotation

Thanks a lot -

Code: Select all

label.graphic.text.y
did the trick and works for all fontSizes even with lines breaks. But, I think it is x=10, y=-4 for horizontal plotLines - https://jsfiddle.net/u4c7y698/ and x=4, y=10 for vertical.

Noting down current set of open issues -

1. Complex case with horizontal line - While above solution works decently well, it is still not 100% accurate when rotation is also there.

Reproducer - https://jsfiddle.net/u4c7y698/1/
See GIF - https://pasteboard.co/VMSHg5yRbjGo.gif

2. I tried the same solution for vertical lines, it works until rotation is 0 for all cases, but when I rotate it to 90 (both plotLines and annotation), it is not perfect -

Reproducer - https://jsfiddle.net/dbjhgyaw/1/
See GIF - https://pasteboard.co/vEybZpy1guhF.gif

(Set rotation to zero, change textAlign (of plotlines and align of annotation), set x and y offset and things will work, they don't work with rotation=90 or !=0)

3. viewtopic.php?p=191630#p191640 > Issue 1.

4. viewtopic.php?p=191630#p191630 > Both Issues.

Thanks a lot and looking forward to your response!
jedrzej.r
Posts: 742
Joined: Tue Jan 24, 2023 11:21 am

Re: Axis plotLines like zoom behavior with custom text and line annotation

Hi again!

We're currently working on provided issues, although after a further investigation, it seems that the misalignment of labels is rather a low-level problem, which requires additional time to provide a well thought solution, which will work for all provided options imitating plot lines. I'll keep you updated and as soon as we'll be able to provide a detailed answer with working solutions, I'll get back to you!

Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Usage”