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 ?
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?
Please let me know if you have any other questions or concerns on this matter.
can it will be done like this ?
The PlotAreaPosition and ChartPosition properties are actually supposed to be read-only, as they are returning where your mouse has entered the series in the case of your code-snippet here. Perhaps they aren’t because you are using the “_implementation” of the event arguments?
This still should not be necessary though, as by default, the crosshair should follow the mouse position. I have been looking into our internally logged issues, and I am now curious if you are setting any of the plotAreaMargin-related properties on the IgxDataChart? If you are, can you please provide the version of Ignite UI for Angular that you are targeting, as these properties were released awhile back while they were still in a “preview” state, and they would mess up the placement of some things in the chart.
@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.