react-chartjs-2 栏触及顶部
react-chartjs-2 bar touches the top
当数据填满时,它会到达行的顶部。有没有限制顶部的选项,我需要显示带有货币符号的数字。
我需要更改 x 轴以显示超过上限的值。有什么选择吗
<Bar
data={incomePropertyData}
width={100}
height={450}
options={{
maintainAspectRatio: false,
legend: {
display: true,
fontColor: "#686868",
fontFamily: "kanit, sans-serif",
},
tooltips: {
titleAlign: "center",
titleMarginBottom: 8,
bodyFontFamily: "'Nunito', sans-serif",
callbacks: {
label: function (tooltipItem, data) {
var label =
data.datasets[tooltipItem.datasetIndex].label || "";
if (label) {
label += " : ";
}
label += "₹ " + tooltipItem.yLabel;
return label;
},
},
},
responsive: true,
scales: {
yAxes: [
{
ticks: {
fontFamily: "'Nunito', sans-serif",
fontSize: 14,
},
},
],
yAxes: [
{
ticks: {
fontFamily: "'Nunito', sans-serif",
fontSize: 14,
beginAtZero: true,
callback: function (value, index, values) {
return "₹ " + value;
},
},
},
],
},
}}
/>
我想你可以试试我在这里做的例子:
https://stackblitz.com/edit/react-boilerplate-scalabw-45793890
您可以在 scales: { yAxes : [{max: maxvalue}] }
中使用最大值
你只需要添加一个获取最大值的函数并添加"padding value"。
我还简化了示例中的代码,因为 yAxes 和 yAxes 之间存在重复。
当数据填满时,它会到达行的顶部。有没有限制顶部的选项,我需要显示带有货币符号的数字。
我需要更改 x 轴以显示超过上限的值。有什么选择吗
<Bar
data={incomePropertyData}
width={100}
height={450}
options={{
maintainAspectRatio: false,
legend: {
display: true,
fontColor: "#686868",
fontFamily: "kanit, sans-serif",
},
tooltips: {
titleAlign: "center",
titleMarginBottom: 8,
bodyFontFamily: "'Nunito', sans-serif",
callbacks: {
label: function (tooltipItem, data) {
var label =
data.datasets[tooltipItem.datasetIndex].label || "";
if (label) {
label += " : ";
}
label += "₹ " + tooltipItem.yLabel;
return label;
},
},
},
responsive: true,
scales: {
yAxes: [
{
ticks: {
fontFamily: "'Nunito', sans-serif",
fontSize: 14,
},
},
],
yAxes: [
{
ticks: {
fontFamily: "'Nunito', sans-serif",
fontSize: 14,
beginAtZero: true,
callback: function (value, index, values) {
return "₹ " + value;
},
},
},
],
},
}}
/>
我想你可以试试我在这里做的例子: https://stackblitz.com/edit/react-boilerplate-scalabw-45793890
您可以在 scales: { yAxes : [{max: maxvalue}] }
你只需要添加一个获取最大值的函数并添加"padding value"。
我还简化了示例中的代码,因为 yAxes 和 yAxes 之间存在重复。