For the past day, I have been experimenting with the swimlane/ngx-charts library to remove the pointer from the graphs when hovered over. Our use case involves using a pie chart from this library, and the default cursor appearance when hovering over the chart is causing confusion for many of our clients:
https://i.sstatic.net/e6H0p.png
Some users mistakenly believe there is a clickable action associated with the hand pointer icon, when in fact it does nothing on click. Is it possible to modify this behavior so that the hand pointer is hidden and only the default arrow pointer is shown unless there is a specific call to action tied to a click?
We display multiple graphs; some do not trigger any action on click (should show default arrow pointer) while others lead users to internal routes upon being clicked (hand pointer should appear in these instances).
Attempts so far:
I researched a similar issue linked here:
https://github.com/swimlane/ngx-charts/issues/525
The solution involved modifying the library files, which are located within the node_modules directory. Editing these files could potentially cause future complications, so I am seeking an alternative approach.
I also experimented with adding CSS code like the following snippet to my styles.scss:
.ngx-charts {
.circle,
.bar,
.arc {
cursor: default !important;
}
}
However, this resulted in hiding the hand pointer completely, even on graphs where a click action was assigned.
Desired outcome:
It would be beneficial if someone could guide me on enabling the hand pointer only when there is a specific action tied to clicking on the graph. For all other scenarios without a designated click action, I prefer displaying just the default arrow pointer.
UPDATE
In response to comments by @Naren below, I attempted manually adding a "no pointer" class to the desired chart. However, navigating through the nested structure depicted here:
https://i.sstatic.net/xaLse.png
I encountered difficulty as the desired results were only visible when the class was added to elements at the 6th position within the SVG, making the process quite complicated.