CODEWITHSUNDEEP
highcharts
ahb
ahb

Reputation: 170

Changing the cursor in highcharts

I'd like the cursor to be a crosshair when it is over the chart area of a highcharts graph, to indicate to users that they can zoom in. However, I don't want the cursor to be a crosshair when it's over other areas such as the legend or axes.

Is this possible?

Upvotes: 2

Views: 3164

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

You can use built-in method chart.isInsidePlot(plotX, plotY). Example: http://jsfiddle.net/2eje4xxb/1/

Code example:

container.on("mousemove", function (event) {
    var chart = container.highcharts();
    if (chart.isInsidePlot(event.pageX - chart.plotLeft, event.pageY - chart.plotTop)) {
        $("body").css({
            cursor: "crosshair"
        });
    } else {
        $("body").css({
            cursor: "default"
        });
    }
});

Another idea is to utilize chart.plotBackgroundColor option, which creates rect, which can obtain CSS styles:

    chart: {
        zoomType: 'x',
        plotBackgroundColor: "rgba(10,0,0,0)", // dummy color, to create an element
        events: {
            load: function(){
                if(this.plotBackground) {
                    this.plotBackground.toFront().css({ // move on top to get all events
                        cursor: "crosshair"  
                    });
                }
            }
        }
    },

And demo: http://jsfiddle.net/2eje4xxb/2/

Upvotes: 5

Sherin Mathew
Sherin Mathew

Reputation: 1141

Yes it is possible. You can write code to set the cursor style in the mouse events. Please find the jsfiddle here - http://jsfiddle.net/3Lu7bzmn/5/

CSS

.cursorCrossHair{
    cursor : crosshair
}
.cursorDefault{
    cursor : default
}

JS - Shown only specific piece of code which is required to change the cursor. The id of the div used to render the highcharts is called "container". Please refer the jsfiddle to see the full working example.

$('#container').highcharts({
     chart: {
         plotOptions: {
             series: {
                 point: {
                     events: {
                         mouseOver: function () {
                             $("#container").removeClass("cursorDefault").addClass("cursorCrossHair");
                         },
                         mouseOut: function () {
                             $("#container").removeClass("cursorCrossHair").addClass("cursorDefault");
                         }
                     }
                 }
             }
         },

     });
 });

Upvotes: 1

Related Questions