CODEWITHSUNDEEP
jqplot
Manish
Manish

Reputation: 99

JQPlot - How to change the cursor to pointer on Hover to Bar in JQPlot?

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.

Upvotes: 5

Views: 2918

Answers (3)

AnthonyLeGovic
AnthonyLeGovic

Reputation: 2335

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

Upvotes: 9

Lukas Jelinek
Lukas Jelinek

Reputation: 2435

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

Upvotes: 2

Manish
Manish

Reputation: 99

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.

Upvotes: 1

Related Questions