英文:
Chart.js legend long labels clipped
问题
我有一个使用Chart.js创建的图表，图例上有长标签，它们被截断了，像这样：
Codepen链接：https://codepen.io/eimrek/pen/yLQbNdX
我希望图表尽可能地被挤在一起，以使标签适应。有没有办法做到这一点？
我尝试过使用options.layout.padding.right: 100，但这并不起作用：
英文:
I have a chart.js chart with a legend that has long labels and they get clipped, like this:
Codepen: https://codepen.io/eimrek/pen/yLQbNdX
I would prefer that the chart gets squeezed together as much as possible to make the labels fit. Is there any way to do this?
I tried with options.layout.padding.right: 100, but this doesn't work:
答案1
得分: 1
你应该设置选项 options.plugins.legend.maxWidth，参见文档
你可以设置一个较大的数字，如 maxWidth: 1000，但由于它是可脚本化的，你可以使用一个函数来确保留一些宽度给图表本身。对于图表宽度的 90% 作为 maxWidth，你可以使用：
{
options: {
// 其他选项...
plugins: {
// 其他插件...
legend: {
// 其他图例选项...
maxWidth: ({chart}) => chart.width * 0.9
}
}
}
}
英文:
You should set the option options.plugins.legend.maxWidth, see the docs
You may set a large number, like maxWidth: 1000, but since it is scriptable, you may use a function to make sure you leave some width to the chart itself. For a maxWidth of 90% of the chart width, you may use
{
options: {
// other options .....
plugins: {
// other plugins .....
legend: {
// other legend options .....
maxWidth: ({chart}) => chart.width * 0.9
}
}
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论