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

[Tom]

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 

[Nohinn]

I cannot reproduce the issue:
http://jsbin.com/ihadoc/1 

I'm missing something?

[Tom]

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

[Tom]

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

[Vince]

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;
}