$(function () {
 $('#container').highcharts({
   chart: {
     type: 'column'
   },
   title: {
     text: 'Space Overview'
   },
   xAxis: {
     categories: ['a', 'b', 'c', 'd']
   },
   yAxis: {
     min: 0,
     title: {
       text: 'Total Space (%)'
     }
   },
   tooltip: {
     pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
     shared: true
   },
   plotOptions: {
     column: {
       stacking: 'percent'
     },
     series: {
       cursor: 'pointer',
       point: {
         events: {
           click: function() {
             location.href = this.options.url;
           }
         }
       }
     }
   },
   subtitle: {
     text: '+ Items relate to items in the dispay cabinets.',
     align: 'left',
     x: 10
   },
   series: [{
     name: 'Free',
     data: [1498, 1123, 556, 1176],
     url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d']
   }, {
     name: 'Used',
     data: [1234,233,23,759],
     url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d']
   }]
 });