我想调整我的ChartJS/React-chartjs-2饼图,使图例均匀地堆叠在饼图的一侧。我尝试过操作options.legend.position,但它似乎没有变化。下面是代码片段和饼图的屏幕截图。我使用的是chart.js 3.9.0 / react-chartjs-2 4.3.1 / react 18.2.0
谢谢你!
const options = {
title:{
display: true,
text: "Current Allocations"
},
legend: {
position: "right",
},
responsive: true,
animation: {
animateRotate: false,
animateScale: true,
},
};
const data = {
labels: [
"Cash / Cash Equivalents - $" +
cashTotal.toLocaleString() +
" - " +
cashPercent.toFixed(0) +
"%",
"Fixed Income - $" +
fixedIncomeTotal.toLocaleString() +
" - " +
fixedIncomePecent.toFixed(0) +
"%",
"Real Estate - $" +
realEstateTotal.toLocaleString() +
" - " +
realEstatePercent.toFixed(0) +
"%",
"Private Equities - $" +
privateEquityTotal.toLocaleString() +
" - " +
privateEquityPercent.toFixed(0) +
"%",
"Commodities / Futures - $" +
commoditiesAndFuturesTotal.toLocaleString() +
" - " +
commoditiesAndFuturesPercent.toFixed(0) +
"%",
"Blockchain and Crypto - $" +
blockChainTotal.toLocaleString() +
" - " +
blockChainPercent.toFixed(0) +
"%",
"Equities - $" +
equitiesTotal.toLocaleString() +
" - " +
equitiesPercent.toFixed(0) +
"%",
"Oil and Gas / Energy - $" +
oilAndGasTotal.toLocaleString() +
" - " +
oilAndGasPercent.toFixed(0) +
"%",
"Longevity - $" +
longevityTotal.toLocaleString() +
" - " +
longevityPercent.toFixed(0) +
"%",
"Life Insurance - $" +
lifeInsuranceTotal.toLocaleString() +
" - " +
lifeInsurancePercent.toFixed(0) +
"%",
],
datasets: [
{
data: [
cashTotal,
fixedIncomeTotal,
realEstateTotal,
privateEquityTotal,
commoditiesAndFuturesTotal,
blockChainTotal,
equitiesTotal,
oilAndGasTotal,
longevityTotal,
lifeInsuranceTotal,
],
backgroundColor: [
"rgba(121, 224, 162, 0.8)",
"rgba(93, 217, 99, 0.8)",
"rgba(174, 209, 69, 0.8)",
"rgba(201, 134, 46, 0.8)",
"rgba(194, 25, 70, 0.8)",
"rgba(95, 8, 105, 0.8)",
"rgba(18, 10, 102, 0.8)",
"rgba(12, 61, 92, 0.8)",
"rgba(18, 91, 115, 0.8)",
"rgba(88, 177, 187, 0.8)",
],
},
],
};
return (
<div style={{ width: "500px" }}>
<Pie data={data} options={options} />
</div>
);
1条答案
按热度按时间wecizke31#
我可以通过将legend.position从options移到options.plugins来修复这个问题