ChartJS 图表和数据标签:自动Y轴(和动态数据)隐藏数据标签

wz8daaqr  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(228)

我有一个带有标签(数据标签)的图表(chartjs)。当我的数据更改时,图表会自动更新。但是,最大的数据标签大多数时候会被Y轴的自动调整大小所隐藏。您有什么办法可以解决这个问题吗?

上面应该是一个3:)
下面是我的代码:

const completionOptions = {
        responsive: true,
        plugins: {
            legend: {
                display: false,
            },
            tooltip: {
                backgroundColor: 'rgb(85, 85, 85, 1)',
                displayColors: false,
                // https://www.chartjs.org/docs/latest/configuration/tooltip.html
            },
            datalabels: {
                color: 'rgb(203, 203, 203)',
                anchor: 'end',
                align: 'end',
                labels: {
                    title: {
                        font: {
                            family: 'karla',
                            weight: '600',
                            size: 12,
                        },
                    }
                }
            }
        },
        scales: {
            display: false,
            y: {
                beginAtZero: true,
                display: false,
                grid: {
                    display: false,
                },
                ticks: {
                    padding: 10
                }
            },
            x: {
                grid: {
                    display: false,
                },
                ticks: {
                    autoSkip: false,
                    maxRotation: 0,
                    minRotation: 0,
                    font: {
                        size: 20,
                    }
                }
            },
          }
    }
zujrkrfu

zujrkrfu1#

可以使用grace选项向y轴添加额外空间:
第一个

相关问题