This is a migrated thread and some comments may be shown as answers.

How can I get CSS Cursor to work for Chart series.

4 Answers 364 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 1
Tom asked on 05 Sep 2012, 04:48 PM

I've currently got a CSS rule for a KendoUI Chart (that is defined in a razor view):

/* use :not(:last-child) to ignore legend */
#idOfMyChart g:not(:last-child) path
{
    cursor
: pointer;
}

This sets the cursor rule for the right svg elements in the chart. However, hovering over the series seems to redraw the chart (to display the tooltip) and stops the cursor from displaying as per the css rule.

Is there a way to get these svg elements to display the cursor as a pointer?

Related StackOverflow question: http://stackoverflow.com/questions/12283889/does-setting-the-cursor-for-kendo-ui-chart-series-via-css-work 

4 Answers, 1 is accepted

Sort by
0
Accepted
Nohinn
Top achievements
Rank 1
answered on 06 Sep 2012, 09:06 AM
I cannot reproduce the issue:
http://jsbin.com/ihadoc/1 

I'm missing something?
0
Tom
Top achievements
Rank 1
answered on 06 Sep 2012, 09:28 AM
Hi Nohinn,

Yes, I neglected to state that my issue is with a pie chart.

Also, you've used HTML and js rather than prerendered with Kendo MVC razor HtmlHelper (I'm not sure of all of the details of the HTML the helper and whether that would have any effect).

In your JS Bin, I've changed the chart type to pie and for your line of CSS it's displaying the cursor as pointer for the entire chart rather than just the series in the chart (i.e. just the slices).

With my initial CSS (which I've added back in at: http://jsbin.com/ihadoc/2/edit), you should be able to see the issue.

Tom
0
Tom
Top achievements
Rank 1
answered on 06 Sep 2012, 11:05 AM
Hi Nohinn,

Applying that is actually probably the best possible, since the <path>s for the slices are rectangular, so without something like an image map, there won't be a way to get a exact map.

Thanks a lot for the quick response.

Tom
0
Vince
Top achievements
Rank 1
answered on 17 Mar 2014, 03:20 PM
I gave my chart a class called 'kendoChart' and then used this css:

.kendoChart g, .kendoChart g path, .kendoChart path[id*=_outline], .kendoChart path[stroke-width="1"], .kendoChart text {
    cursor: pointer;
}
Tags
Charts
Asked by
Tom
Top achievements
Rank 1
Answers by
Nohinn
Top achievements
Rank 1
Tom
Top achievements
Rank 1
Vince
Top achievements
Rank 1
Share this question
or