Can’t resize ChartJs when printing or in PDF

I have some troubles to have a correct size for my charts when I want to print them.
The charts are responsive in the page as it is supposed to be,
Responsive chart

but when I want to print or convert in PDF my charts the chart is out of the container depending on the size of the screen that was displaying the page.
Chart out of his container

I’m really stuck on this and I really don’t know how to fix this.

Here is how my chart is made:

function graph_config(data_gr, hours_gr, minval, maxval){
Chart.defaults.color = "black";

let data = {
    labels: hours_gr,
    datasets: [{
        backgroundColor: "black",
        borderColor: "black",
        borderWidth: 1,
        pointHoverBackgroundColor: "red",
        pointHoverBorderColor: "red",
        data: data_gr,
    }]
};

let horizontalLine = {
    id: 'horizontalLine',

    beforeDraw(chart, args, options) {
        const {ctx, chartArea: {top, right, bottom, left, width, height},scales:
            {x, y}} = chart;
        ctx.save();

        ctx.strokeStyle = 'green';
        ctx.setLineDash([5, 10]);
        ctx.strokeRect(left, y.getPixelForValue(minval), width, 0.3);
        ctx.textAlign = 'center';
        ctx.font = '12px Arial';
        ctx.fillStyle = 'green';
        ctx.textAlign = 'left';
        ctx.fillText('Min', x.right - 25, y.getPixelForValue(minval) - 5);
        ctx.strokeStyle = 'red';
        ctx.strokeRect(left, y.getPixelForValue(maxval), width, 0.3);
        ctx.textAlign = 'center';
        ctx.font = '12px Arial';
        ctx.fillStyle = 'red';
        ctx.textAlign = 'left';
        ctx.fillText('Max', x.right - 25, y.getPixelForValue(maxval) - 5);
        ctx.restore();
    }
};

let options_interval = getInterval();

let config = {
    borderWidth: 10,
    type: 'line',
    data: data,
    options: {
        scales: {
            x: {
                type: 'time',
                time: options_interval
            }
        },
        interaction:{
            intersect : false,
            mode:'index',
        },
        plugins: {
            legend: {
                display: false
            },
            horizontalLine: {
            },
        },
        elements: {
            point:{
                radius: 0
            }
        },
        responsive:true,
        maintainAspectRatio: false,
    },
    plugins: [horizontalLine]
};

return config

"<div class="card text-black card-container"> " +
                    "<span id='Title" + j +"' style="padding-bottom: 1em; font-weight: 800;"><i class="fas fa-spinner fa-spin"></i> Loading...</span>" +
                        "<div class='card-body'> " +
                            "<div id='canvas-wrap' style='height: 18rem'> " +
                            "<canvas id='myChart" + j +"'></canvas> " +
                        "</div> " +
                    "</div> " +
                "</div> " +

If you have some ideas about this please help me.
Thank you.