In pie charts c3js by default shows a hand cursor (pointer) when pie slice is hovered. I would like to have the same behavior for each bars in a bar chart. How to achieve that?
I tried the below css but it shows the hand cursor even when you hover in between 2 bars.
.c3-event-rect {
cursor:pointer;
}
To clarify this is a jsfiddle example I'd like to have pointer cursor only on bar items because only them are clickable.
After way too much time spent, I finally figured out a solution. Here is a jsfiddle , which explains the two lines of code in some detail (in comments).
If you don't understand the details, don't worry about it or just ask me to elaborate. :)
tl;dr :
data: { selection: { enabled: true }, [...]
.c3-bar { cursor: pointer; }
Just use the following CSS
.c3-bar {
pointer-events: auto !important;
}
Note that you need the !important
to override the inline pointer-events: none
that C3 adds to the bars.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.