#reactjs #chart.js #react-chartjs-2
Вопрос:
Я пытаюсь выровнять галочки линейного графика по центру следующим образом: Изображение того, чего мне нужно достичь
И прямо сейчас мой график выглядит так: В настоящее время достигнуто
Как вы можете видеть, я не могу удалить маленькие линии на оси X или выровнять их по центру, а также, когда у меня много данных, линия будет очень заостренной, как эта, и она будет гладкой, как и другие линии.
Это моя конфигурация до сих пор:
data: {
labels: [],
datasets: [
{
label: false,
data: [],
fill: true,
borderWidth:2,
backgroundColor: '#E0F2FE',
borderColor: '#14A1FB',
pointRadius: 0,
lineTension: 0,
cubicInterpolationMode: 'monotone',
borderCapStyle: 'round',
},
],
},
options: {
animation: {
duration: 0,
},
responsive: true,
layout: {
padding: 2,
},
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
alignToPixels: true,
yAxes: [{
position: 'right',
ticks: {
align: 'start',
mirror: true,
z: 1,
padding: 5,
beginAtZero: false,
fontColor: '#9c9c9c',
maxTicksLimit: 4,
offset: true,
},
gridLines: {
drawOnChartArea: true,
borderDash: [8, 4],
beginAtZero: true,
drawBorder: false,
offsetGridLines: true
}
}],
xAxes: [{
ticks: {
align: 'start',
padding: -25,
z: 1,
fontColor: '#9c9c9c',
fontFamily: "Roboto Regular",
source: "labels",
maxTicksLimit: '',
autoSkip: true,
maxRotation: 0,
minRotation: 0,
tickColor: "transparent"
},
gridLines: {
align: 'start',
drawBorder: false,
drawOnChartArea: false,
beginAtZero: false,
offsetGridLines: false
}
}]
}
}