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

如何解决react-chartjs-2 刻度不会与中心对齐

我正在尝试像这样在中心对齐折线图刻度： Image of what I need to achieve

现在我的图表是这样的：Currently achieved

如您所见，我无法删除 xAxis 上的小线或将它们对齐到中心，而且当我有大量数据时，该线会非常尖 Like this 并且会很平滑与其他行一样。

这是我目前的配置：

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,fontFamily: "Roboto Regular",source: "labels",maxTicksLimit: '',autoSkip: true,maxRotation: 0,minRotation: 0,tickColor: "transparent"
                    },gridLines: {
                        align: 'start',drawOnChartArea: false,offsetGridLines: false
                    }
                }]
            }
        }