reactjs - react-chartjs-2 刻度不会与中心对齐

Question

我正在尝试像这样对齐中心的折线图刻度： 我需要实现的图像

现在我的图表是这样的：目前已实现

如您所见，我无法删除 xAxis 上的小线或将它们对齐在中心，以及当我有很多数据时，这条线会非常尖，就像这样，它会像其他线一样平滑。

到目前为止，这是我的配置：

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
                    }
                }]
            }
        }