How to remove the gap between yAxis and data? - highcharts

Question

I'm styling up a Highchart to match an existing design. I'm however left with a gap between the yAxis and the start of the data. See the example: http://jsfiddle.net/MDGkd/
How can I get the xAxis to start on the yAxis?
var colors = ['#77217b', '#9c50b1', '#e1d0e6', '#f5f0f7', '#f1e9f4'];
$(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'area',
marginLeft: 80,
marginBottom: 80
},
colors: colors,
legend: {
borderRadius: 0,
borderWidth: 0,
itemStyle: {
fontFamily: 'Helvetica',
color: '#000000',
fontSize: '16px'
}
},
title: {
text: 'Historic and Estimated Worldwide Population Distribution by Region',
style: {
fontFamily: 'Helvetica',
color: '#000000',
fontWeight: 'bold',
fontSize: '20px'
},
margin: 45
},
subtitle: {
text: 'Source: Wikipedia.org',
style: {
fontFamily: 'Helvetica',
color: '#000000',
fontSize: '16px'
},
y: 40
},
xAxis: {
startOnTick: true,
min: 0,
max: 6,
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
lineColor: '#000000',
tickmarkPlacement: 'on',
tickLength: 14,
tickWidth: 1,
tickColor: '#000000',
title: {
enabled: false
},
labels: {
style: {
fontFamily: 'Helvetica',
color: '#000000',
fontSize: '12px'
},
align: 'left',
x: -3,
y: 26
}
},
yAxis: {
lineColor: '#000000',
lineWidth: 1,
tickLength: 24,
tickWidth: 1,
tickColor: '#000000',
gridLineWidth: 1,
gridLineColor: '#e8d4ec',
title: {
text: 'Percent',
style: {
fontFamily: 'Helvetica',
color: '#000000'
},
x: -40
},
labels: {
style: {
fontFamily: 'Helvetica',
color: '#000000',
fontSize: '12px'
},
align: 'left',
x: -24,
y: 16
}
},
tooltip: {
backgroundColor: '#000000',
borderRadius: 0,
borderWidth: 0,
shadow: false,
style: {
fontFamily: 'Helvetica',
color: '#ffffff',
fontSize: '11px'
},
//pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function (i, point) {
s += '<br/>' + point.series.name + ': <b>' + Highcharts.numberFormat(point.percentage, 1) + '%</b> (' + point.y + 'millions)';
});
return s;
},
shared: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#8f3ba7',
lineWidth: 2,
marker: {
lineWidth: 0,
lineColor: null,
fillColor: '#000000',
symbol: 'circle'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}]
});
$.each(chart.series, function (i, val) {
console.log(i, colors[i]);
this.legendSymbol.attr('rx', 0);
this.legendSymbol.attr('ry', 0);
this.legendSymbol.attr('width', 16);
this.legendSymbol.attr('height', 16);
this.legendSymbol.attr('y', 5);
this.legendSymbol.attr('fill', colors[i]);
});
console.log(chart);
});

Answer 1

You want it to look like this?
I achieved this by adjusting the startOnTick and min values.
xAxis: {
startOnTick: false,
min: 0.5,
Fiddle here.