Estoy creando un gráfico visual utilizando la biblioteca de JavaScript Highchart. He creado mi gráfico con algunos datos falsos. Quiero saber cómo usar los datos del gráfico para activar una diapositiva de imagen. Entonces, si paso el mouse sobre los datos en un cierto punto en el gráfico, una imagen correspondiente se deslizará horizontalmente al centro de la página. Aquí hay algunos de mis códigos javascript hasta ahora.

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

        <div id="container" style="width:100%; height:400px;"></div>
            <script type="text/javascript">
$(function () {
    $('#container').highcharts({
        title: {
            text: 'Dive Log',
            x: -20 //center
        },
        subtitle: {
            text: 'example',
            x: -20
        },
        xAxis: {
            title: {
                text: 'Time',
            categories: ['5', '10', '15', '20', '25', '30',
                '35', '40', '45', '50', '55', '1 hr']
            }
        },
        yAxis: {
            title: {
                text: 'Depth in Meters'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [ {
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }], 

    });
});     
</script>