Mouse over event and cursor pointer on the line series

Question

I have the following implementation and it is functional. When user clicks on the line series, then it loads another data.

I want to give an impression to the first time user that line series clickable with implementing mouse over event and cursor: pointer.

var isHover=false;
function onClick (e) {
   if (!isHover) {
        var chart = $("#chart").data("kendoChart");
        chart.options.series =[{data: stats2,name:stats2[0].name}] ;
        chart.redraw();
        isHover = true;
   }
  else if (isHover) {
        var chart = $("#chart").data("kendoChart");
        chart.options.series = [{data: stats,name:stats[0].name}];
        chart.redraw();
        isHover = false;
       }
}

FIDDLE

Answer 1

A bit hacky, but this should work on stroke as well as the path:

circle:hover,
path[stroke="#ff6800"]:hover { cursor:pointer; }

See: http://jsfiddle.net/3yhbyy2g/78/

But would be better to set a class here (since you are tying the mouseover to a certain color), but not sure how this would work in kendo.

And since it's a bit hard to hit the line, maybe it would be enough to leave it on the circle alone.