Histogram

Histogram with optional spline overlay.

by amrutaJgtp

HTML

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

JavaScript

var chart = new Highcharts.Chart({
chart: {
        renderTo:'container',
        defaultSeriesType:'column',
        borderWidth:0,
        backgroundColor:'#eee',
        borderWidth:1,
        borderColor:'#ccc',
        plotBackgroundColor:'#fff',
        plotBorderWidth:1,
        plotBorderColor:'#ccc'
    },
    credits:{enabled:false},
    exporting:{enabled:false},
    title:{text:'Histogram Test'},
    legend:{
        //enabled:false
    },
    tooltip:{
        borderWidth:1,
        formatter:function() {
            return '<b>Range:</b><br/> '+ this.x +'<br/>'+
            '<b>Count:</b> '+ this.y;
        }
    },
    plotOptions:{
        column:{
            shadow:false,
            borderWidth:.5,
            borderColor:'#666',
            pointPadding:0,
            groupPadding:0
        }
    },
    xAxis:{
        categories: ['>10 <=15','>15 <=20','>20 <=25','>25 <=30','>30 <=35','>35 <=40','>40 <=45','>45 <=50','>50 <=55','>55 <=60','>60 <=65'],
        labels:{
          
            y:40,
            style: {
                fontSize:'10px',
                fontWeight:'normal',
                color:'#333'
            },
        },
        lineWidth:0,
        lineColor:'#999',
        tickLength:70,
        tickColor:'#ccc',
    },
    yAxis:{
        title:{text:''},
        //maxPadding:0,
        gridLineColor:'#e9e9e9',
        tickWidth:1,
        tickLength:3,
        tickColor:'#ccc',
        lineColor:'#ccc',
        tickInterval:25,
        //endOnTick:false,
    },
    series: [{
        name:'Bins',
        data: [10,0,13,9,14,0,23,66,47,14,5],
    }]
});