Highcharts Demo

author(s): Torstein Hønsi

by kawaljeetdhesi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="outer">
	<div class="container" id="container1"></div>
	<div class="container" id="container2"></div>
	<div class="container" id="container3"></div>
</div>

CSS

#outer {
	max-width: 420px;
	margin: 1em auto;
}
.container {
	width: 200px;
    height: 200px;
    display: inline-block;
}

JavaScript

/**
 * A Highcharts plugin to display the tooltip in a separate container outside the chart's
 * bounding box, so that it can utilize all space available in the page.
 */
(function (H) {

    var offset = 6;

    H.wrap(H.Tooltip.prototype, 'getLabel', function (proceed) {

        var chart = this.chart,
            options = this.options,
            chartRenderer = chart.renderer,
            container;

        if (!this.label) {

            // Add a HTML container, otherwise useHTML won't work
            this.container = container = H.doc.createElement('div');
            container.style.position = 'absolute';
            container.style.top = '-9999px';
            container.style.pointerEvents = 'none';

            H.doc.body.appendChild(container);

            this.renderer = new H.Renderer(this.container, 0, 0);
            chart.renderer = this.renderer;
            proceed.call(this, chart, options);
            chart.renderer = chartRenderer;

            this.label.attr({
                x: offset,
                y: offset
            });
            this.label.xSetter = function (value) {
                container.style.left = value + 'px';
            };
            this.label.ySetter = function (value) {
                container.style.top = value + 'px';
            };
        }
        return this.label;
    });

    H.wrap(
        H.Tooltip.prototype,
        'getPosition',
        function (proceed, boxWidth, boxHeight, point) {
            var chart = this.chart,
                pos,
                doc = H.doc,
                documentElement = doc.documentElement,
                plusWidth = documentElement.clientWidth - chart.chartWidth,
                plusHeight = Math.max(
                    doc.body.scrollHeight, documentElement.scrollHeight,
                    doc.body.offsetHeight, documentElement.offsetHeight,
                    documentElement.clientHeight
                ) - chart.chartHeight;

            point.plotX +=...