JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div class='cont' style="max-width: 510px; height: 400px; margin: 0 auto">
    <img src='http://www.highcharts.com/demo/gfx/snow.png' class='img1' style="min-width: 100px; height: 100px; margin: 0 auto">
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>

CSS

.cont {
    overflow: hidden;
}
.img1 {
    position:relative;
    left:500px;
    top: 10px;
    z-index: 2;
    opacity: 0;
}

JavaScript

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

    $('.img1').on("slideOut", function () {
        $(this).animate({
            opacity: 0,
            left: -550
        });
    });
    $('#container').highcharts({
        plotOptions: {
            line: {
                stickyTracking: false
            },
        },
        title: {
            text: 'Dive Log',
            x: -20
        },
        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.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, {
                y: 22,
                events: {
                    mouseOver: function () {
                        $(".img1").trigger("slideIn");
                    },
                    mouseOut: function () {
                        $(".img1").trigger("slideOut");
                    },
                }
            },
            8.6, 2.5]
        }],

    });
});