Page 1 of 1

Align crosshair to right on gannt chart

Posted: Thu Oct 28, 2021 11:17 am
by hussein_alhadad
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

Re: Align crosshair to right on gannt chart

Posted: Mon Nov 01, 2021 4:46 pm
by magdalena
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!

Re: Align crosshair to right on gannt chart

Posted: Sat Nov 06, 2021 9:07 pm
by hussein_alhadad
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

Re: Align crosshair to right on gannt chart

Posted: Mon Nov 08, 2021 11:45 am
by hussein_alhadad
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

Re: Align crosshair to right on gannt chart

Posted: Tue Nov 09, 2021 2:30 pm
by magdalena
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!

Re: Align crosshair to right on gannt chart

Posted: Tue Nov 09, 2021 3:02 pm
by hussein_alhadad
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

Re: Align crosshair to right on gannt chart

Posted: Tue Nov 09, 2021 3:11 pm
by magdalena
That's great to hear! :wink: In case of any further questions, feel free to contact us again.