javascript - c3.js - how to show hand cursor on bar chart hover - Stack Overflow

admin管理员组

文章数量:1357307

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

Share Improve this question Follow edited Sep 22, 2015 at 11:47 zmark asked Sep 22, 2015 at 9:24 zmarkzmark 12722 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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.

本文标签： javascriptc3jshow to show hand cursor on bar chart hoverStack Overflow