5

I want to change the cursor to 'Pointer' when it hover to Bar of the JQPlot.

I have tried to change in the CSS. But it didn't work. Please help me.

Manish
  • 99
  • 1
  • 8

3 Answers3

9

You need - as you tried - to modify it using CSS. You maybe have not applying CSS change on the right element, you need to apply it to .jqplot-event-canvas :

$('#chart1').on('jqplotDataHighlight', function () {
   $('.jqplot-event-canvas').css( 'cursor', 'pointer' );
});

Please see a working example here

Edit Fiddle and code updated according to sdespont's comment.

PS As written by Lukas Jelinek, you can redefine default pointer when you unhighlight your data :

$('#chart1').on('jqplotDataUnhighlight', function() {
    $('.jqplot-event-canvas').css('cursor', 'auto');
});
AnthonyLeGovic
  • 2,335
  • 1
  • 13
  • 22
  • 1
    Good answer, but use .on() instead of .bind() which is deprecated – sdespont Apr 15 '13 at 14:07
  • Note that at least for line graphs, you must have highlightMouseOver set to true in the series_options otherwise this solution does not work. – carruthd Nov 19 '14 at 16:42
2

As wrote AnthonyLeGovic, bind it using:

$('#chart1').on('jqplotDataHighlight', function () {
   $('.jqplot-event-canvas').css( 'cursor', 'pointer' );
});

but don't forget to unbind it too to set the normal cursor when you move out:

$('#chart1').on('jqplotDataUnhighlight', function() {
    $('.jqplot-event-canvas').css('cursor', 'auto');
});
Lukas Jelinek
  • 2,337
  • 1
  • 19
  • 12
1

Thanks for your answer.

Same thing we can do by this way also :

cursor: { style: 'pointer', show: true, showTooltip: false }

But i want the Cursor:"Pointer" should be displayed when it is on the bar not on the whole chart area.

Manish
  • 99
  • 1
  • 8