Javascript Highchart Photo Slide

I'm creating a visual chart using the javascript library highchart. Ive created my chart with some fake data. I want to know how to use the chart data to trigger an image slide. So

Solution 1:

You can do it by using events.mouseOver and events.MouseOut on your series points: http://api.highcharts.com/highcharts#plotOptions.series.point.events.mouseOverhttp://api.highcharts.com/highcharts#plotOptions.series.point.events.mouseOut

Inside its callback function you can trigger 'slide' to your image:

events: {
            mouseOver: function () {
                $(".img1").trigger("slideIn");
            },
            mouseOut: function () {
                $(".img1").trigger("slideOut");
            },
        }

and in your jQuery you can watch for your trigger options, for example:

$('.img1').on("slideIn", function () {
        $(this).animate({
            opacity: 1,
            left: 155
        });
    });

    $('.img1').on("slideOut", function () {
        $(this).animate({
            opacity: 0,
            left: -550
        });
    });

example: http://jsfiddle.net/izothep/gf48mmfa/4/