CODEWITHSUNDEEP
highcharts
inadcod
inadcod

Reputation: 341

Highcharts add an image to that chart with an onClick event attached to it

I have created a chart where I've added an image. Now when I click this image I want to set the yAxis max to a specific point, and when I click it again to reset the yAxis to the original values. This is the jsfiddle for it: http://jsfiddle.net/inadcod/TynwP/ I have managed to add the image, to add a click event to the image, but it's as far as I got. Can anyone help me out with this? Thanks!

Upvotes: 1

Views: 3254

Answers (1)

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

There are two ways to do what you want.

First way:

The problem is that it's not possible to update chart options and then redraw to get it updated, you have to destroy and then create it again like the following.

So, for this you can store your chart options into a var and then pass as parameter.

// inside options
    load: function() {
        this.renderer.image('http://inadcod.com/img/zoom.png', 70, 10, 28, 28)
        .on('click', function() {
            if(options.yAxis.max) {
                delete options.yAxis.max; // return to default
            } else {
                options.yAxis.max = 25;
            }
            chart = new Highcharts.Chart(options);                        
        })
        .css({
            cursor: 'pointer',
            position: 'relative',
            "margin-left": "-90px",
            opacity: 0.75
        }).attr({
            id: 'myImage',
            zIndex: -100
        }).add();
    }

Demo

Second way:

redraw isn't called if you just update axis data like the following.
chart.yAxis[0].max = 25;, that's why I suggested the way above.
But if you set chart.yAxis[0].isDisty = true; and call chart.redraw();, it will work. You can see my demo bellow.

// inside chart options
    load: function() {
        this.renderer.image('http://inadcod.com/img/zoom.png', 70, 10, 28, 28)
        .on('click', function() {
            var axis = chart.yAxis[0];
            axis.max = 25;
            axis.isDirty = true;
            chart.redraw();
        })
        .css({
            cursor: 'pointer',
            position: 'relative',
            "margin-left": "-90px",
            opacity: 0.75
        }).attr({
            id: 'myImage', // your image id
            zIndex: -100
        }).add();
    }

Demo

Upvotes: 3

Related Questions