I am stuck in a problem and cannot find how to move on. I am trying to create a chart using tall charts. But I can’t get the correct percentage values on the left side and stylize the bottom and left lines a bit so that they look on the first screen. The same problem as the checkmark under the bottom marks, it seems that they cannot be moved to the top, so they will overlap the bottom line in the middle.
Here's how it should be:

This is what I have done so far:

This is what my code looks like: http://jsfiddle.net/8Wp7k/
And graphics card settings:
$j('.investor-calculator .chart-container .chart').highcharts({
title: {
text: '',
x: -20 /*center*/
},
background: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, 'rgb(96, 96, 96)'],
[1, 'rgb(16, 16, 16)']
]
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['', '', '', '', '', ''],
tickmarkPlacement: 'on',
tickColor: '#d2d2d2',
gridLineColor: '#eee',
tick: false
},
yAxis: {
title: null,
tickPosition: 'inside',
gridLineDashStyle: 'longdash',
lineColor: '#d2d2d2',
lineWidth: 1
},
tooltip: {
valueSuffix: null
},
series: [{
name: 'Some Name',
data: [1.0, 6.9, 2.5, 8.5, 1.0, 12.5]
}],
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
colors: ['#e0502f'],
plotOptions: {
series: {
lineWidth: 4,
marker: {
enabled: false
}
}
}
});