Canvas Render Service [chartjs-node-canvas npm] render to buffer taking too much time to process a chart of chart.js?

I am using chartjs-node-canvas to generate my chart and it is taking too long like 35 seconds to process a chart, and I am wondering, what's wrong or if it's supposed to take this much time?

Here is my app.js (node.js) code :

const fs=require( 'fs' );

// console.time( 'do this', Date.now() );
var now=Date.now();
console.log( "time elapsed0:", Date.now()-now );

const { CanvasRenderService }=require( 'chartjs-node-canvas' );
console.log( "time elapsed1:", Date.now()-now );

// const { time }=require( 'console' );

const width=400;
const height=400;
const configuration={
    type: 'bar',
    data: {
        labels: [ 'Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange' ],
        datasets: [ {
            label: '# of Votes',
            data: [ 12, 19, 3, 5, 2, 3 ],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        } ]
    },
    options: {
        animation: {
            duration: 0 // general animation time
        },
        hover: {
            animationDuration: 0 // duration of animations when hovering an item
        },
        responsiveAnimationDuration: 0, // animation duration after a resize
        scales: {
            yAxes: [ {
                ticks: {
                    beginAtZero: true,
                    callback: ( value ) => '$'+value
                }
            } ]
        }
    }
};
console.log( "time elapsed2:", Date.now()-now );


( async () => {
    console.log( "time elapsed3:", Date.now()-now );
    const canvasRenderService=new CanvasRenderService( width, height );
    console.log( "time elapsed4:", Date.now()-now );
    const imageBuffer=await canvasRenderService.renderToBuffer( configuration );
    console.log( "time elapsed5:", Date.now()-now );
    fs.writeFileSync( "./filePhotto.png", imageBuffer );
    console.log( "time elapsed6:", Date.now()-now );
    console.log( 'reaching' );
    console.log( "time elapsed7:", Date.now()-now );
} )();

console.log( "time elapsed8:", Date.now()-now );

And here is the output of this :

time elapsed0: 0
time elapsed1: 39
time elapsed2: 39
time elapsed3: 39
time elapsed4: 180
time elapsed8: 33718
time elapsed5: 33752
time elapsed6: 33767
reaching
time elapsed7: 33767

While I am rendering on front end using CDN it's taking only 100.

I would really appreciate every help and suggestion.