hussein_alhadad
Posts: 4
Joined: Thu Oct 28, 2021 10:42 am

Align crosshair to right on gannt chart

Thu Oct 28, 2021 11:17 am

Hi,

I need help aligning the crosshair to the right side on the gannt chart (see image below) so that the crosshair on both graphs are synchronized correctly.

I am using xrange as a chart type and I have used the following option to activate the crosshair:

Code: Select all

export let chartOptions = {
  chart: {
    type: 'xrange',
  },
  xAxis: {
    type: 'datetime',
    crosshair: {
      width: 1,
      color: '#006FE6'
    } 
  }
 .
 .
 .
};
Thank you for your help!



Best regards,
Hussein Al Hadad
Attachments
img.PNG
img.PNG (31.75 KiB) Viewed 311 times

magdalena
Posts: 229
Joined: Tue Aug 24, 2021 1:32 pm

Re: Align crosshair to right on gannt chart

Mon Nov 01, 2021 4:46 pm

Hello,

Welcome to our forum and thanks for contacting us with your question!

This is not possible from the API options but you can use the following code to achieve this:

Demo:
https://stackblitz.com/edit/highcharts- ... ine-czujfz

Let me know if you have any further questions!
Regards!

hussein_alhadad
Posts: 4
Joined: Thu Oct 28, 2021 10:42 am

Re: Align crosshair to right on gannt chart

Sat Nov 06, 2021 9:07 pm

Hi,

Thank you for the reply and for the answer!

I am using Angular and I don't know where I should handle the afterDrawCrosshair event like that you have used in your code.
I am very thankful if you could help me with this.

Best regards,
Hussein

hussein_alhadad
Posts: 4
Joined: Thu Oct 28, 2021 10:42 am

Re: Align crosshair to right on gannt chart

Mon Nov 08, 2021 11:45 am

magdalena wrote:
Mon Nov 01, 2021 4:46 pm
Hello,

Welcome to our forum and thanks for contacting us with your question!

This is not possible from the API options but you can use the following code to achieve this:

Demo:
https://jsfiddle.net/BlackLabel/2p3hsv4e/

Let me know if you have any further questions!
Regards!
Hi,

Thank you for the reply and for the answer!

I am using Angular and I don't know where I should handle the afterDrawCrosshair event like that you have used in your code.
I am very thankful if you could help me with this.

Best regards,
Hussein

magdalena
Posts: 229
Joined: Tue Aug 24, 2021 1:32 pm

Re: Align crosshair to right on gannt chart

Tue Nov 09, 2021 2:30 pm

Hi,

the easiest way is to add the above code to the event load .

Here is the example demo:
https://stackblitz.com/edit/highcharts- ... ine-47cwqg

Feel free to ask any further questions!
Regards!

hussein_alhadad
Posts: 4
Joined: Thu Oct 28, 2021 10:42 am

Re: Align crosshair to right on gannt chart

Tue Nov 09, 2021 3:02 pm

magdalena wrote:
Tue Nov 09, 2021 2:30 pm
Hi,

the easiest way is to add the above code to the event load .

Here is the example demo:
https://stackblitz.com/edit/highcharts- ... ine-47cwqg

Feel free to ask any further questions!
Regards!
Hello,
Thank you for the answer. Now its working :)

Best regards,
Hussein

magdalena
Posts: 229
Joined: Tue Aug 24, 2021 1:32 pm

Re: Align crosshair to right on gannt chart

Tue Nov 09, 2021 3:11 pm

That's great to hear! :wink: In case of any further questions, feel free to contact us again.

Return to “Highcharts Gantt”