react-chartjs-2 тика не выровняются по центру

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