Hightcharts Experiment

HTML

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

JavaScript

$(function () {
    var colors = ['blue','green','yellow','orange','red'];
    var names = ['First', 'Second','Third','Fourth','Fifth'];
 var values = [6,7,9,1,1];
    $('#container').highcharts({

        chart: {
            type: 'column',
        },
        legend: {
            enabled: true,
	    	layout: 'vertical',
    		align: 'right',
			verticalAlign: 'middle',
            labelFormatter: function() {
				return this.name + " - <span class='total'>"+this.y+"</span>"
            }
        },
        title: {
            text: 'Simple Bar Graph'
        },
        xAxis: {
            categories: ['First', 'Second', 'Third', 'Fourth', 'Fifth'],
            allowDecimals: false
        },
        yAxis: {
            allowDecimals: false,
            max: 6000
        },
        plotOptions: {
        column:{
        	dataLabels:{
        		enabled:true,
            overflow:"justify",
            rotation:-90,
            y:-6,
            align:"left"
        	}
        },
            series: {
            grouping:false,  //add to have center align every bar to its corresponding x axis
                events: {
                    legendItemClick: function (x) {
                        var i = this.index  - 1;
                        var series = this.chart.series[0];
                        var point = series.points[i];   

                        if(point.oldY == undefined)
                           point.oldY = point.y;

                        point.update({y: point.y != null ? null : point.oldY});
                    }
                }
            }
        },
        legend: {
        		align: 'right',
        verticalAlign: 'top',
        layout: 'vertical',
        x: 0,
        y: 80,
        padding: 3,
        itemMarginTop: 5,
        useHTML:true,
        itemMarginBottom: 5,
            labelFormatter: function(){
                
                return '<div style="width:100px;"><span style="float:left; margin-left:10px">' +...