Highchart No Label Columns
by Mabuti
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 300px; margin: 0 auto;"></div>
JavaScript
$(function () {
var start = 51;
var data = [51,51,23,15,30,38,49,56,64,74,77,64,79,84,96];
var series = [];
var colors = ['#98d4e2','#ead98f','#e89d60','#d65554'];
for(var i = 0, color, dataValue; i < data.length; i++) {
dataValue = parseInt(data[i])-start;
if(dataValue === 0) {
dataValue = 0.25;
}
color = data[i] <= 25 ? colors[0] : data[i] <= 50 ? colors[1] : data[i] <= 75 ? colors[2] : colors[3];
series.push(
{
y: dataValue,
color: color,
name: data[i]
}
);
}
$('#container').highcharts({
chart: {
type: 'column'
},
tooltip: {
enabled: false
},
title: {
text: ''
},
xAxis: {
title: '',
lineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
gridLineWidth: 0
},
yAxis: {
title: '',
labels: {
enabled: false
},
gridLineWidth: 0
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.name}%'
},
groupPadding: 0
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [{
data: series
}]
});
});