Lemon
Posts: 12
Joined: Wed May 12, 2021 8:13 am

How can I draw a line between two points from data?

Hello,

I know this probably is a simple question but I really can't realize how to make it.
I want just draw a single dashed line between two points with an assigned color.
(Both of the two points will contain X value and Y value provided by data.)
I'm not sure which is the best way of doing this.

Can anyone help me, please?
Thanks very much!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: How can I draw a line between two points from data?

Hello,

Thanks for contacting us with your question!

You can draw that line using chart.events.render function.

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

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
Lemon
Posts: 12
Joined: Wed May 12, 2021 8:13 am

Re: How can I draw a line between two points from data?

Thanks again.

I have a few additional configs.

1. I have to manually set the X and Y values of the dashed line.
Should I use update Fn with line type?

Code: Select all

chart.series[0].update(
            {
              type: 'line',
              data: data,
            },
            false,
          );
2. If I need to add more than one dashed line which is separate from the previous line, is using chart.events.render function still suitable for this case?

Sorry all this wasn't clear in my earlier post.
Best regards
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: How can I draw a line between two points from data?

Hi,

In the previous demo, I show how to renderer strict single line based on existed points.

If you want to manually set X and Y values that are not dependent on points. You should do this in a different way using toPixels method. And if you need to add more than one line you must array elements instead of a single variable.

I prepare a demo where you can define lines in customLines array. Hope it is understandable how it works.

Demo: https://jsfiddle.net/BlackLabel/vpwsr410/
API: https://api.highcharts.com/class-refere ... s#toPixels

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Stock”