I'm facing a problem with a chart responsivity. I use chart.js (version 3.6.0) for creating charts.

Here is my code:

panel.html

<div class="container">
    <div class="chart-canvas">
        <canvas id="memberCount" width="auto" height="80px"></canvas>
    </div>
</div>

panel.css

.container {
    border-radius: 6px;
    background-color: rgb(47,59,82);
    width: 80%;
    display: inline-flex;
    margin: 32px 12px 32px 12px;
    flex-direction: column;
    flex-wrap: wrap;
}

.chart-canvas {
    padding: 32px;
}

panel.js:

var dateLabels = ['Jan 07', 'Jan 08', 'Jan 09', 'Jan 10', 'Jan 11', 'Jan 12'] //dates from mysql database
if(window.innerWidth <= 1080) {
    windowSizeChart = 4;
} else windowSizeChart = dateLabels.length-1

   

const ctx = document.getElementById('memberCount');
const myChart = new Chart(ctx, {
    data: {
        datasets: [
            {
                type: 'line',
                label: " New Members",
                data: [0, 602, 300, 600],
                backgroundColor: [
                    'rgba(54, 85, 179, 0.3)',
                ],
                borderColor: [
                    'rgba(259, 259, 259, 0.8)',
                ],
                borderWidth: 1,
                fill: true,
                pointHoverRadius: 4,
                pointHoverBackgroundColor: 'rgba(249, 249, 249, 1)',
                pointHoverBorderColor: 'rgba(249, 249, 249, 0.4)',
                animation: {
                    duration: 0
                  },
            }, {
                type: 'bar',
                label: " Total Users",
                data: [300, 100, 80, 40],
                backgroundColor: [
                    'rgba(255, 155, 90, 0.8)'
                ],
                borderColor: [
                    'rgba(255, 154, 54, 0)'
                ],
                borderWidth: 1,
            }
        ],
    },
    options: {
        scales: {
            x: {
                grid: {
                    borderColor: 'rgba(255, 255, 255, 0.3)',
                    color: 'rgba(255, 255, 255, 0)'
                },
                
                ticks: {
                    color: 'rgba(255, 255, 255, 0.7)',
                    maxTicksLimit: 50
                },
                labels: dateLabels.slice(0, windowSizeChart)
            },
            
            y: {
                grid: {
                    borderColor: 'rgba(255, 255, 255, 0.3)',
                    color: 'rgba(255, 255, 255, 0.05)',
                },
                ticks: {
                    color: 'rgba(255, 255, 255, 0.7)',
                    fontWeight: '200',
                    autoSkip: true,
                    maxTicksLimit: 5,
                },
            }
        },
        interaction: {
            intersect: false,
            mode: 'index',
          },
        plugins: {
            responsive: true,
            legend: {
                display: true,
                align: 'center',
                position: 'bottom',
                labels: {
                    color: "rgba(249, 249, 249, 0.5)",
                    padding: 25,
                 },
            },
            tooltip: {
                intersect: false,
                usePointStyle: true,
                titleColor: "rgba(249, 249, 249, 1)",
                backgroundColor: '#18191c',
                titleSpacing: 0,
                padding: 14,
                color: "rgba(249, 249, 249, 0.5)",
                bodySpacing: 6,
                displayColors: true,
                callbacks: {
                    labelPointStyle: function(context) {
                        return {
                            pointStyle: 'dot',
                            rotation: 0,
                        };
                    },
                    labelTextColor: function(context) {
                        return 'rgba(249, 249, 249, 0.7)';
                    },
                }
            }
        }
    }
});

I'm trying to fit the chart in the container. The height should be fixed (80 pixels), but width should be responsive (when gets smaller, width will be as long as the container - +padding), but it's not.
Full size - correct


When gets smaller - the width should be fit with the container - not overlapping


Also, if you know any better idea how to create a chart, that displays daily, weekly and monthly data from the MySQL database, you can let me know, thanks.

Does anyone have any idea, please?
Thank you for all responses,
Adalbert