I'm having some difficulty navigating the AmCharts documentation. The major problem I seem to be running into is finding information on changing the default font when the pdf file is being created through the export, which is built into the licensed AmCharts version 3.20.3. I want it to be Open Sans and not Roboto (the pdfMake default).
export : {
enabled : true,
drawing : {
menu : [{
class : 'export-drawing',
menu : [{
label : translations['ADD'] + ' ...',
menu : [{
label : translations['PDF_ANNOTATE_SHAPE'] +' ...',
action : 'draw.shapes'
}, {
label : translations['PDF_ANNOTATE_TEXT'],
action : 'text'
}]
}, {
label : translations['PDF_ANNOTATE_CHANGE'] + ' ...',
menu : [{
label : translations['PDF_ANNOTATE_MODE'] + ' ...',
action : 'draw.modes'
}, {
label : translations['PDF_ANNOTATE_COLOR'] + ' ...',
action : 'draw.colors'
}, {
label : translations['PDF_ANNOTATE_SIZE'] + ' ...',
action : 'draw.widths'
}, {
label : translations['PDF_ANNOTATE_OPACITY'] + ' ...',
action : 'draw.opacities'
}, 'UNDO', 'REDO']
}, {
label : translations['PDF_EXPORT'],
format : 'PDF',
fileName : translations['MY_TEAM_PS'],
content : [
{
image : 'reference',
alignment : 'center',
fit : [769.89, 523.28] // fit image to A4
},
reportDataTable
],
pageOrientation : 'landscape',
styles : {
tableHeader : {
fontSize : 8,
bold : true
},
subheader : {
fontSize : 12,
bold : true
},
tableCell : {
fontSize : 8,
bold : false
},
quote : {
italics : true
},
small : {
fontSize : 8
}
}
}, 'CANCEL']
}]
},
Their documentation seems to suggest that I should simply be able to add pdfMake : {} just inside of export and then do what I need to do there to change the font. Based on the documentation for pdfMake, it seems like I would need to do something along the lines of this:
export : {
pdfMake : {
fonts : {
OpenSans : {
normal : 'OpenSans-Regular.ttf',
bold : 'OpenSans-Semibold.ttf',
italics : 'OpenSans-Italic.ttf',
bolditalics : 'OpenSans-BoldItalic.ttf'
}
}
},
enabled : true,
drawing : {
menu : [{
class : 'export-drawing',
menu : [{
label : translations['ADD'] + ' ...',
menu : [{
label : translations['PDF_ANNOTATE_SHAPE'] +' ...',
action : 'draw.shapes'
}, {
label : translations['PDF_ANNOTATE_TEXT'],
action : 'text'
}]
}, {
label : translations['PDF_ANNOTATE_CHANGE'] + ' ...',
menu : [{
label : translations['PDF_ANNOTATE_MODE'] + ' ...',
action : 'draw.modes'
}, {
label : translations['PDF_ANNOTATE_COLOR'] + ' ...',
action : 'draw.colors'
}, {
label : translations['PDF_ANNOTATE_SIZE'] + ' ...',
action : 'draw.widths'
}, {
label : translations['PDF_ANNOTATE_OPACITY'] + ' ...',
action : 'draw.opacities'
}, 'UNDO', 'REDO']
}, {... etc}
Am I on the right track at all with this line of thought? I cannot seem to find anyone who has done this before, and it's quite confusing. Any help would be greatly appreciated...
You need to create a custom vfs_fonts.js file which contains your fonts in base64. Bartek the creator of pdfMake wrote a neat step-by-step tutorial how to create that file.
Once you've created your custom font file, you need to include pdfMake.js manually into your HTML document and add your custom vfs_fonts.js file behind it. Then add a reference to window.pdfMake.fonts otherwise it uses it's default font definition of "Roboto".
<script src="./amcharts/plugins/export/libs/pdfMake/pdfMake.js" type="text/javascript"></script>
<script src="vfs_fonts.js" type="text/javascript"></script>
<script type="text/javascript">
pdfMake.fonts = {
"Open Sans": {
"normal": 'OpenSans-Regular.ttf',
"bold": 'OpenSans-Bold.ttf',
"italics": 'OpenSans-Italic.ttf',
"bolditalics": 'OpenSans-BoldItalic.ttf'
}
}
</script>
Your custom font is ready to use, only missing thing is your export config adaption like following:
AmCharts.makeChart( {
"export": {
"enabled": true,
"pdfMake": {
defaultStyle: {
font: "Open Sans"
}
},
},
...
} );
In case you've some troubles generating the vfs_fonts.js file I've created one for you - download vfs_fonts.js (Used: https://www.google.com/fonts/specimen/Open+Sans)