Customizing Highcharts - Tooltip Positioning | A Humble Opinion

http://ahumbleopinion.com/customizing-highcharts-tooltip-positioning Jugal Thakkar http://jugal.me/

by Jugal Thakkar

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.src.js"></script>
<div id="container"></div>

CSS

#container {
    width : 100%;
    height : 400px;
}

JavaScript

(function ($) {
    var chart;
    var chartingOptions = {
        title: {
            text: 'Monthly Average Temperature'
        },
        subtitle: {
            text: '<a href="http://ahumbleopinion.com/category/highcharts/">Highcharts @ A Humble Opinion</a>',
            useHTML: true
        },
        credits: {
            text: "Jugal Thakkar",
            href: "http://jugal.me/",
            position: {
                y: -20
            }
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            }
        },
        series: [{
            name: 'Mumbai',
            data: [24.2, 24.6, 26.7, 28.6, 30.1, 29.0, 27.5, 27.2, 27.4, 28.2, 27.4, 25.6]
        }, {
            name: 'New Delhi',
            data: [14.1, 16.9, 22.4, 28.6, 32.8, 33.8, 31.0, 29.8, 29.2, 26.0, 20.3, 15.4]
        }],
        tooltip: {
            valueSuffix: '°C',            
            positioner: function (labelWidth, labelHeight, point) {
                var tooltipX, tooltipY;
                if (point.plotX + chart.plotLeft < labelWidth && point.plotY + labelHeight > chart.plotHeight) {
                    tooltipX = chart.plotLeft;
                    tooltipY = chart.plotTop + chart.plotHeight - 2 * labelHeight - 10;
                } else {
                    tooltipX = chart.plotLeft;
                    tooltipY = chart.plotTop + chart.plotHeight - labelHeight;
                }
                return {
                    x: tooltipX,
                    y: tooltipY
                };
            }
        }
    };
    chart = $('#container').highcharts(chartingOptions).highcharts();
})(jQuery);