An attempt to increase the height of the column to place the series name inside the panel and try to reduce the default gap between the series group . There is a "series: []" section, I assume the JSON return function will be populated. I tried many examples from all the generous JSFiddle examples to no avail. I am noob, so please be patient. Any ideas? So far I: http://jsfiddle.net/PeterHanekom/7ue5bkm8/1/
var options = { chart: { renderTo: 'container', type: 'bar' }, colors: ['#00B9B9', '#527CED', '#A7D36B', '#B9B900', '#0097FF', '#400040', '#EA4D00', '#336699', '#8080C0', '#ADA870'], title: { text: 'Cluster Totals', x: -20 //center }, subtitle: { text: 'Dept - Branch', x: -20 }, xAxis: { categories: [] }, yAxis: { min: 0, max: 100, title: { text: 'Percentage' }, labels: { overflow: 'justify' } }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y; } }, legend: { align: 'center', borderWidth: 0 }, plotOptions: { bar: { stacking: 'normal', pointWidth: 20, pointPadding: 0, cursor: 'pointer', point: { events: { click: function() { alert('later drilldown events'); } } dataLabels: { enabled: true, inside:true, useHTML: true, align: 'left', color: 'white', style: { fontWeight: 'bold' }, verticalAlign: 'middle', formatter: function () { if (this.series.name) return '<span style="color:black; height: 25px;">' + this.series.name + ' = ' + this.y + '</span>'; else return ''; } } } }, series: [] } $.getJSON("./services/get360Pivot.php?s_Search=" + sOperatorSearch, function(json) { options.xAxis.categories = json[0]['data']; options.series[0] = json[1]; options.series[1] = json[2]; options.series[2] = json[3]; options.series[3] = json[4]; chart = new Highcharts.Chart(options); });