我使用的是react-chartjs-2(版本4.3.1)。如图所示,即使我使用相同的组件,由于标签的原因,宽度和高度也不再相同。我希望显示像左侧的piechart,即使右侧有许多标签。我该如何解决这个问题?
代码
<Pie
height={400}
data={{
labels: labels,
datasets: [
{
label: "Label 1",
data: data,
backgroundColor: [
palette.primary.main,
palette.utility.maroonRed,
palette.text.primary,
palette.primary.grey,
palette.secondary.dark,
palette.primary.subtle
],
},
],
}}
options={{
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: "bottom"
},
}
}}
/>
)
2条答案
按热度按时间7fyelxc51#
由于图表受画布大小的限制,因此您有3个选项:
1.使用过滤器回调限制显示的图例项的数量
1.将画布放大,以便图表有更多空间根据标签呈现所有内容
1.禁用图例,使其始终呈现相同大小
h9a6wy2h2#
如果此用例可以接受,则可以在图例中仅包含数据集的子集(例如top5),而在另一个“其他”图例项中包含所有其他数据集。
第一个