JavaScript
$(function () {
var labels = ["1A","1B", "1C", "1D", "1E", "1F"];
var sets = [{"name":"Today","data":{"A":[446.7,208.1,112.1,122.8,103.1,15.6]}},{"name":"Yesterday","data":{"A":[446.7,208.1,112.4,123.8,123.1,15.6]}}];
var series = [];
series.push({
name : sets[0].name,
data : sets[0].data["A"],
color: '#FF6F03',
dataLabels: {
enabled: true,
//rotation: -90,
color: '#000',
align: 'center',
x: 0,
y: 0,
style: {
fontSize: '13px',
fontFamily: 'Arial, Verdana, sans-serif',
},
formatter:function() {
if (this.y !== '') {
return this.y;
}
}
}
});
series.push({
name : sets[1].name,
data : sets[1].data["A"],
color: '#008FFF',
dataLabels: {
enabled: true,
//rotation: -90,
color: '#000',
align: 'center',
x: 0,
y: 0,
style: {
fontSize: '13px',
fontFamily: 'Arial, Verdana, sans-serif',
},
formatter:function() {
if(this.y !== '') {
return this.y;
}
}
}
});
$('#container').highcharts({
tooltip: {
formatter: function () {
if (this.y === '' && this.y !== 0) {
return this.series.name + '<br/>' + this.x + ': NO DATA';
}
return this.series.name + '<br/>' + this.x + ': ' + this.y;
}
},
chart: {
type: 'column'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: labels,
title: {
text: null
},
labels: {
style: {
color: '#000',
}
},
lineWidth: 2,
lineColor: '#000',
tickWidth: 2,
tickLength: 12,
tickColor: '#000',
startOnTick: true,
},
yAxis: {
title: {
text: 'test',
align: 'middle',
style: {
color: '#000',
}
},
...