我想使用镜像选项,以便在图形“内部”显示y轴值:
现在的问题是x轴应该从这些值之后开始,但我不能移动它们。
该图表是使用以下代码构建的:
this.chart = new Chart(this.canvas.nativeElement, {
type: 'bar',
data: data,
options: {
scales: {
x: {
stacked: true,
grid: {
display: false,
drawBorder: false
},
ticks: {
color: '#333',
font: {
weight: 'bold'
},
maxRotation: 0,
maxTicksLimit: this.loadLabels()?.length / 2
},
bounds: 'ticks'
},
y: {
type: 'linear',
beginAtZero: true,
stacked: true,
title: {
display: false,
},
display: true,
grid: {
display: true,
drawBorder: false,
lineWidth: 1,
borderColor: 'rgb(244, 244, 244, 0.7)',
color: 'rgb(244, 244, 244, 0.7)'
},
ticks: {
display: true,
maxTicksLimit: 5,
mirror: true,
callback: (val) => formatCurrency(+val, 'it', getCurrencySymbol(this.currency, 'narrow'), this.currency)
}
}
}
},
});
我尝试了padding
和grace
两个选项都没有成功。。有人知道怎么做吗?
1条答案
按热度按时间qncylg1j1#
可以按如下方式定义
y.ticks.padding
:除此之外,您还需要定义
layout.padding.left
,以确保刻度标签仍显示在canvas
上。显然,您需要根据自己的需要调整数字。
有关详细信息,请参阅Chart.js文档中的Tick Configuration and Padding。