我的图表值显示不正确

Question

我有一个Chart.js的Barchart，正在尝试显示其数据。这是我的图表代码：

        Chart.defaults.global.legend.display = false;
        var ctx = document.getElementById('chart2').getContext('2d');
        var chart = new Chart(ctx, {

            // Configuration options go here
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            min: 0,
                            max: 40000,
                            stepSize: 5000
                        }
                    }]
                },
                responsive: true,
                maintainAspectRatio: true,
            },
            // The type of chart
            
            type: 'bar',
            // The data
            data: {
                labels: ["First", "Second", "Third"],
                datasets: [{
                        backgroundColor: 'rgb(21, 90, 73)',
                        borderColor: 'rgb(21, 90, 73)',
                        data: [10810, 30069, 20046],
                }],
            },

        });

我希望看到第一个图表占据可用高度的大约四分之一，第二个占据大约四分之三，最后一个占据大约一半。而且，尽管图表之间的尺寸比较正确，但它们与Graph中假定的尺寸相差甚远。这是屏幕截图： Charts
任何帮助将不胜感激。