I would like to have my xAxis not below my chart but in the middle (on the yAxis zero value).
And I would like also to have the xAxis labels :
- above the xAxis when it is a negavite value
- below the xAxis when it is a positive value
Here is what I have : jsFiddle
$(function () {
$('#container').highcharts({
xAxis: {
showFirstLabel : true,
showLastLabel : true,
type : "category",
tickLength : 0,
lineWidth : 2
},
series: [{
data: [
{name : 'T1', y: 123},{name : 'T2', y: 152},{name : 'T3', y: -120},{name : 'T4', y: 0},{name : 'T5', y: 142},{name : 'T6', y: 212}
],
type : 'column'
}]
});
});
- Does it exist an easy way to do this ?
- If not, how to do this ?
Thanks.
Solution :
Thanks to Pawel Fus (thanks, thanks, thanks), here is the solution for my problem : jsFiddle.
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: function () {
var xAxis = this.xAxis[0];
var serie = this.series[0];
for (var current_tick in xAxis.ticks) {
var tick = xAxis.ticks[current_tick];
if(serie.data[current_tick]){
if (serie.data[current_tick].y > 0) {
tick.label.attr({
y: tick.label.y + 18
});
}
}
}
}
}
},
xAxis: {
showFirstLabel : true,
showLastLabel : true,
type : "category",
tickLength : 0,
crossing:0,
opposite:true,
lineWidth : 2
},
series: [{
data: [
{name : 'T1', y: 123},{name : 'T2', y: 152},{name : 'T3', y: -120},{name : 'T4', y: 0},{name : 'T5', y: 142},{name : 'T6', y: 212}
],
type : 'column'
}]
});
});