ChartJS条形图太短

kjthegm6  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(442)

我希望图表更大,而不考虑值。当前,图表的高度是图片中的高度,并且不会更改。这是我当前拥有的图表的完整配置。是否可以让图表具有更大的高度,而不考虑数据集值?

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
                }
            }
        }
    }

});
nbnkbykc

nbnkbykc1#

您可以在canvas上明确定义height

<canvas id="kycChart" height="400"></canvas>

第一个

相关问题