Search code examples
javascriptnode.jsimagehighcharts

How to get an image of the highcharts chart in node.js?


With highcharts, we have a built-in button to download the current chart (example: http://www.highcharts.com/demo/, this button: arrow). We can save it as PNG, JPEG, PDF or SVG.

Instead of downloading it on client side i want to download image on server and sent that image to particular user through email How could I do that using Node.js ?

enter image description here

I got this solution, but getting TypeError: chartExporter.export is not a function:-

const fs = require("fs");
const chartExporter = require("highcharts-export-server");

chartExporter.initPool();

let chartOptions = highchart chart option

chartExporter.export({
    type: "svg",
    outfile: "./output-file.svg",
    options: chartOptions
}, (err, res) => {
    console.log(`The chart has been succesfully generated as SVG at ${res.filename}!`);

    chartExporter.killPool();
});

How to resolve this issue or anyone has any other solution to fulfil my requirement

**

Note :- Below solution is working for me but got this error when i try to get image second time

**

enter image description here


Solution

  • I think you got some wrong documentation the name of function is startExport Please try the code below

    const exporter = require('highcharts-export-server');
    const fs = require('fs')
    const path = require('path')
    
    async function run() {
        const data = {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
            series: [{
                name: 'Los Angeles',
                data: [6, 7, 7, 7, 6]
            },{
                name: 'London',
                data: [3, 4, 3, 4, 3]
            }]
        };
    
        const exportSettings = {
            export: {
                type: 'png',
                options: {
                    chart: {
                        type: 'line'
                    },
                    title: {
                        text: 'My Chart'
                    },
                    xAxis: {
                        categories: data.categories
                    },
                    yAxis: {
                        title: {
                            text: 'Temperature (°C)'
                        }
                    },
                    series: data.series
                }
            }
        };
    
        const options = exporter.setOptions(exportSettings);
    
        await exporter.initPool(options);
    
        exporter.startExport(exportSettings, function (res, err) {
            if (err) {
                console.error('Error in exporting chart:', err);
                return;
            }
            const binaryData = Buffer.from(res.data, 'base64');
            exporter.killPool();
    
            const savepath = path.join(__dirname, './', 'output.png')
            fs.writeFile(savepath, binaryData, (err) => {
                if (err) {
                    console.error('Error in writing to image file:', err);
                    return;
                }
                console.log('File written successfully.');
            });
        });
    }
    
    run()
    

    UPDATE:

    To prevent log creation you can set the logging level to 0 in the options object (result of setOptions)

        const options = exporter.setOptions(exportSettings);
        options.logging.level = 0
    

    Regarding the tmp folder, it is used by highcharts-export-server to keep the temp files and resources generated during processing but unfortunately the package does not offer a way to change the location of tmp folder as of now (although a pending PR is there in the official github repo so keep an eye on it)