How to resize CHARTJS scatter chart to match PDF sizing?

Question

I am struggling with ChartJS sizing, I have tried a lot of options now... And all pretty unsuccessful. With the following options I have achieved at least the desired position and sizing of my chart. The data is all correct, however it is showing all squashed... . (The data is being pushed with handlebars from my backend ...). Now I want to get my data "unsquashed". I am converting this data into a PDF with puppeteer library, however I do not believe that is the problem, as I have seen in certain settings my data as required... . Thanks a lot in advance!

Desired CHART look

Actual...

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .test { 
        width: 100%;
        max-width: 400;
        height: 225;
    }
</style>
<div class="container">
    <div class="test">
        <canvas id="myChart"></canvas>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    var envelope = {{{envelopeJSON}}};
    var utility = {{{utilityJSON}}};
    var mb = {{{mbJSON}}};
    new Chart("myChart", {
        type: "scatter",
        data: {
            datasets: [
                {
                    label: "{{airplanename}}",
                    pointRadius: 4,
                    pointBackgroundColor: "rgb(0, 0, 255)",
                    data: envelope,
                    showLine: true,
                    fill: true,
                    borderColor: "rgb(0, 150, 255)", 
                    backgroundColor: "rgba(0, 0, 255, 0.2)"
                },
                {
                    label: "Utility",
                    pointRadius: 4,
                    pointBackgroundColor: "rgb(255, 36, 0)",
                    data: utility,
                    showLine: true,
                    fill: true,
                    borderColor: "rgb(255, 36, 0, 0.5)", 
                    backgroundColor: "rgba(255, 36, 0, 0.2)" 
                },
                {
                    label: "Data",
                    pointRadius: 4,
                    pointBackgroundColor: "rgb(0, 0, 255)",
                    data: mb,
                    showLine: true,
                    borderColor: "rgb(0, 150, 255)", 
                }
            ]
        },
        options: {
            //responsive: false,
            //maintainAspectRatio: false,
            legend: { display: false },
            scales: {
                xAxes: [{ ticks: { min: 80, max: 90 } }],
                yAxes: [{ ticks: { min: 1000, max: 2500 } }],
            }
        }
    });
});
</script>

I have tried many configurations, the variables: responsive and maintainaspectratio I have made as a comment, I am not sure what conifguration is suitable for this problem... .

Answer 1

The problem is that chartJS is trying to display DYNAMIC Animated Data that start from the bottom the top, however when generating a PDF it takes the first instant resulting in a frozen DATA set at the bottom of the chart... : In ChartJS you will have to set Options: animation: duration: 0 like this:

options: {
        legend: { display: false },
        animation: {
        duration: 0 
    }