Draw lines / objects / text over the chart?

[ivan.stojanov1990]

I was looking for this feature, but was not able to find it, so I wonder if it's actually supported:
Can we create drawings over the chart itself? For example, can we draw a simple line / arrow with the click at one point for start the drawing and then complete the line / arrow when we do a mouse click on another point?
Basically, similar to drawing a lines in paint app.
If this is not directly supported in the library, are there any out of the box ideas or a way how can this be accomplished?

Furthermore, I am interested in adding a text as well, with mouse click on some position (which will create placeholder for the text and then user can start typing the text). So I wonder is highcharts library can be used for the cases in which I am interested into.

[piotr.m]

Hi,

Thank you for contacting us with your question!

When it comes to this functionality, you are definitely able to recreate something like this using our events and custom configuration. Here you can see an example of a similar solution where new points are created after clicking and dragging with the mouse cursor, you can also delete the last point by clicking on it: https://jsfiddle.net/BlackLabel/74rcyozf/
https://api.highcharts.com/highcharts/s ... ents.click

When it comes to adding text after clicking, we have a separate annotations module that can do it.
You can find more information about it here:
https://api.highcharts.com/highcharts/annotations
https://jsfiddle.net/BlackLabel/Lnc8e09y/

Please let us know if this is what you are looking for.

Best Regards

[ivan.stojanov1990]

Hello Piotr,

Thank you for your tips, it was indeed a good starting point for my further research there.
I wonder:
1) in case I want to add more drawing (which are not supported in the provided tools), can I do that by developing highcharts plugins? Is there something similar already existing?
2) and my main question, here I added jsfiddle where I test the tools: https://jsfiddle.net/delux123/wfvabd63/. Let's for example add a circle there and "highcharts-annotation-toolbar" appears (I am referring to this one https://prnt.sc/u9h37k). What if I want to add more options to this toolbar, which are not present by default? Is this extendable and if yes, which approach do you suggest for doing this? (if you suggest highcharts plugins, then is there any similar existing example already)?

Regards,

[piotr.m]

Hi,

Yes, one of the greatest advantages of our charts is that you can freely expand them and create new functionalities.
You can learn more about how to do this here: https://www.highcharts.com/docs/extendi ... highcharts

Kind Regards

[Zolotoy]

Hello Piotr,

Thank you for your tips, it was indeed a good starting point for my further research there.
I wonder:
1) in case I want to add more drawing (which are not supported in the provided tools), can I do that by developing highcharts plugins? Is there something similar already existing?
2) and my main question, here I added jsfiddle where I test the tools: https://jsfiddle.net/delux123/wfvabd63/. Let's for example add a circle there and "highcharts-annotation-toolbar" appears (I am referring to this one https://prnt.sc/u9h37k). What if I want to add more options to this toolbar, which are not present by default? Is this extendable and if yes, which approach do you suggest for doing this? (if you suggest highcharts plugins, then is there any similar existing example already)?

Regards,

I am in a search of something similar. I want to draw a polygon to select some points on the Scatter chart. do you have any advice for that?

[dawid.d]

Hi Zolotoy,

Thanks for contacting us with your question!

You can draw on the graph using the renderer (https://api.highcharts.com/class-refere ... VGRenderer). You can convert axis values to pixels using the toPixels method (https://api.highcharts.com/class-refere ... s#toPixels).

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

Let me know if that was what you were looking for!
Best regards

[Zolotoy]

I did not mention that I need to draw a polygon using the mouse.

[dawid.d]

Hi,

I still think the previous tip should be useful to you. Knowing the renderer you can draw anything. For example, I wrote a demo that allows you to draw polygons by clicking on points. You can open it using the link below.

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

If I may clarify any issues/matters I am available at your convenience.
Kind regards!

[Zolotoy]

While it is an interesting thing, still it needs to be done by using the mouse.

[dawid.d]

Hi,

As I mentioned in a previous answer, you can do this using a renderer. You just need to program the logic you expect using the appropriate events as in the demo below.

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

In this demo, I showed how you can program something similar to what I think you expect. You can draw polygons there by adding their vertices by left-clicking on the chart, you can close the polygon by clicking the mouse wheel.

If this is not what you need, please specify it precisely. Then it will be much easier for me to help you.
Best regards!

[Zolotoy]

It is working almost as I needed it. However, when I click on a chart for the first time, I see nothing, when I click second time, I see a line. This is a bit counterintuitive for a user. Is it possible to show something after the first click? Also, what is a way to collect the points that are inside of the Polygone?

Thanks

[Zolotoy]

Also, is it possible to replace Wheel click with right button? I tried, but I am getting the context menu as well.

[dawid.d]

Hello,

Sure, you can render whatever you want in any way you like. For example, a small circle on the first click.

Opening the context menu can be disabled by blocking the js event contextmenu on the appropriate html element.

Demo: https://jsfiddle.net/BlackLabel/83Lmaqxe/

As for the issue of selecting points located in the polygon, this is a matter far from Highcharts. You have to write an algorithm in pure js from scratch that goes beyond the scope of our support on the forum. Once you have returned a list of points in the polygon, you can select them using the point.select method.
See: https://api.highcharts.com/class-refere ... int#select

In case of any other questions related to Highcharts functionality feel free to contact us anytime
Best regards!

[Zolotoy]

So, what you are saying is that it's problematic to collect points that are inside of the polygone?

[Zolotoy]

Can you at least give me a hint what do I need to look for to collect points inside of polygon?