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

Align crosshair to right on gannt chart

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 1342 times
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Align crosshair to right on gannt chart

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!
Magdalena Gut
Developer and Highcharts Support Engineer
hussein_alhadad
Posts: 4
Joined: Thu Oct 28, 2021 10:42 am

Re: Align crosshair to right on gannt chart

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

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: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Align crosshair to right on gannt chart

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!
Magdalena Gut
Developer and Highcharts Support Engineer
hussein_alhadad
Posts: 4
Joined: Thu Oct 28, 2021 10:42 am

Re: Align crosshair to right on gannt chart

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: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Align crosshair to right on gannt chart

That's great to hear! :wink: In case of any further questions, feel free to contact us again.
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Gantt”