Highcharts. Add text at right side and export all into PDF - pdf

Question

I'm trying to add a text to the right side of the chart. That's working fine. But I want import that text into pdf and/or image files, generated by the exporting library, and right now that is not working. Here is my code: http://jsfiddle.net/mrocha/TQ54c/
$(function () {
/**
* Create the data table
*/
Highcharts.drawTable = function() {
// user options
var tableTop = 420,
colWidth = 60,
tableLeft = 20,
rowHeight = 20,
cellPadding = 2.5,
valueDecimals = 1,
valueSuffix = ' C';
// internal variables
var chart = this,
series = chart.series,
renderer = chart.renderer,
cellLeft = tableLeft;
// draw category labels
$.each(series, function(serie_index, serie) {
renderer.text(
serie.name,
cellLeft + cellPadding,
tableTop + (serie_index + 2) * rowHeight - cellPadding
)
.css({
fontWeight: 'bold'
})
.add();
});
$.each(chart.xAxis[0].categories, function(category_index, category) {
cellLeft += colWidth;
// Apply the cell text
renderer.text(
category,
cellLeft - cellPadding + colWidth,
tableTop + rowHeight - cellPadding
)
.attr({
align: 'right'
})
.css({
fontWeight: 'bold'
})
.add();
$.each(series, function(i) {
renderer.text(
Highcharts.numberFormat(series[i].data[category_index].y, valueDecimals) + valueSuffix,
cellLeft + colWidth - cellPadding,
tableTop + (i + 2) * rowHeight - cellPadding
)
.attr({
align: 'right'
})
.add();
});
});
}
/**
* Draw a single line in the table
*/
Highcharts.tableLine = function (renderer, x1, y1, x2, y2) {
renderer.path(['M', x1, y1, 'L', x2, y2])
.attr({
'stroke': 'silver',
'stroke-width': 1
})
.add();
};
/**
* Create the chart
*/
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
load: Highcharts.drawTable
},
height: 600,
width: 800,
marginBottom: 250
},
title: {
text: 'Average monthly temperatures'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (C)'
}
},
legend: {
y: -170
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
chart.renderer.text('This text should be at the right side of the chart. And should be exported into pdf or image file',
680, 80 ).
css({
width: 100,
color: 'green',
textAlign: 'left'
}).attr({
zIndex: 999
}).add();
});
Any idea? Am I doing something wrong? Thanks in advance!
Oh, by the way, I'm including a table too, and that table is exported nicely to pdf and image files. I just need to include my green text too.

Answer 1

It is caused, becase you add text by renderer, but during export chart is gernerated again without "dynamic" content which you add. So the solution is move using renderer to load event in chart. In your case it is to function drawTable.
Take look at example:
http://jsfiddle.net/mrocha/TQ54c/
Highcharts.drawTable = function() {
//custom text
this.renderer.text('This text should be at the right side of the chart. And should be exported into pdf or image file',
680, 80 ).
css({
width: 100,
color: 'green',
textAlign: 'left'
}).attr({
zIndex: 999
}).add();
//...
};