CODEWITHSUNDEEP
javascriptcsshighcharts
Julian Lettner
Julian Lettner

Reputation: 3669

Highcharts: Change cursor of plot area

What is a good way to hint to the user that the chart is zoomable? I made my chart zoomable (chart: { zoomType: 'xy' }) and now I want to signal this to the user by changing the cursor for the plot area (and just the plot area).

One can change the cursor for series / the actual graph via:

plotOptions: {
  series: {
    cursor: 'zoom-in'
  }
}

I want to do the opposite thing: change it for the background / plot area only.
Not the actual graph. Not the legend. Not outside the axis lines, etc.

Upvotes: 1

Views: 1322

Answers (4)

Julian Lettner
Julian Lettner

Reputation: 3669

Thanks to Luxx's help I found an even easier way to achieve this.

chart: {
  // ...
  backgroundColor: "transparent",
  plotBackgroundColor: "transparent", // Needs to be set for chart.plotBackground to be defined.
  zoomType: "xy",
  events: {
    load: function() { this.plotBackground.htmlCss({ cursor: "zoom-in" }) }
  }
}

Example: http://jsfiddle.net/y7dy6wLn/2/

Upvotes: 2

Luxx
Luxx

Reputation: 392

You can change the cursor of the background. You can use the SVGElement.prototype.htlmCss() function included in highcharts. One way to call it is by using the on-load event:

chart: {
    /* some other code */
    events: {
        load: function () {
            this.chartBackground.htmlCss({cursor:'zoom-in'});
        }
    }
}

Example here http://jsfiddle.net/84ek687h/2/

I tested it with Highcharts JS v4.1.8

Edit #1

You should set the background properties like this:

chart:{
    zoomType: 'xy',
    style:{
      cursor:'zoom-in'
    }
 }

Edit #2

The problem, as you mentioned in the comment, is that the plot area does not fill the whole container area. For this you might have to move away from Hichcharts options in total. A solution is to use the plotTop , plotLeft , plotHeight and plotWidth vars of Highcharts and build your own solution. A draft solution I would give is this using jQuery: http://jsfiddle.net/84ek687h/5/

$('#container').mousemove(function(e){
        var cPos = $(this).position(),
            xPos = e.pageX-cPos.left,
            yPos = e.pageY-cPos.top,
            HC   = $(this).highcharts();
        if(yPos > HC.plotTop  && yPos < (HC.plotTop +HC.plotHeight) &&
           xPos > HC.plotLeft && xPos < (HC.plotLeft+HC.plotWidth ) ){
            HC.chartBackground.htmlCss({cursor:'zoom-in'});
        }else{
            HC.chartBackground.htmlCss({cursor:''});
        }
    });

By using the chartBackground.htmlCss() function you make sure it is set for the background only and not if you hover above the series, graphs, etc.

Upvotes: 2

user3471881
user3471881

Reputation: 2724

So, this is not really the question but since I don't know of an option like the one OP asks for, I decided to give my thoughts on the best way to hint to the user that the chart is zoomable, as this question was actually posed.

I think this generally depends on the user and which context the chart will be used, but I like to use text because well - keep it simple and there is little room for misinterpretation.

In Highcharts we can render elements inside the container in a lot of different ways, but for this I just chose the label because I think it's nice

TEXT = chart.renderer.label('Click points to zoom', 70, 50, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
        .css({
            color: '#FFFFFF'
        })
        .attr({
            fill: 'rgba(0, 0, 0, 0.75)',
            padding: 8,
            r: 5,
            zIndex: 6
        });
        TEXT.add();

With this we get a box in the top left corner, which tells the user that points can be clicked to zoom. Now, we don't want it to be there all the time - that's annoying. So we write a function to remove it when the container is clicked.

$('#chart-container').bind('mousedown', function () {
            TEXT.destroy();
        });

Fiddle: http://jsfiddle.net/hx1rg2jr/5/

Upvotes: 1

EugenSunic
EugenSunic

Reputation: 13723

Add the zoomType atribute into the main chart section

zoomType: 'xy'

There is not an option to change the cursor for the background you can just change it for the graph elements as I'm aware.

Here is a fiddle example: Bare in mind that you have to select the area you want to zoom-in (similar like the selection you do on your desktop, not matter which os you are using).

Code:

chart: {
            type: 'line',
            zoomType: 'xy'
        },

Fiddle: http://jsfiddle.net/eugensunic/vhn78x0a/

Upvotes: 0

Related Questions