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.

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.

• javascript
• css
• d3.js
• c3.js

2 Answers 2

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 ments).

If you don't understand the details, don't worry about it or just ask me to elaborate. :)

tl;dr:

1. data: { selection: { enabled: true }, [...]
2. .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.