ChartJS柱状图高度过短 如何不受数据集值影响设置更高高度

我希望无论数据集的数值大小，图表都能拥有更大的显示高度。当前图表高度和下方截图所示一致，不会发生变化，以下是我目前使用的完整图表配置，请问是否可以实现不受数据集数值影响，让图表保持更高的显示高度？

当前使用的完整配置：

const KYCctx = document.getElementById('kycChart').getContext('2d');

const KYCChart = new Chart(KYCctx, {
    type: 'bar',
    data: {
        labels: ["Approved", "Denied", "Pending"],
        datasets: [{
            data: [65, 59, 80],
            backgroundColor: [
                'rgba(203, 55, 55, 0.2)',
                ' rgba(39, 187, 101, 0.5)',
                'rgba(255, 171, 45, 0.1)'
            ],
            borderColor: [
                ' rgba(203, 55, 55, 1)',
                'rgba(34, 195, 107, 1)',
                'rgba(255, 171, 45, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                grid: {
                    color: 'rgb(33,34,37)'
                }
            }
        },
        plugins: {

            legend: {
                position: 'bottom',
                labels: {
                    usePointStyle: true,
                    pointStyle: 'circle',
                    boxWidth: 6,
                    generateLabels: (chart) => {
                        console.log(chart);
                        return chart.data.labels.map(
                            (label, index) => ({
                                text: label,
                                fillStyle: chart.data.datasets[0].backgroundColor[index],
                                strokeStyle: chart.data.datasets[0].backgroundColor[index],
                            }
                            )
                        )
                    }

                }
            },
            title: {
                display: true,
                align: "start",
                color: "#ffff",
                font: {
                    size: 18,
                    weight: 700,
                    lineHeight: 2
                },
                padding: {
                    bottom: 20
                }
            }
        }
    }

});

完全可以实现，根据你的需求对应调整配置即可：

固定柱状图高度比例，不受数据数值影响 #

你遇到的高度波动问题来自Chart.js默认的Y轴自适应逻辑：默认配置下Y轴上限会自动匹配当前数据集的最大值，当数据集整体数值偏小时，柱子会几乎占满绘图区高度，数值偏大时柱子高度占比变低，视觉上就会出现高度忽高忽低的问题。
只需要在Y轴配置中固定上限值即可，有两个可选参数：

• max：强制Y轴最大值为设定值，就算数据超过该值也不会自动扩容，适合100%确定数据不会超过阈值的场景
• suggestedMax：默认使用设定值作为Y轴上限，若出现数据超过该值的特殊情况会自动适配调整，兼容性更好

以KYC审核类数据通常为0-100的数值场景为例，修改后的Y轴配置如下：

scales: {
    y: {
        beginAtZero: true,
        // 根据自身业务的数据上限调整数值，比如百分比场景填100即可
        suggestedMax: 100,
        grid: {
            color: 'rgb(33,34,37)'
        }
    }
}

配置完成后，无论数据集内的数值是10还是90，Y轴都会固定从0到设定值渲染，柱子的高度比例保持稳定，不会因为数据变化出现视觉上的高度压缩。

调整整个图表的物理显示高度 #

如果你需要让整个图表（包含标题、图例、绘图区）整体更高，由于你开启了responsive: true响应式配置，只需要给canvas元素的父容器设置固定高度即可：

1. 给canvas添加父容器，设置如下CSS：

.chart-box {
    position: relative;
    /* 按需调整为需要的高度即可，比如400px、500px */
    height: 400px;
}

2. 将canvas放入该父容器内：

<div class="chart-box">
    <canvas id="kycChart"></canvas>
</div>

响应式模式下Chart.js会自动撑满父容器尺寸，不需要修改其他JS配置。

内容的提问来源于stack exchange，提问作者A.Mac