Highcharts - Placing Content On Top of Chart

author(s): Torstein Hønsi

by bizamajig

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div>
    <div id="upper"></div>
    <div id="container" style="height: 300px"></div>
</div>

CSS

#upper
{
    width: 150px;
    height: 150px;
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 40;
    background-color: #ffff00;
    
}
.highcharts-container 
{
    overflow: visible !important;
}
g.highcharts-tooltip {
    visible: none;
    display: none;
}
#my-tooltip 
{
    position: relative;
    z-index: 50;
    border: 2px solid rgb(0, 108, 169);
    border-radius: 5px;
    background-color: #ffffff;
    padding: 5px;
    font-size: 9pt;
}

JavaScript

$(function() {
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'scatter'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        tooltip: {
            shared: false,
            useHTML: true,
            footerFormat: '</table> <span>"new text"</span></div>',
            valueDecimals: 2
        },
        
        plotOptions: {
            scatter: {
                tooltip: {
                    headerFormat: '<div id="my-tooltip"><small>{point.key}</small><table>',
                    pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
                        '<td style="text-align: right"><b>{point.y} EUR</b></td></tr>'
                }
            }
        },
        series: [{
            name: 'Short',
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
        {
            name: 'Long named series',
            data: [129.9, 171.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 195.6, 154.4].reverse()}]

    });
});