fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Making annotations draggable

Hi,

I'm trying to add draggability to a bunch of lines I've drawn across a chart. But I'd like each individual line to be draggable and to stay put.

Add to that all the annotation shapes are draggable as a group, which I know is the default setting.

https://jsfiddle.net/EstebanTheMagnificent/Lztfkxn5/

If anyone could:

a) tell me if it's possible

b) it is where do I add "draggable: y"?

Thanks!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Making annotations draggable

Hello,

Welcome to our forum and thank you for contacting us with your question.

We already had a similar topic on your forum, and I think it might be helpful for you. In short, each annotation has to be in its own object.

Code: Select all

annotations: [{annotation1}, {annotation2}, {annotation3}]
Take a look at this topic, and a demo below.
DEMO: https://jsfiddle.net/BlackLabel/Lfc1dapv
Topic: viewtopic.php?t=42777

Let me know if that is what you were looking for,
Best regards!
Kamil Musiałowski
Highcharts Developer
fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: Making annotations draggable

Each annotation it's own object. That might be the answer. Let me check it out.

Thanks in advance!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Making annotations draggable

You got that right! Let me know how it worked,

Regards!
Kamil Musiałowski
Highcharts Developer
fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: Making annotations draggable

I got the annotations to work!! :D

But I can't get the "draggable: 'y' " to work. :(

Code: Select all

annotations: [
     {shapes: [
                { 
                fill: 'none',
                stroke: 'rgba(200, 0, 0, 0.50)',
                dashStyle: 'ShortDot',
                strokeWidth: 6,
                type: 'path',
                points: [{
                    x: Date.UTC(2022, 03, 21,13,30),
                    y: 175,
                    xAxis: 0,
                    yAxis: 0
                }, {
                    x: Date.UTC(2022, 04, 09,13,30),
                    y: 175,
                    xAxis: 0,
                    yAxis: 0,
                    }],
                 }
   
   {shapes: [  {... } ] },

               ]
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Making annotations draggable

That's great to hear that you have managed to make it work!

In terms of enabling the draggable: 'y' option, take a look at the demo below - I think it should guide you in the right direction.
DEMO: https://jsfiddle.net/BlackLabel/9s18dLjg/
API Reference: https://api.highcharts.com/highcharts/a ... .draggable

Do not hesitate to contact us with any further questions,
Best regards!
Kamil Musiałowski
Highcharts Developer
fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: Making annotations draggable

It worked! Thank you.

That was remarkable easy!

Since we're on this topic. Is there a way to have the annotations 'snap' to a full number on the Y axis, or a multiple of the number?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Making annotations draggable

Hi!

I'm really glad that this solution is working for you. Making the annotations draggable by a specific step requires a bit more work, and it is not available from the API, so we have to overwrite the onDrag method in the Annotation.prototype.

Please take a look at the modified demo below, and a reference to extending Highcharts functionality article.
If you would like to change the step, you can set it in line 11.
DEMO: https://jsfiddle.net/BlackLabel/adm4ez1u/
Article: https://www.highcharts.com/docs/extendi ... -functions

Regards!
Kamil Musiałowski
Highcharts Developer
fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: Making annotations draggable

woh! I was anticipating a lot of thinking and chasing down stray commas on my part but the code just copy and pasted right in!

I also appreciate that you anticipated my question and responded in May!

Thanks for the article.

I'm trying to build an app/web thing that allows users to add a trade on top of a chart and then adjust it or delete it.

Adding annotation via a form seems relatively straight forward but I haven't found anything regarding deleting an annotation, either via the keyboard or the mouse.

Would the Prototype functions be the best route or would recommend another?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Making annotations draggable

Thank you for such a kind message! I'm glad that the aforementioned snap functionality works with your code.

Removing the annotations is simple, it can be done with our API (without prototype manipulation) and some simple JS code, that you can adjust to your needs.

Firstly, you need to grab the specific annotation. If you will run into some trouble doing that, you can add some custom "index: 0, 1, 2..." properties while creating them (and find them later in annotations.userOptions object).

Then, you can find it in the chart.annotations array. And because they are an SVGElement, you can run the Highcharts destroy method on them (it's available on every SVGElement).

The JS logic is simple, but I just wanted to give you a working example of how it can be done. Instead of using hardcoded index, in a final code I'd suggest using something like JS find method.

DEMO: https://jsfiddle.net/BlackLabel/bgcw92nx/
API Reference: https://api.highcharts.com/class-refere ... nt#destroy
Searching for a specific value in array of objects: https://stackoverflow.com/questions/124 ... javascript

I hope that you will find it useful,
Have a great day!
Kamil Musiałowski
Highcharts Developer
fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: Making annotations draggable

This is making feel like I'm smarter than I really am!

Thanks, I will read up on this info.

Cheers!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Making annotations draggable

Maybe that's because you actually are! :D

Do not hesitate to contact us with any further questions,
Have a great day!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”