Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hide pointer if click event is not available

See original GitHub issue

I’m submitting a … (check one with “x”)

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior

when there is no click function attached, pointer still show while hover mouse on chart item.

Expected behavior No pointer show if there is no click function attached to it

Reproduction of the problem (select)="item.options.clickable ? onSelect($event,item) : null"

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

ngx-charts version: ngx-chart 6.0.0
Angular version: Angular 4
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Language: [all | TypeScript X.X | ES6/7 | ES5]

Issue Analytics

State:
Created 6 years ago
Reactions:4
Comments:5

Top GitHub Comments

1reaction

DavidMarquezFcommented, May 9, 2019

Yes, it’s purely for cosmetic purposes, but I believe it’s important because it leads to confusion.

For example, our users try to click the charts and believe that something is broken because it doesn’t do anything.

1reaction

DavidMarquezFcommented, Mar 25, 2019

I believe this could be achieved by checking the observers in the onSelect Event Emitter like they do here: https://github.com/swimlane/ngx-charts/blob/2fbac55229190732b50abb3acc4c9711feef7f52/src/number-card/number-card.component.ts#L64-L66 The problem with this is that it will be executed in every Change Detection Cycle, so I don’t think it’s the best way to go.

The other option would be to assign a variable in the ngOnInit and then use class binding.

Most of the charts have pointer because of these lines: https://github.com/swimlane/ngx-charts/blob/2fbac55229190732b50abb3acc4c9711feef7f52/src/common/base-chart.component.scss#L11-L19

https://github.com/swimlane/ngx-charts/blob/2fbac55229190732b50abb3acc4c9711feef7f52/src/common/base-chart.component.scss#L55-L59

So this could be achieved by using a binding in chart.component.ts: https://github.com/swimlane/ngx-charts/blob/6893f83443c1ebf10336aa67309def101ecbba57/src/common/charts/chart.component.ts#L22-L27

Here we could add [class.clickable]="clickable". Then you would just add .clickable before the .bar,.cell… classes.

Then you would need to change the other charts that don’t use this, like linear-gauge (cursor in linera-gauge.component.scss), treemap-cell and heat-map-cell (I believe these are all).

It would be nice if someone else could implement it, as I don’t currently have time to write, try and test what I’ve suggested.

Top Results From Across the Web

pointer-events:none but capture click - Stack Overflow

Listening to the click event on the parent container, getting the event.clientX and event.clientY values to check if they are within the bounds ......

pointer-events - CSS: Cascading Style Sheets - MDN Web Docs

Disabling pointer events on all images This example disables pointer events (clicking, dragging, hovering, etc.) on all images.

pointer-events | CSS-Tricks

The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, ...

Handling Events :: Eloquent JavaScript

That kind of input isn't available as a well-organized data structure—it comes in piece ... If a button inside a paragraph is clicked,...

Turn your mouse into a laser pointer - Microsoft Support

Reading view is suitable for reading a PowerPoint presentation full screen when there is no presenter. Press and hold the Ctrl key, and...