How to remove cursor pointer from d3 Pie chart

Question

Is there an option that disables the "cursor: pointer" style from the c3|d3 pie chart? I simply display slices and on hover just show the % percentage and a label, do not need the pointer because it is misunderstood as a link to somewhere, yet it is the default cursor...

Update 1: I found a workaround, but it does not answer my question..

onrendered: function () { $('#my_chart_id .c3-shape').css('cursor', 'default'); }

score 2 · Accepted Answer · answered May 05 '15 at 13:13

2

I think the most straight-forward thing to do would be to use D3 to select each arc of the pie and change the cursor style, like this:

d3.selectAll(".c3-arc").style("cursor", "auto");

Fiddle here: http://jsfiddle.net/henbox/k9Dbf/270/

Cursor style options here: http://www.w3schools.com/cssref/pr_class_cursor.asp

answered May 05 '15 at 13:13

Henry S

3,072
1
13
25

Thank you very much Henry, i will upvote it, though its not actually a d3 option. In my update you may see a similar approach, which i think is better cause it will run even if the chart is somehow re-rendered. – cnom May 05 '15 at 13:45
1

@cnom: The cursor's appearance is set using a css rule. By default this is set by the library to `pointer` which shows the result you don't like. Since there is no built-in function in C3/D3 to explicitly set the cursor, this answer is pretty much the best you can get using pure D3. If you are concerned about re-rendering you might as well move this css rule from your code to the external stylesheet. I have updated the [JSFiddle](http://jsfiddle.net/k9Dbf/271/) to show this alternative approach. – altocumulus May 05 '15 at 14:06
@autocumulus Good shout using `!important` to ensure the setting overrides the default c3 css. I'd forgotten you could do that – Henry S May 05 '15 at 17:02
@altocumulus This is a nice approach but with the problem that this could spoil other piecharts in the site (where the pointer is needed). Of course you could say that I make the css selector more specific by defining the id of each graph I want it on, but then it would be bad programming, i guess.. – cnom May 06 '15 at 07:42
1

@cnom You have all the flexibility of CSS selectors at your hands. You could easily specify which charts will be affected by using a more specific selector like `#mychartid .c3-arc` or by giving a marker class to charts you want to behave differently. – altocumulus May 06 '15 at 07:52

score 2 · Answer 2 · answered Mar 04 '19 at 00:02

2

Via CSS override:

.c3-shape {
  cursor: default !important;
}

answered Mar 04 '19 at 00:02

Dmitry Efimenko

10,973
7
62
79

score 0 · Answer 3 · answered Dec 09 '19 at 15:42

0

I've used a css override that targets all (our) c3 instances:

.c3-event-rect {
  cursor: default !important;
}

answered Dec 09 '19 at 15:42

Katinka Hesselink

3,961
4
20
26

How to remove cursor pointer from d3 Pie chart

3 Answers3