line shown in bold when exporting Highcharts with Phantomjs - highcharts

Question

I want to export a line chart to my server using Highcharts and Phantomjs, the image is exported but the line is shown in bold:
Here the source code used to generate the chart:
var system = require('system');
var page = require('webpage').create();
var fs = require('fs');
page.injectJs("/var/www/test/public/jquery.js") || (console.log("Unable to load jQuery") && phantom.exit());
page.injectJs("/var/www/test/public/js/highcharts.js") || (console.log("Unable to load Highcharts") && phantom.exit());
page.injectJs("/var/www/test/public/js/exporting.js") || (console.log("Unable to load Exporting") && phantom.exit());
page.onConsoleMessage = function(msg) {
console.log(msg);
}
var width = 550, height = 400;
if(system.args.length == 4) {
width = parseInt(system.args[2], 10);
height = parseInt(system.args[3], 10);
}
console.log("Load result file");
var result = [['Nintendo', 54030288], ['Electronic Arts', 31367739],
['Activision', 30230170], ['Ubisoft', 25318980],
['Microsoft', 24372261], ['Sony Computer Entertainment', 138059037],
['Bethesda Softworks', 10813372], ['Take-Two Interactive', 10012212],
['Others', 33910911]
];
var evalArg = {
width: width,
height: height
};
var svg = page.evaluate(function(opt){
$('body').append('<div id="container"></div>');
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false
},
title: {
text: 'Population ages 65 and over (% of total)',
},
credits: {
position: {
align: 'left',
x: 20
},
text: 'Data from the World Bank'
},
xAxis: {
categories: [
'1980', '1981', '1982', '1983', '1984', '1985',
'1986', '1987', '1988', '1989', '1990', '1991',
'1992', '1993', '1994', '1995', '1996', '1997',
'1998', '1999', '2000', '2001', '2002', '2003',
'2004', '2005', '2006', '2007', '2008', '2009', '2010'
],
labels: {
step: 5
}
},
yAxis: {
title: {
text: 'Percentage %',
}
},
tooltip:{
enabled: false
},
series: [{
name: 'Algeria - 65 and over',
data: [ 9, 9, 9, 10, 10, 10, 10, 11, 11, 12, 12, 12, 13, 13, 14, 14,
15, 15, 16, 17, 17, 18, 18, 19, 19, 20, 20, 21, 21, 22, 23 ],
enableMouseTraking: false
}]
});
console.log('Exported to SVG');
return chart.getSVG();
}, evalArg);
fs.isFile("/var/www/test/autoscripts/sanbi/images/hoc.svg") && fs.remove("/var/www/test/autoscripts/sanbi/images/hoc.svg");
console.log('Saved svg to file');
fs.write("/var/www/test/autoscripts/sanbi/images/hoc.svg", svg);
phantom.exit();
To get what I get I just run this command:
phantomjs test.js
Please any idea to avoid this behaviour? Thanks

Answer 1

Please ensure if you have the newest highcharts-convert.js, because I have tested it on my own phantomJS and works well.