Chartjs-Chart.js – graph responsivity / sizing

Here is the answer. I set the maintainAspectRatio to false and then the canvas height to 400 (or whatever height you want to use).

html:

<div class="container">
    <div class="chart-canvas">
        <canvas id="memberCount" height='400'></canvas>
    </div>
</div>

js:

var dateLabels = ['Jan 07', 'Jan 08', 'Jan 09', 'Jan 10', 'Jan 11', 'Jan 12']
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: " Total Members",
                data: [0, 600, 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: " New Users",
                data: [721, 192, 290, 523],
                backgroundColor: [
                    'rgba(255, 155, 90, 0.8)'
                ],
                borderColor: [
                    'rgba(255, 154, 54, 0)'
                ],
                borderWidth: 1,
            }
        ],
    },
    options: {
        maintainAspectRatio: false,
        interaction: {
            intersect: false,
            mode: 'index',
        },
        scales: {
            x: {
                grid: {
                    borderColor: 'rgba(255, 255, 255, 0.3)',
                    color: 'rgba(255, 255, 255, 0)'
                },
                
                ticks: {
                    color: 'rgba(255, 255, 255, 0.7)',
                    autoSkip: true,
                },
                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,
                },
            }
        },
        plugins: {
            responsive: true,
            legend: {
                display: true,
                align: 'center',
                position: 'bottom',
                labels: {
                    color: "rgba(249, 249, 249, 0.5)",
                    padding: 40,
                 },
            },
            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)';
                    },
                }
            }
        }
    }
});

css:

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

.chart-canvas {
    padding: 32px;
}