HIghcharts how to change values and ranges in the Y-axis - highcharts

Question

I am trying to do this chart:
But I can't manage to get the same values and ranges in the Y axis. I need the values to be exactly 100 000, 200 000, 300 000, etc.. how can I achieve that? Please see code. Thanks in advance.
//Grafica 1
$(function () {
var yAxisLabels = [0,100000,200000,300000,400000,500000,600000,700000,800000,900000];
var categories= ['1990', '2000', '2010', '2020', '2030', '2040', '2050'];
Highcharts.chart('grafica1', {
chart: {
type: 'area',
},
title: {
text: ' '
},
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
allowDecimals: false,
min: '0',
title: {
text: 'Percentage'
},
tickPositioner: function() {
return yAxisLabels;
}
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff',
}
}
},
series: [{
name: 'Africa',
data: [100000, 100000, 500000, 900000, 900000, 900000, 555268]
}, {
name: 'L. America',
data: [25020, 296350, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'Oceania',
data: [100000, 296350, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'S-E. Asia',
data: [25020, 100000, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'Japan',
data: [25020, 296350, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'China',
data: [25020, 296350, 100000, 241947, 331402, 443634, 555268]
}, {
name: 'Near East',
data: [25020, 296350, 222809, 100000, 331402, 443634, 555268]
}, {
name: 'Asian CIS',
data: [25020, 100000, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'Russia',
data: [25020, 296350, 222809, 100000, 331402, 443634, 555268]
}, {
name: 'East Europe',
data: [25020, 296350, 100000, 241947, 331402, 443634, 555268]
}, {
name: 'Central Europe',
data: [25020, 296350, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'W. Europe - Nordic',
data: [25020, 100000, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'Nordic',
data: [100000, 296350, 222809, 100000, 331402, 443634, 555268]
}, {
name: 'N. America',
data: [25020, 296350, 222809, 241947, 331402, 100000, 555268]
}]
});
});

Answer 1

Use formatter in yAxis
Fiddle Link
$(function () {
var yAxisLabels = [0,10,20,30,40,50,60,70,80,90,100];
var categories= ['1350', '1400', '1450', '1500', '1550', '1699', '1750'];
Highcharts.chart('grafica1', {
chart: {
type: 'area',
},
title: {
text: ' '
},
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
allowDecimals: false,
min: '0',
title: {
text: 'Percentage'
},
tickPositioner: function() {
return yAxisLabels;
},
labels: {
formatter: function(){
return 100*this.value / $(this.axis.tickPositions).last()[0] + '%';
}
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
split: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff',
}
},
column: { stacking:'percent', pointPadding: 0.2, borderWidth: 0 }
},
series: [{
name: 'Africa',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'L. America',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Oceania',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'S-E. Asia',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Japan',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'China',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Near East',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Asian CIS',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Russia',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'East Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Central Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'W. Europe - Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'N. America',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
Update With New Requirement
Change stacking: 'percentage', to stacking: 'normal',
Fiddle link
so final code
$(function () {
var yAxisLabels = [0,1000000,2000000,3000000,4000000,5000000,6000000,7000000,8000000,9000000];
var categories= ['1990', '2000', '2010', '2020', '2030', '2040', '2050'];
Highcharts.chart('grafica1', {
chart: {
type: 'area',
},
title: {
text: ' '
},
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
allowDecimals: false,
min: '0',
title: {
text: 'Y-AXIS'
},
tickPositioner: function() {
return yAxisLabels;
},
labels: {
formatter: function(){
return this.value;
}
}
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff',
}
}
},
series: [{
name: 'Africa',
data: [100000, 100000, 500000, 900000, 900000, 900000, 555268]
}, {
name: 'L. America',
data: [25020, 296350, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'Oceania',
data: [100000, 296350, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'S-E. Asia',
data: [25020, 100000, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'Japan',
data: [25020, 296350, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'China',
data: [25020, 296350, 100000, 241947, 331402, 443634, 555268]
}, {
name: 'Near East',
data: [25020, 296350, 222809, 100000, 331402, 443634, 555268]
}, {
name: 'Asian CIS',
data: [25020, 100000, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'Russia',
data: [25020, 296350, 222809, 100000, 331402, 443634, 555268]
}, {
name: 'East Europe',
data: [25020, 296350, 100000, 241947, 331402, 443634, 555268]
}, {
name: 'Central Europe',
data: [25020, 296350, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'W. Europe - Nordic',
data: [25020, 100000, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'Nordic',
data: [100000, 296350, 222809, 100000, 331402, 443634, 555268]
}, {
name: 'N. America',
data: [25020, 296350, 222809, 241947, 331402, 100000, 555268]
}]
});
});

Answer 2

A simpler way to go about this is using the tickInterval attribute:
yAxis: {
title: {
text: 'Percent'
},
tickInterval: 10,
labels: {
formatter: function(){
return this.value + '%';
}
}
},
That will force your axis intervals to show up as you requested.
I hope this helps!