Highcharts. Add text at right side and export all

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();

    //...

};