CODEWITHSUNDEEP
javascriptcssd3.jsc3.js
zmark
zmark

Reputation: 127

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

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.

Upvotes: 4

Views: 4579

Answers (2)

enche
enche

Reputation: 240

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:

  1. data: { selection: { enabled: true }, [...]
  2. .c3-bar { cursor: pointer; }

Upvotes: 8

potatopeelings
potatopeelings

Reputation: 41075

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.

Upvotes: 1

Related Questions