cursor x-axis is not plotting correctly on angular the points and other has margin added to left side the mouse is on the yellow position and the crosshair layer and other please help
Hello Muhammad,
The best way to assist you if you can share the sample and steps to reproduce the issue.
You can use our online stackblitz sample as the starting point and can modify as per your requirement to share the sample with us.
https://es.infragistics.com/products/ignite-ui-angular/angular/components/charts/chart-overview
ttps://stackoverflow.com/questions/40600192/how-to-get-mouse-position-on-transformed-html5-canvas
How to move the pointer position like this ?
https://streamable.com/qx15js
Please help the line is not working as required !
Thank you for the video you have provided – it certainly helps to clear up the issue that you are seeing. I would like to get some more information for you so that I can potentially reproduce this behavior on my end. Can you please provide an answer to the following questions?
1. Would it be possible for you to please provide the HTML markup for the chart that you are writing, or an isolated sample project that demonstrates the behavior you are seeing? I ask, as the samples at the following documentation show the crosshair working correctly in multiple samples: https://es.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-annotations.
2. What version of the Ignite UI for Angular NPM packages are you using?
3. What browser are you testing against? Is this reproduced in other browsers?
Please let me know if you have any other questions or concerns on this matter.
is there anyway to override it on data chart or
It is possible to programmatically move the crosshair layer by using the crosshairPoint property of the built-in crosshair that is toggled by setting the crosshairVisibility property on the chart to “visible.” The crosshairPoint property takes a point value between 0 and 1 for both the X and Y points. This represents a percentage of the visible plot area, but the real issue with this is that you will need to maintain it each time the mouse moves.
The default behavior of the crosshair layer and the built-in crosshair is that it should follow the mouse, though. I believe I may be able to diagnose the reason it is not following the mouse if you provide an answer to the questions I asked above?
@Andrew Goldenbaum - any update on this ? please help me out on this one
Thank you for providing the StackBlitz sample. Using it, I am able to reproduce the behavior you are seeing.
Is there a particular reason that you are adding the transform: scale in this case? If this is not present, the crosshair works normally, and I feel that you can likely achieve the same behavior simply by just modifying the height and width of the IgxDataChart. If you do that instead, the chart’s crosshair continues to work correctly.
As mentioned previously, there does not exist anything that will add an offset to the crosshair.
The behavior of the crosshairs not following the mouse position when a scale transform is applied is unexpected, and as such I have asked our engineering teams to examine it further. To ensure it receives attention, I have logged it in our internal tracking system with a development ID of 274231. I have also created a private support case for you that I will be linking the issue to. This case has an ID of C-00223865 and you can access it after signing into your account, here: https://account.infragistics.com/support-cases.
@Andrew Goldenbaum - here example
If tranformation is applied it causes some issue please help ?
is there any way to add offset ?
Thank you for providing the version that you are using. It appears that you are a version behind the latest version of Ignite UI Angular for the charts, core, and gauges packages, as the latest version is 13.1.1. I am curious if this issue still happens for you with that version. Can you please update your packages to see if the issue still happens?
If it does, I will need you to provide the HTML markup for the chart that you are creating, as I believe that will be crucial to reproduce this behavior.