Highcharts Demo

author(s): Torstein Hønsi

by ian_smithz

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" class="custom-tooltip" style="width: 100px; margin:0 auto"></div>

CSS

.custom-tooltip .highcharts-container {
    overflow: visible!important;
}
.custom-tooltip .highcharts-container .highcharts-tooltip {
    border: 2px solid;
    .border-radius(2px);
    padding: 4px 6px;
    background-color: #fff;
    background-color: rgba(255, 255, 255, .8);
    opacity: 0.9;
    visibility: hidden;
}

.custom-tooltip .highcharts-container .highcharts-tooltip span {
    position: static!important;
}

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column',
            width: 100,
            height: 70
        },
        title: {
            text: null  
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar']
        },
        credits: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        tooltip: {
            borderWidth: 0,
            useHTML: true,
            formatter: function () {
                 var point = this.point,
                     series = point.series
                     color = point.color || series.color,
                     $tooltip = $(series.chart.container)
                                 .find('.highcharts-tooltip');
                
                $tooltip.css('border-color', color);
                
                return 'The value for <b>'+ this.x +
                    '</b> is <b>'+ this.y +'</b>';                
            },
            positioner: function (labelWidth, labelHeight, point) {
                var width = (this.chart.chartWidth / 2) - (labelWidth / 2);

            	return { 
                    x: width,
                    y: this.chart.chartHeight
                };
            }
        },
        yAxis: {
            title: {
                text: null
            },
            labels: {
                enabled: false
            }
        },
        series: [{
            name: 'Cost of Goods Sold',
            data: [29.9, 71.5, 106.4]        
        }]
    });
});