Histogram Chart

by jeremyfrank

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div class="chart-container">
    <div id="histogram" class="chart-visual"></div>
    <div class="chart-tooltip"></div>
</div>

CSS

body {
    background: #eee;
    padding: 10px 30px;
}
.chart-container {
    border: 20px solid #fff;
    position: relative;
}
.chart-visual {
    height: 320px;
    min-width: 300px;
}
.chart-tooltip {
    -webkit-filter: drop-shadow(0 0 5px rgba(0,0,0,.3));
       -moz-filter: drop-shadow(0 0 5px rgba(0,0,0,.3));
        -ms-filter: drop-shadow(0 0 5px rgba(0,0,0,.3));
         -o-filter: drop-shadow(0 0 5px rgba(0,0,0,.3));
            filter: drop-shadow(0 0 5px rgba(0,0,0,.3));
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    color: #333;
    font: 12px Arial;
    left: -999px;
    margin-top: -25px;
    min-height: 14px;
    padding: 10px;
    position: absolute;
    bottom: -999px;
    white-space: nowrap;
    width: auto;
}
.chart-tooltip:before,
.chart-tooltip:after {
    border: 10px solid transparent;
    content: '';
    display: inline-block;
    margin-left: -10px;
    left: 50%;
    position: absolute;
    top: 100%;
}
.chart-tooltip:before {
    border-top-color: #aaa;
}
.chart-tooltip:after {
    border-top-color: #fff;
    border-width: 9px;
    margin-left: -9px;
}

JavaScript

$(function() {
    var $tooltip = $('.chart-tooltip');
    var chartHeight = $('.chart-visual').height();
    var resetTooltip = function() {
        $tooltip.empty().hide();
    };
    var setupTooltip = function(point, tpl) {
        $tooltip.html(tpl).css({
            display: 'block',
            left: point.plotX + 'px',
            marginLeft: $tooltip.outerWidth()/-2,
            bottom: chartHeight - point.plotY + 10 + 'px'
        });
    };
    
    var chart = new Highcharts.Chart({
        
        chart: {
            borderRadius: 0,
            spacingBottom: 0,
            spacingLeft: 0,
            spacingRight: 0,
            spacingTop: 0,
            renderTo: 'histogram',
            events: {
                click: function() {                        
                    resetTooltip();
                }
            }
        },

        title: {
            text: ""
        },
        
        credits: {
            enabled: false
        },

        legend: {
            enabled: false
        },
        
        tooltip: {
            enabled: false
        },

        xAxis: {
            categories: ['1.0', '0.95', '0.9','0.85',  '0.8', '0.75', '0.7', '0.65', '0.6', '0.55', '0.5', '0.45', '0.4', '0.35', '0.3', '0.25', '0.2', '0.15', '0.1', '0.05'],
            plotBands: [{
                from: 17.5,
                to: 19.5,
                color: '#f3f3f3'}]
        },

        yAxis: [{ 
            // Unreviewed Documents Line
            title: {
                text: ""
            },
            gridLineWidth: 0,
            type: "logarithmic",
            labels: {
                enabled: false
            }
        }, { 
            // Matches, Likely Matches, In Other Categories Bars
            title: {
                text: ""
            },
            gridLineWidth: 0,
            labels: {
                enabled: false
            }
        }],

        plotOptions: {
            column: {
                stacking:...