Chart.js图例长标签被剪裁

c2e8gylq  于 2023-08-05  发布在  Chart.js
关注(0)|答案(1)|浏览(197)

我有一个chart.js图表,其中有一个带有长标签的图例,它们会被剪裁,就像这样:


的数据
Codepen:https://codepen.io/eimrek/pen/yLQbNdX
我更希望图表尽可能地挤在一起,使标签适合。有什么办法可以做到这一点吗?
我尝试了options.layout.padding.right: 100,但这不起作用:


disbfnqx

disbfnqx1#

您应该设置选项options.plugins.legend.maxWidth,请参见the docs
您可以设置一个较大的数字,如maxWidth: 1000,但由于它是可脚本化的,因此您可以使用一个函数来确保为图表本身留出一些宽度。如果maxWidth为图表宽度的90%,则可以使用

{
    options: {
        // other options .....
        plugins: {
            // other plugins .....
            legend: {
                 // other legend options .....
                 maxWidth: ({chart}) => chart.width * 0.9
             }
        }
    }
}

字符串
codepen fork

相关问题