Highcharts - equal spacing between X-axis values having tickPositioner - highcharts

Question

I am passing some values for the x-axis through the tickPositioner attribute. These values are not equally spaced from each other. My requirement is that I want these values to be equally spaced from one another even though they are not having equal difference from each other. Pls see my code below:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
credits: {
enabled: false
},
title: {
text: 'Duration vs Productive Hours'
},
xAxis: [{
allowDecimals: false,
title: {
text: 'Hours'
},
labels: {
rotation: -90,
align: 'right',
style: {
fontSize: '10px'
}
},
tickPositioner: function () {
var pos;
tickPositions = [];
tickStart = 100000;
for (pos = tickStart; pos <= 1000000000; pos *= 10) {
tickPositions.push(pos);
}
return tickPositions;
}
}],
exporting: {
width: 1024,
filename: 'Duration_vs_Productive_Hours',
buttons: {
exportButton: {
menuItems: [{
text: 'Export to PNG image',
onclick: function () {
this.exportChart();
}
}, {
text: 'Export to JPEG image',
onclick: function () {
this.exportChart({
type: 'image/jpeg'
});
}
}, {
text: 'Export to PDF file',
onclick: function () {
this.exportChart({
type: 'application/pdf'
});
}
},
null]
}
}
},
yAxis: [{
min: 0,
tickInterval: 10,
max: 60,
labels: {
formatter: function () {
return this.value;
},
style: {}
},
showEmpty: true,
alternateGridColor: '#f7f7f7',
gridLineColor: '#e7e7e7',
allowDecimals: false,
title: {
text: 'Duration (Months)',
style: {}
}
}],
tooltip: {
crosshairs: true,
formatter: function () {
if (this.series.type == 'line') {
return '' + this.x;
} else {
return '' + this.x + ': ' + this.y;
}
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Other Projects',
type: 'scatter',
data: [
[560000, 13],
[185250, 11],
[3625788, 23],
[1648510, 21],
[265000, 14],
[13000000, 43],
[28000000, 34],
[1567000, 19],
[1190000, 20],
[21000000, 31],
[7000000, 33],
[3805200, 30],
[17000000, 29],
[1503267, 21],
[11332332, 29],
[1485067, 20],
[5000000, 30],
[5400000, 22],
[13000000, 23],
[3810000, 26],
[810000, 18],
[27528218, 26],
[377319, 14],
[840000, 22],
[550000, 13],
[2643142, 26],
[412800, 13],
[2500000, 22],
[4510000, 19],
[523116, 15],
[17600000, 28],
[2500000, 21],
[21000000, 29],
[3500000, 17],
[620000, 15],
[163000000, 46],
[134000000, 41],
[45000000, 39],
[13677454, 31],
[167000000, 52],
[47000000, 33],
[49000000, 38],
[31000000, 38]
]
}, {
name: 'User Data',
type: 'line',
data: [
[4050000, 0],
[4050000, 60]
]
}] });

Answer 1

It sounds like you are trying to make the axis logarithmic. Try setting
xAxis:{
type:"logarithmic"
And remove the. Tickpositioner.
http://api.highcharts.com/highcharts#xAxis.type
If you do this, you get this: http://jsfiddle.net/TsaMA/ with the xAxis ticks equally spaced at 1M, 10M and 100M.
There are two xAxis settings which may: tickInterval and tickPixelInterval.
http://api.highcharts.com/highcharts#xAxis.tickInterval
If you set
tickInterval:1
You get 1M, 10M and 100M, which is the closest I can get to what you want.
tickPixelInterval is useful if you know the width of your chart. If your chart is 1000px wide you can set tickPixelInterval:250.